-
web前端第三天作业
笔记
3.4 多媒体标签
img标签
⽬前在⽹⻚中使⽤的图⽚主要有 GIF、JPG、PNG、BMP 格式，但以 GIF、PNG 和 JPG 使⽤居多。GIF ⽀持动画和背景透明，同时图⽚通常⽐较⼩，但仅⽀持 256 ⾊以内的图像，因此⾊彩不够丰富。JPEG ⽀持 1670 万种颜⾊，但不⽀持动画和背景透明。当想要背景透明的时候，⼀般会使⽤PNG格式的图⽚，所以我们可以根据两者的优缺点来选择图像的格式。DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>在⽹⻚中插⼊图⽚title> head> <body> <img src="images/rose.jpg"> <img src="./images/rose.jpg"> <img src="c://images/rose.jpg"> <img src="http://www.xianoupeng.com/uploadfile/2019/0428/20190428101229423.png" alt="⽆法正常显示" title="李⽩"> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
alt：当图⽚⽆法正常显示时，显示的⽂本内容
title：当⿏标悬停在图⽚上会弹出的⽂字提示，如果alt本身没有赋值的话，那么alt=title⾳频标签和视频标签（audio，video）语法结构
<audio src="资源路径" autoplay="autoplay" controls = "controls"> <video src="资源路径" autoplay="autoplay" muted="muted" controls = "controls">- 1
- 2
audio和video在主流浏览器上不⽀持⾃动播放，video想要进⾏⾃动播放的话需要添加静⾳muted。
autoplay：⾃动播放。
controls：显示操作界⾯。
布尔型属性：只要你将属性写出来那么她就默认是true并且⽆法修改，除⾮移除属性。3.5 表格标签
表格通过table标签创建。它包含的⼦元素有 thead、 tbody 、tfoot 、tr、 td。
thead 、tbody、 tfoot：
这三个标签可以进⾏分批显示表格 不⾄于完全加载才能显示。
⽆论这三个标签的书写顺序如何，都会按照 头 躯⼲ 尾的顺序进⾏输出table⽀持的属性有：
width/height：⽤于空难告知表格的宽⾼，指数具体的像素输⼊，也⽀持百分⽐输⼊。
align：控制表格在⻚⾯中的位置 可以是 左对⻬ 右对⻬ 剧中 left right center。
表格的合并
rowspan：所填数字为要合并的单元格个数，并且是由上⾄下进⾏合并。
colspan：所填数字为要合并的单元格个数，合并顺序从左⾄右。DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> head> <body> <div> <table border="1" cellspacing=0 cellpadding=10 align="left"> <tr> <td>学⽣名字td> <td>学⽣学号td> <td>学⽣年龄td> <td>学⽣身⾼td> tr> <tr> <td>张三td> <td>1td> <td rowspan="3">20td> <td>180td> tr> <tr> <td>李四td> <td>2td> <td>180td> tr> <tr> <td>王五td> <td>3td> <td>180td> tr> <tr> <td colspan="4">合计:3⼈td> tr> table> div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
3.6 超链接标签
超连接标签是H5的重要组成部分之⼀，它通过超链接实现跳转其他⽹⻚的⽬的，超连接标签是 a。
- ⽂字超链接
语法结构
<a href = "要跳转的⻚⾯url" target = "跳转⽅式">- 1
target：如果不写，target默认是self，将会通过⾃身选项卡进⾏加载⻚⾯，target如果是_blank那么它将新建⼀个选项卡进⾏⻚⾯跳转。
DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> head> <body> <a href="https://www.baidu.com">点击这⾥进⾏跳转a> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 锚链接
制作⽹⻚时，如果⽹⻚巨⻓，可在顶部位置创建⼀个a标签让它绑定底部标签的id（#id），然后点击a标签即可达到跳转的⽬的。
DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> head> <body> <a href="#bottom">直达底部a> <div id="top" style="height: 2000px; border: 1px solid red;">div> <div style="height: 2000px; border: 1px dotted green;">div> <div id="bottom" style="height: 2000px; border: 1px solid blue;">div> <a href="#top">回到顶部a> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 图⽚超链接
就是在a标签中填⼊img标签，这样既可达到点击图⽚跳转url的⽬的。
DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> head> <body> <a href="http://www.baidu.com" target="_blank"> <img src="./pic/李⽩.jpg" alt=""> a> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 热区超连接
将⼀个图⽚分隔为多个区域，这些区域可以是矩形、原型、多边形，通过点击不同的区域进⾏不同的跳转。
DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> head> <body> <img src="./pic/李⽩.jpg" usemap="#map"> <map id="map"> <area shape="rect" coords="0,0,100,100" href="http://www.baidu.com" alt=""> <area shape="circle" coords="100,50,50" href="http://www.baidu.com" alt=""> <area shape="poly" coords="200,100,300,0,400,100" href="http://www.baidu.com" alt=""> map> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
3.7 表单标签
列表标签是⽤来给⽤进⾏数据提交的标签，是⼀种交互标签，这⾥我们学习三个表单标签。
form：通过form标签可以创建⼀个表单，它拥有三个较重要的属性：
action它要需要填⼊⼀个直线哪个服务器的url，这个url指向转为处理表单的接⼝函数。
method:也就是http的请求⽅式，这⾥咱们主要使⽤get和post。
input：最常⽤的输⼊标签，它有多重输⼊类型，详⻅代码。
**select：**下拉框，multiple存在时，它是⼀个列表。
**textarea：**多⾏⽂输⼊框DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> head> <body> <form action="#" method="get" enctype="multipart/form-data"> ⽤户昵称:<input type="text" name="username" value="123"><br> ⼀些⽐较重要的属性: 3.8 列表标签 现在的⼀个商业级别的⻚⾯，数据⼀般都是分组呈现的，以列表组的形式出现（显得⻚⾯整⻬），所以在⻚⾯上， 列表标签是出现频率较⾼的标签。 列表标签主要⽤三种--有序、⽆ 序、数据列表。 3.6.1 有序列表 有序列表使⽤ol标签，数据是呈现为有顺序的 ⽤户密码:<input type="password" name="password" id="" value="" /><br> ⽤户性别:<input type="radio" name="sex" id="" value="1" /> <input type="radio" name="sex" id="" value="2" />⼥ <input type="radio" name="sex" id="" value="3" />跨性别<br> ⽤户爱好:<input type="checkbox" name="fav" id="" value="" />lol <input type="checkbox" name="fav" id="" value="" />王者荣耀 <input type="checkbox" name="fav" id="" value="" />漂亮的⼩哥哥/⼩姐姐 <input type="checkbox" name="fav" id="" value="" />唱跳rap <br> <input type="email"><br> <input type="file"><br> <input type="submit"> <br><br><br> <input type="date"><br> <input type="datetime-local"><br> <input type="url"> <input type="range" min="20" max="40" value="30"><br> form> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
3.8 列表标签
现在的⼀个商业级别的⻚⾯，数据⼀般都是分组呈现的，以列表组的形式出现（显得⻚⾯整⻬），所以在⻚⾯上，
列表标签是出现频率较⾼的标签。
列表标签主要⽤三种–有序、⽆ 序、数据列表。3.6.1 有序列表
有序列表使⽤ol标签，数据是呈现为有顺序的
DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>有序列表title> head> <body> <ol type="1" start="1" reversed> <li>软件开发概论li> <li>数据库技术基础li> <li>控制台开发li> <li>WEB ⽹⻚编程li> <li>图形界⾯开发li> ol> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
type：序号类型，有三种可选（1,a,i）
start：第⼀个序号的起始数字
reversed：序号逆序3.6.2 ⽆序列表
⽆序列表使⽤ul标签。
DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>有序列表title> head> <body> //circle 空⼼圆 disc 实⼼圆 square ⽅块 <ul type="circle"> <li>软件开发概论li> <li>数据库技术基础li> <li>控制台开发li> <li>WEB ⽹⻚编程li> <li>图形界⾯开发li> ul> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
typed：设置序号的种类, ⽆序列表序号种类有三种（circle 空⼼圆 disc 实⼼圆 square⽅块）
注意：在真正的编程中，我们很少使⽤ul提供的type类型，我们会使⽤css去掉默认样式，由我们⾃⼰添加，这样⻚⾯好看很多。3.6.3 数据列表 dl
数据列表主要⽤来描述存在标题的列表组
DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>有序列表title> head> <body> dl标签 ：数据列表标签 dt标签：列表标题 dd标签：列表内容 HTML5 允许在⼀个dl标签中，存在多个dt组。 第四章 层叠样式表CSS Cascading style sheet 层叠样式表。 语法结构 4.1 CSS的⼏种写法 ⾏内样式（标签样式）:写在标签内部。 内嵌样式(⻚⾯样式)：他是写在style标签中的。 外部链接样式：他是通过link标签将已经写好的CSS⽂档引⼊到当前的⻚⾯中。 import导⼊式：他是通过CSS提供的import功能进⾏导⼊的。 import和link的区别： 1.归属性区别：import属于CSS提供，link是html⾃带的标签。 <dl> <dt>地⽅新闻dt> <dd>地⽅新闻1dd> <dd>地⽅新闻2dd> <dd>地⽅新闻3dd> <dt>国内新闻dt> <dd>国内新闻2dd> <dd>国内新闻3dd> <dd>国内新闻4dd> <dt>国际新闻dt> <dd>国际新闻1dd> <dd>国际新闻2dd> <dd>国际新闻3dd> dl> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
dl标签 ：数据列表标签
dt标签：列表标题
dd标签：列表内容
HTML5 允许在⼀个dl标签中，存在多个dt组。第四章 层叠样式表CSS
Cascading style sheet 层叠样式表。
语法结构element/class/id{ 样式属性:值 }- 1
- 2
- 3
4.1 CSS的⼏种写法
-
⾏内样式（标签样式）:写在标签内部。 内嵌样式(⻚⾯样式)：他是写在style标签中的。
-
外部链接样式：他是通过link标签将已经写好的CSS⽂档引⼊到当前的⻚⾯中。
-
import导⼊式：他是通过CSS提供的import功能进⾏导⼊的。
import和link的区别：
1.归属性区别：import属于CSS提供，link是html⾃带的标签。
2.加载顺序的区别：link会在⻚⾯加载时同时进⾏加载，⽽import会在⻚⾯加载完毕后进⾏加载。
3.兼容性的区别：link是html⾃带的所以不存在兼容性问题，⽽import是CSS2.1版本才提供的，对应IE 5.0以上的浏览器才可以使⽤。
4.使⽤DOM控制的区别：如果使⽤的是import，js代码是没有办法获取到CSS的相关数据，⽽link不存在此问题。DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> <style> /* ⻚⾯样式 */ div{ border: 1px solid red; } /* import导⼊式 */ @import url(index.css); style> <link rel="stylesheet" href="./index.css"> head> <body> <div style="border: 1px solid red;">123123div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
4.2 CSS的选择器
- 基本选择器:
标签选择器
语法结构：
标签{ css内容 }- 1
- 2
- 3
通过标签名书写css样式，作⽤所有的标签上。
id选择器
语法结构#id{ 样式内容 }- 1
- 2
- 3
通过#id的形式创建css样式，作⽤在被绑定的id的标签。
class选择器
语法结构.类名{ 样式内容 }- 1
- 2
- 3
通过**.**类名的形式创建css样式，作⽤在通过属性class引⽤它的标签内
通配符选择器（⼀般在清除浏览器样式的场景下使⽤）DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> <style> /* 通配符选择器 */ /* *{ padding: 0; margin: 0; } */ dl{ border: 1px solid red; } /* id选择器 */ #dl-first{ border: 1px dashed red; } /* 类选择器 */ .dl-second{ border: 1px dashed blue; } style> head> <body> <dl id="dl-first" class="dl-second"> <dt>123123dt> <dd>111111dd> <dd>111111dd> <dd>111111dd> dl> <dl class="dl-second"> <dt>123123dt> <dd>111111dd> <dd>111111dd> <dd>111111dd> dl> <dl class=" dl-second"> <dt>123123dt> <dd>111111dd> <dd>111111dd> <dd>111111dd> dl> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 包含选择器
⼦代选择器：他只修饰某标签的下⼀级标签,语法结构:
(标签/.类名/#id ....) > 标签 （当然你也可以是使⽤ 标签/.类名/#id .... 只是没有必要）{ 样式内容 }- 1
- 2
- 3
后代选择器：他修饰某标签所有⼦标签
(标签/.类名/#id ....) (这⾥是个空格) 标签 （当然你也可以是使⽤ 标签/.类名/#id .... 只是没 有必要）{ 样式内容 }- 1
- 2
- 3
- 4
分组选择器：通过“，”可以同时创建多种选择器。语法结构
标签,.类名，#id , ...{ 样式内容 }- 1
- 2
- 3
DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> <style> #ol-id > .box{ border: 1px solid red; } ol , #ol-id, .box{ border: 1px solid blue; } style> head> <body> <ol class="ol-class" id="ol-id"> <li>⼦项1li> <li>⼦项2li> <li>⼦项3li> <li>⼦项4li> <li>⼦项5li> <li>⼦项6li> <li>⼦项7li> <li>⼦项8li> <li>⼦项9li> <ul class="box"> <li>⼦项1li> <li>⼦项2li> <li>⼦项3li> <li>⼦项4li> <li>⼦项5li> <li>⼦项6li> <li>⼦项7li> <li>⼦项8li> <li>⼦项9li> ul> ol> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 属性选择器
属性选择可以根据元素的属性或者属性值来进⾏选取要修饰的元素。 语法结构： [属性=值] [属性*=值]如果 属性的值
包含“值“的内容那么选择该标签 [属性^=值]如果 属性的值 是以"值"开头的那么选择该标签 [属性$=值]如果 属性的值
是以"值"结尾的那么选择该标签 [属性~=值]如果 属性的值 包含"值"并且是个完整的单词 那么选择⽽该标签 [属性|=值]如果 属性的值
包含"值"并且是个完整的单词且唯⼀ 那么选择⽽该标签DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> <style> /* 包含单词 */ [type ~= "yiuyiu"]{ border: 1px solid red; } /* 包含且唯⼀的单词 */ [type |= "yiuyiu"]{ border: 1px solid red; } /* 包含某值 */ [type *= "t"]{ border: 1px solid red; } /* 以什么开头 */ [type ^= "t"]{ border: 1px solid red; } /* 以什么结尾 */ [type $= "t"]{ border: 1px solid red; } style> head> <body> <input type="yiuyiu font"> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> <style> /* 包含单词 */ ol > li.box[type ~= "yiuyiu"]{ border: 1px solid red; } /* 包含且唯⼀的单词 */ /* [type |= "yiuyiu"]{ border: 1px solid red; } */ /* 包含某值 */ /* [type *= "t"]{ border: 1px solid red; } */ /* 以什么开头 */ /* [type ^= "t"]{ border: 1px solid red; } */ /* 以什么结尾 */ /* [type $= "t"]{ border: 1px solid red; } */ style> head> <body> <ol type="yiuyiu"> <li class="box" type="yiuyiu">1231231li> <li>1231232li> <li>1231233li> <li>1231234li> <li>1231235li> <li>1231236li> <li>1231237li> <li>1231238li> <li>1231239li> ol> <input type="yiuyiu font"> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 伪类选择器
他可以修饰同⼀个标签不同那个状态的样式
：link 常规的链接样式
：visited 点击过后的样式
：hover ⿏标悬停其上的样式
：active 点击中的样式注意！！！当你在创建伪类选择器的时候 ⼀定要按照以上顺序进⾏创建，否则选择器可能失效，love hate。- 伪元素选择器
通过伪元素选择器可以设置元素的指定样式。
主要是⽤来修改元素内的⽂本样式⽐如，⾸字⺟或者⾸⾏样式，或是在元素内容前后插⼊其他样式
这个选择器可以构建⼀个伪元素（JS等技术⽆法访问，存在在⻚⾯中，只能使⽤css渲染的）这样的元素使得css的功能进⼀步的加强
::before 当前内容前⾯的部分
::after 当前内容前⾯的部分
::first-letter 当前内容⾸字⺟
::first-line 当前内容的⾸⾏
::selection 当前内容的选中部分以下是⼀些常⻅的伪类和伪元素选择器。
选择器 示例 示例说明:checked input:checked 选择所有选中的表单元素 :disabled input:disabled 选择所有禁⽤的表单元素 :empty p:empty 选择所有没有⼦元素的p元素 :enabled input:enabled 选择所有启⽤的表单元素 :first-of-type p:first-of-type 选择的每个 p 元素是其⽗元素的第⼀个 p 元素 :in-range input:in-range 选择元素指定范围内的值 :invalid input:invalid 选择所有⽆效的元素 :last-child p:last-child 选择所有p元素的最后⼀个⼦元素 :last-of-type p:last-of-type 选择每个p元素是其⺟元素的最后⼀个p元素 :not(selector) :not(p) 选择所有p以外的元素 :nth-child(n) p:nth-child(2|2n- 1|odd|even) 选择所有 p 元素的⽗元素的第⼆个⼦元素 :nth-last-child(n) p:nth-last-child(2) 选择所有p元素倒数的第⼆个⼦元素 :nth-last-of- type(n) p:nth-last-of-type(2) 选择所有p元素倒数的第⼆个为p的⼦元素 :nth-of-type(n) p:nth-of-type(2) 选择所有p元素第⼆个为p的⼦元素 :only-of-type p:only-of-type 选择所有仅有⼀个⼦元素为p的元素 :only-child p:only-child 选择所有仅有⼀个⼦元素的p元素 :optional input:optional 选择没有"required"的元素属性 :out-of-range input:out-of-range 选择指定范围以外的值的元素属性 选择器 示例 示例说明 :read-only input:read-only 选择只读属性的元素属性 :read-write input:read-write 选择没有只读属性的元素属性 :required input:required 选择有"required"属性指定的元素属性 :root root 选择⽂档的根元素 :target #news:target 选择当前活动#news元素(点击URL包含锚的名字) :valid input:valid 选择所有有效值的属性 :link a:link 选择所有未访问链接 :visited a:visited 选择所有访问过的链接 :active a:active 选择正在活动链接 :hover a:hover 把⿏标放在链接上的状态 :focus input:focus 选择元素输⼊后具有焦点 ::first-letter p::first-letter 选择每个p 元素的第⼀个字⺟ ::first-line p::first-line 选择每个p元素的第⼀⾏ ::first-child p::first-child 选择器匹配属于任意元素的第⼀个⼦元素的元素 ::before p::before 在每个p元素之前插⼊内容 ::after p::after 在每个p元素之后插⼊内容 ::selection p::selection 被⿏标选中后的样式 :lang( language ) p:lang(it) 为p元素的lang属性选择⼀个开始值- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
4.3 CSS的常⽤样式
- 边框以及弧度样式
border-width：边框的线条宽度。
border-style：边框的样式，例如 solid实现 dotted 点线 dashed 虚线…
border-color：边框的颜⾊
border-radius ：可以⽤来设置边框的圆⻆ 或者将边框从矩形改为圆形 或者椭圆形。
Border-top-left-radius:⽤来设置边框的左上⻆，还有对应的 右下⻆ 右上⻆ 左上⻆ 这⾥不再赘述。- 字体样式
font-family：设置字体的“字体”样式 例如 微软雅⿊ monospace。
font-size：设置字体的⼤⼩。
font-weight：设置字体粗细 常⽤的是bold
font-style：设置斜体。- ⽂本样式
text-align：设置⽂本对⻬⽅式
text-decoration：修饰⽂本主要使⽤上下中划线。
text-transform：⼤⼩写转换
text-overflow：设置超出⽂本部分已省略号的形式电视配合overflow：hidden使⽤。
overflow:auto⾃动可以显示滑动条。hidden会隐藏超出的内容。
overflow-x： 显示横向滑动条。同理overflow-y纵向滑动条。- 阴影效果
text-shadow：给⽂本添加阴影。
box-shadow：给标签添加阴影。DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> <style> div{ border: 1px solid red; font-family: monospace; font-size: 20px; width: 150px; height: 50px; text-align: center; line-height: 50px; border-radius: 20px; color: red; transition: 2s; } div:hover{ color: white; background-color: red; box-shadow: 2px 2px 10px red, -2px 2px 10px red, 2px -2px 10px red, -2px -2px 10px red; } style> head> <body> <div> 阴影效果<br> 123123 div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- display 属性
display：none 隐藏标签 标签将失去原本来的占位已经对应属性样式，visibility：hidden只是隐形了标签
display：inline-block 将⾏内标签设置为⾏内块标签 使其⽀持宽⾼设置。
display：block将⾏内标签设置为块标签。
display：inline将块标签设置为⾏内标签。- 背景样式
Background:color/url（详细可以参考mdn，通按键f1访问）
background-url：填写图⽚链接
background-color：填写图⽚颜⾊
background-repeat：控制图⽚的复制模式，可以横向纵向单独复制（repeat-x,repeat-y），也可以不使⽤复制（no-repeat）。
background-position：可以设置图⽚的位置，多⽤于截取精灵图的图⽚
精灵图：是由多个图⽚拼起来的⼤图，它存在的价值是降低服务器的并发性，避免不必要的开销。一、题目要求：利用第三天所学制作按钮或者一个网页
二、代码1（多媒体）
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>第三天作业title> <style type="text/css"> p{font-size: 16px;font-family: 楷体;color: blue;} .one{background: #74F1CE;} .two{background: #00FF00;} style> head> <body> <h1 align="center"><a href="https://www.baidu.com/">明月几时有a>h1> <hr color="blue" size="5px">hr> <p align="center" ><marquee direction="up" behavior="scroll" > <center>不知天上宫阙，今夕是何年。br>center> <center> 我欲乘风归去，又恐琼楼玉宇，高处不胜寒，起舞弄清影，何似在人间。br> center> <center>转朱阁，抵绮户，照无眠。br> center> <center>不应有恨，何事偏向别时圆。br>center> <center>人有悲欢离合，月有阴晴圆缺，此事古难全。 br> center> <center>但愿人长久，千里共婵娟。br> center> p>marquee> <hr color="red" size="5px">hr> <div class="two"><center><embed src="embed/明月几时有.mp4" width="300px" height="300" autostart="true" loop="false" hspace="10">embed><embed src="embed/蔡琴明月几时有.mp3" width="300px" height="300" autostart="true" loop="false" hspace="10">embed><embed src="htmlexample.mpeg" width="300px" height="300" autostart="true" loop="false" hspace="10">embed>center>div> <div class="one"><marquee direction="left" onMouseOver="this.stop()" onMouseOut="this.start()">欢迎来到我的多媒体世界！！marquee>div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
代码2
DOCTYPE html> <html lang="en"> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="2.css"> <style type="text/css"> img-wrap { width: 200px } style> <title>Gallerytitle> head> <h1 id="h1">Galleryh1> <body id="body"><p > <ul class="ul" ><center> <li> <a href="#"><img src="images/1.jpg" width="200"><img src="images/1.jpg" class="dt"> li>a> <li> <a href="#"><img src="images/2.jpg" width="200"><img src="images/2.jpg" class="dt"> li>a> <li> <a href="#"><img src="images/3.jpg" width="200"><img src="images/3.jpg" class="dt"> li>a> <li> <a href="#"><img src="images/4.jpg" width="200"><img src="images/4.jpg" class="dt"> li>a> <li> <a href="#"><img src="images/5.jpg" width="200"><img src="images/5.jpg" class="dt"> li>a> <li> <a href="#"><img src="images/6.jpg" width="200"><img src="images/6.jpg" class="dt"> li>a> <li> <a href="#"><img src="images/7.jpg" width="200"><img src="images/7.jpg" class="dt"> li>a> <li> <a href="#"><img src="images/8.jpg" width="200"><img src="images/8.jpg" class="dt"> li>a> <li> <a href="#"><img src="images/9.jpg" width="200"><img src="images/9.jpg" class="dt"> li>a> <li> <a href="#"><img src="images/10.jpg" width="200"><img src="images/10.jpg" class="dt"> li>a> <li> <a href="#"><img src="images/11.jpg" width="200"><img src="images/11.jpg" class="dt"> li>a> <li> <a href="#"><img src="images/12.jpg" width="200"><img src="images/12.jpg" class="dt"> li>a> ul> <iframe src=" " frameborder="0" name="framename" width="1400x" height="1300px"> iframe> p>div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
三、截图
- 相关阅读:
STM32单片机OLED俄罗斯方块单片机小游戏
尚硅谷设计模式学习（八）桥接模式
海外众筹如何通过邮件营销？
选购云服务器时云盘该如何选择？（高性能/SSD/增强型/急速型）
基于JSP+MySQL的校园网上订餐系统
学习潘海东博士的《潮汐调和分析原理和应用》和调和分析软件S_Tide
周记之学习总结
Vue中使用Web Serial API连接串口，实现通信交互
分布式定时任务xxljob
hive数据库delete删除部分数据/删除分区内的数据
- 原文地址：https://blog.csdn.net/qq_50589028/article/details/127849777
