HTML和CSS3提高
视频参考：B站Pink老师
本节重点：HTML和CSS3的新增特性
本章目录
- HTML和CSS3提高
- 1.HTML5新特性
- 1.1HTML新增的语义化标签（div无语义）
- 1.2 HTML5新增的多媒体标签
- 1.2.1 视频<video>
- 1.2.2 音频audio
- 1.2.3 多媒体标签总结
- 1.3 HTML新增的input标签
- 1.4 HTML5新增的表单属性
- 2. CSS3新特性
- 2.1 CSS3现状-----CSS新增选择器
- 2.2 属性选择器
- 2.3 结构伪类选择器----->选择父级里的第n个孩子
- 2.4 伪元素选择器
- 2.4.1 伪元素选择器使用场景
- 2.4.1.1 伪元素字体图标
- 2.4.1.2 仿土豆效果
- 2.5 CSS3盒子模型
- 2.6 CSS3其他特性（了解）
- 2.7 CSS过渡（重点）
1.HTML5新特性
1.1HTML新增的语义化标签（div无语义）
-
<header>:头部标签 -
<nav>:导航标签 -
<article>:内容标签 -
<section>:定义文档某个区域 -
<aside>:侧边栏标签 -
<footer>:尾部标签
注意： -
这种语义化标签主要是针对搜索引擎的
-
这些新标签页面中可以使用多次
-
在IE9中，需要将这些元素转换为块级元素
-
移动端更喜欢这些标签
-
HTML5还有很多其他新增标签
参考代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>header,nav {height: 120px;background-color: pink;border-radius: 15px;width: 800px;margin: 0 auto;}section {width: 500px;height: 300px;background-color: skyblue;}</style>
</head><body><header>头部标签</header><nav>导航栏标签</nav><section>某个区域</section>
</body></html>
结果展示：
主要是使用了上面的新增语义化标签，比之前标签意义明确。
1.2 HTML5新增的多媒体标签
1.音频：<audio>
2.视频：<video>
使用这两个标签可以很方便的在页面中嵌入音频和视频，而不再去使用flash和其他浏览器插件
HTML5在不使用插件的情况下，也可以原生的支持视频格式文件的播放，当然支持的格式是有限的
1.2.1 视频
当前video元素支持三种视频格式：MP4、WebM、Ogg
尽量使用MP4格式
语法
<video src="文件地址" controls="controls"></video>
为了照顾兼容性需要了解下面写法：
<video controls="controls" width="300"><source src="move.ogg" type="video/ogg"><source src="move.mp4" type="video/mp4">您的浏览器暂不支持<video>标签播放视频
</video>
常见属性：
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题） |
| controls | controls | 向用户显示播放控件 |
| width | pixels（像素） | 设置播放器宽度 |
| height | pixels（像素） | 设置播放器高度 |
| loop | loop | 播放完是否继续播放该视频，循环播放 |
| preload | auto（预先加载视频）none（不应加载视频） | 规定是否预加载视频（如果有了autoplay就忽略该属性） |
| src | url | 视频url地址 |
| poster | Imgurl | 加在等待的画面图片 |
| muted | muted | 静音播放 |
参考代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>video {width: 100%;}</style>
</head><body><!-- controls可以去掉后期用js写，可以保证在每个浏览器中显示的播放控件是一致的 --><video src="media/mi.mp4" autoplay="autoplay" muted="muted" controls="controls" loop="loop"poster="media/mi9.jpg"></video>
</body></html>
结果展示：
1.2.2 音频audio
当前<audio>支持三种音频格式，MP3格式使用最广泛 MP3、Wav、ogg
语法
<audio src="文件地址" controls="controls"></audio>
为了照顾兼容性需要了解下面写法：
<audio controls="controls"><source src="happy.mp3" type="audio/mpeg"><source src="happy.ogg" type="audio/ogg">您的浏览器暂不支持<audio>标签
</audio>
常见属性：
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性，音频就绪后马上播放 |
| controls | controls | 向用户显示控件 |
| loop | loop | 每当音频结束时重新开始播放 |
| src | url | 要播放的音频的URL |
- 谷歌浏览器已经将音频和视频自动播放都禁止了
参考代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><audio src="media/music.mp3" autoplay="autoplay" controls="controls"></audio>
</body></html>
结果展示：
1.2.3 多媒体标签总结
- 音频标签和视频标签使用方式基本一致
- 浏览器支持情况不同
- 谷歌浏览器把音频和视频自动播放禁止了
- 可以给视频标签添加muted属性来静音播放视频，音频不可以（要用js解决）
- 视频标签是重点，我们经常设置自动播放，不使用controls控件、循环和设置大小属性
1.3 HTML新增的input标签
| 属性值 | 说明 |
|---|---|
| type=“email” | 输入必须为Email类型 |
| type=“url” | 输入必须为URL类型 |
| type=“date” | 输入必须为日期类型 |
| type=“time” | 输入必须为时间类型 |
| type=“month” | 输入必须为月类型 |
| type=“week” | 输入必须为周类型 |
| type=“number”（重点） | 输入必须为数字类型 |
| type=“tel” （重点） | 输入必须为手机号码类型 |
| type=“search” （重点） | 输入必须为搜索框类型 |
| type=“color” | 生成一个颜色，选择表单 |
参考代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><!-- 我们验证的时候必须添加form表单域 --><form action=""></form><ul><li>邮箱：<input type="email"></li><li>网址：<input type="url"></li><li>日期：<input type="date"></li><li>时间：<input type="time"></li><li>数量：<input type="number"></li><li>手机号码：<input type="tel"></li><li>搜索：<input type="search"></li><li>颜色：<input type="color"></li><!-- 当我们点击提交按钮就可以验证输入的内容是否正确 --><li><input type="submit" value="提交"></li></ul>
</body></html>
结果展示：
1.4 HTML5新增的表单属性
| 属性 | 值 | 说明 |
|---|---|---|
| required | required | 表单拥有该属性表示内容不能为空，必填 |
| placeholder（重点） | 提示文本 | 表单的提示信息，存在默认值将不显示 |
| autofocus | autofocus | 自动聚焦属性，加载完成中，自动聚集表单 |
| autocomplete | off/on | 当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项 |
| multiple（重点） | multiple | 可以多选文件提交 |
可以通过以下方式设置修改placeholder里面的字体颜色：
input::placeholder{color:pink};
参考代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>input::placeholder {color: pink;}</style>
</head><body><form action=""><input type="search" name="sear" id="" required="required" placeholder="pink老师" autofocus="autofocus"autocomplete="off"><input type="file" name="" id="" multiple="multiple"><input type="submit" value="提交"></form>
</body></html>
结果展示：
2. CSS3新特性
2.1 CSS3现状-----CSS新增选择器
新增属性选择器、结构伪类选择器、伪元素选择器
2.2 属性选择器
可以根据元素特定属性来选择元素。这样可以不用借助于类/id选择器。
注：类选择器、属性选择器、伪类选择器权重为10
| 选择符 | 简介 |
|---|---|
| E[att] | 选择具有att属性的E元素 |
| E[att=“val”] | 选择具有att属性且属性值=val的E元素 |
| E[att^=“val”] | 选择具有att属性且属性值以val开头的E元素 |
| E[att$=“val”] | 选择具有att属性且属性值以val结尾的E元素 |
| E[att*=“val”] | 选择具有att属性且属性值含有val的E元素 |
参考代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 必须是input同时具有value属性 *//* input[value] {color: pink;} *//* 只选择type=text文本框的input选取出来 */input[type=text] {color: pink;}/* 选择首先是div 然后具有class属性 并且属性值 必须是icon开头的这些元素 */div[class^=icon] {color: red;}section[class$=data] {color: blue;}/* div,section[class*=icon] {color: blueviolet;} */div.icon1 {color: skyblue;}/* 就近所以执行它 */</style>
</head><body><!-- 1.利用属性选择器可以不用借助于类或id选择器 --><input type="text" value="请输入用户名"><input type="text"><!-- 2.属性选择器还可以选择属性=值的某些元素,重点 --><input type="text"><input type="password" name="" id=""><!-- 3.属性选择器可以选择属性值开头的某些元素 --><div class="icon1">小图标1</div><div class="icon2">小图标2</div><div class="icon3">小图标3</div><div class="icon4">小图标4</div><div>我是打酱油的</div><!-- 4.属性选择器可以选择属性值结尾的某些元素 --><section class="icon1-data">我是安其拉</section><section class="icon2-data">我是哥斯拉</section><section class="icon3-ico">那我是谁？</section><!-- 5.属性选择器可以选择有相同属性值的某些元素 已实现 --></body></html>
可以去掉注释那段代码看一下效果。
结果展示：
2.3 结构伪类选择器----->选择父级里的第n个孩子
结构伪类选择器主要根据文档结构来选择其元素，常用于更具父级选择器里的子元素
| 选择符 | 简介 |
|---|---|
| E:first-child | 匹配父元素中第一个子元素E |
| E:last-child | 匹配父元素中最后一个子元素E |
| E:nth-child(n) | 匹配父元素中第n个子元素E |
| E:first-of-type | 指定类型的第一个子元素E |
| E:last-of-type | 指定类型的最后一个子元素E |
| E:nth-of-type(n) | 指定类型的第n个子元素E |
参考代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/*1.选择ul里面的第一个孩子*/ul li:first-child {background-color: pink;}/*2.选择ul里面的最后一个孩子*/ul li:last-child {background-color: pink;}/*3.选择ul里面的第2个孩子*/ul li:nth-child(2) {background-color: blue;}</style>
</head><body><ul><li>我是第1个孩子</li><li>我是第2个孩子</li><li>我是第3个孩子</li><li>我是第4个孩子</li><li>我是第5个孩子</li><li>我是第6个孩子</li><li>我是第7个孩子</li><li>我是第8个孩子</li></ul>
</body></html>
结果展示：
nth-child(n)选择某个父元素的一个或多个特定子元素
- n可以是数字、关键字和公式
- n如果是数字，就是选择第n个子元素，里面数字从1开始
- n可以是关键字：even偶数、odd奇数
- n可以是公式：常见公式如下（如果n是公式，则从0开始计算，但是第0个元素或者朝鲜糊了元素的个数会被忽略）
| 公式 | 取值 |
|---|---|
| 2n | 偶数 |
| 2n+1 | 奇数 |
| 5n | 5 10 15 |
| n+5 | 从第5个开始（包含第5个）到最后 |
| -n+5 | 前5个（包含第5个） |
参考代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/*1.选择所有偶数孩子*//* ul li:nth-child(even) {background-color: #ccc;} *//*2.选择所有奇数孩子*//* ul li:nth-child(odd) {background-color: gray;} *//*3.nth-child(n) 从0开始 每次加1 往后面计算 这里必须是n 不能是其他字母 选择了所有孩子*//* ol li:nth-child(n) {background-color: pink;} *//*4.nth-child(2n) 选择了所有的偶数孩子，等价于even*//* ol li:nth-child(2n) {background-color: pink;} *//*5.nth-child(2n+1) 选择了所有的奇数孩子，等价于odd*//* ol li:nth-child(2n+1) {background-color: skyblue;} *//*6.nth-child(n+5) 第五个开始往后*//* ol li:nth-child(n+5) {background-color: pink;} *//*6.nth-child(-n+5) 前五个*/ol li:nth-child(-n+5) {background-color: pink;}</style>
</head><body><ul><li>我是第1个孩子</li><li>我是第2个孩子</li><li>我是第3个孩子</li><li>我是第4个孩子</li><li>我是第5个孩子</li><li>我是第6个孩子</li><li>我是第7个孩子</li><li>我是第8个孩子</li></ul><ol><li>我是第1个孩子</li><li>我是第2个孩子</li><li>我是第3个孩子</li><li>我是第4个孩子</li><li>我是第5个孩子</li><li>我是第6个孩子</li><li>我是第7个孩子</li><li>我是第8个孩子</li></ol>
</body></html>
结果展示：这里展示的是第六个例子，前面的可以取消注释去观察效果
区别（nth-child，nth-of-type）:
- nth-child对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看是否和E匹配
- nth-of-type对元素里面指定子元素进行排序选择，先去匹配E，然后再根据E找第n个孩子
使用nth-of-type的例子：
参考代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* ul li:first-of-type {background-color: pink;}ul li:last-of-type {background-color: pink;}ul li:nth-of-type(even) {background-color: skyblue;} *//*nth-child 会把所有的盒子都排列序号*//*执行的时候首先看：nth-child(1) 之后回去看前面div*/section div:nth-child(1) {background-color: red;}/*nth-child 会把指定的盒子都排列序号*//*执行的时候首先看：div指定的元素 之后回去看：nth-of -type(1) 第几个孩子*//* section div:nth-of-type(1) {background-color: blue;} */</style>
</head><body><ul><li>我是第1个孩子</li><li>我是第2个孩子</li><li>我是第3个孩子</li><li>我是第4个孩子</li><li>我是第5个孩子</li><li>我是第6个孩子</li><li>我是第7个孩子</li><li>我是第8个孩子</li></ul><!--区别--><section><p>光头强</p><div>熊大</div><div>熊二</div></section>
</body></html>
结果展示：
注意下面的这段代码的结果：
section div:nth-child(1) {background-color: red;}
结果展示：
这段代码的结果是未匹配上，这是因为nth-child(1)会首先找到第一个标签所以找到了<p>，之后他会找<div>，但他找到的是<p>所以匹配不上。
2.4 伪元素选择器
伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构
| 选择符 | 简介 |
|---|---|
| ::before | 在元素内部前面插入内容 |
| ::after | 在元素内部后面插入内容 |
注意：
- before和after创建一个元素，但属于行内元素
- 新创建的这个元素在文档树中是找不到的，所以我们成为伪元素
- 语法： element::before{}
- before和after必须有content属性
- before在父元素内容的前面创建元素，after在父元素内容的后面插入元素
- 伪元素选择器和标签选择器一样，权重为1
参考代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 200px;height: 200px;background-color: pink;}div::before {content: '我';display: inline-block;width: 30px;height: 40px;background-color: purple;}div::after {content: '小猪佩奇';}</style>
</head><body><div>是</div>
</body></html>
结果展示：
2.4.1 伪元素选择器使用场景
（1）伪元素字体图标
（2）仿土豆效果
（3）伪元素清除浮动
2.4.1.1 伪元素字体图标
参考代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>@font-face {font-family: 'icomoon';src: url('fonts/icomoon.eot?3uezhy');src: url('fonts/icomoon.eot?3uezhy#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?3uezhy') format('truetype'),url('fonts/icomoon.woff?3uezhy') format('woff'),url('fonts/icomoon.svg?3uezhy#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;}div {position: relative;width: 200px;height: 35px;border: 1px solid red;}div::after {font-family: 'icomoon';/* content: ''; */content: '\ea43';position: absolute;top: 10px;right: 10px;color: red;font-size: 18px;}</style>
</head><body><div></div>
</body></html>
结果展示：
记得引入@font-face
2.4.1.2 仿土豆效果
参考代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.tudou {position: relative;width: 444px;height: 320px;background-color: pink;margin: 30px auto;}.tudou img {width: 100%;height: 100%;}.tudou::before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;display: none;}/*当鼠标经过土豆这个盒子，就让里面的before遮罩层显示出来了*/.tudou:hover::before {/*显示元素*/display: block;}</style>
</head><body><div class="tudou"><img src="images/tudou.jpg" alt=""></div><div class="tudou"><img src="images/tudou.jpg" alt=""></div><div class="tudou"><img src="images/tudou.jpg" alt=""></div><div class="tudou"><img src="images/tudou.jpg" alt=""></div><div class="tudou"><img src="images/tudou.jpg" alt=""></div>
</body></html>
结果展示：
2.5 CSS3盒子模型
CSS3可以通过box-sizing来指定盒模型，有两个值：即可指定为content-bx、border-box这样我们计算盒子大小的方式就放生了改变。
分为两种情况：
- box-sizing:content-box盒子大小为width+padding+border（以前默认的）
- box-sizing:border-box盒子大小为width
如果盒子模型我们改为了box-sizing:border-box；，那padding和border就不会撑大盒子了（前提是padding和border不会超过width宽度）
参考代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}div {width: 200px;height: 200px;background-color: pink;border: 20px solid red;padding: 15px;box-sizing: content-box;}p {width: 200px;height: 200px;background-color: pink;border: 20px solid red;padding: 15px;/* CSS3盒子模型 盒子最终大小就是width 200的大小 */box-sizing: border-box;}</style>
</head><body><div>小猪乔治</div><p>小猪佩奇</p>
</body></html>
结果展示：可以清晰的看出两种方式的差别
2.6 CSS3其他特性（了解）
- 图片模糊处理
CSS3滤镜filter:
filter CSS 属性将模糊或颜色偏移等图形效果应用于元素
filter:函数（）;
例如 filter:blur(5px); blur模糊处理，数值越大越模糊
参考代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>img {filter: blur(5px);}img:hover {filter: blur(0);}</style>
</head><body><img src="images/pink.jpg" alt="">
</body></html>
结果展示：
上述代码会在鼠标滑过图片时变清晰。
- 计算盒子宽度calc函数
calc()可以让你声明CSS属性值时执行一些计算
width:calc(100%-80px);
括号里面可以使用’+、-、*、/‘来进行计算
参考代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.father {width: 300px;height: 200px;background-color: pink;}.son {/* width: 150px; */width: calc(100% - 30px);height: 30px;background-color: skyblue;}</style>
</head><body><!-- 1.需求我们的子盒子宽度永远比父盒子小30像素 --><div class="father"><div class="son"></div></div>
</body></html>
结果展示：
2.7 CSS过渡（重点）
transition：要过渡的属性 花费时间 运动曲线 何时开始；
- 属性：想要变化的CSS属性，宽度高度、背景颜色、内外边距都可以。如果想要所有的属性都变化过渡，写一个all就可以
- 花费时间：单位是s(必须写单位)
- 运动曲线：默认为ease（可以省略）
- 何时开始：单位是s可以设置延迟触发时间，默认为0s(可省)
过渡口诀：谁做过渡给谁加
参考代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 200px;height: 100px;background-color: pink;/*transition:要过渡的属性 花费时间 运动曲线 何时开始,写多个属性用逗号/all*/transition: width .5s, height .5s;/*谁做过渡给谁加*//* transition: all .5s; */}div:hover {width: 400px;height: 200px;}</style>
</head><body><div></div>
</body></html>
结果展示：
上述代码会把图一变成图二，过渡效果实现成功。
进度条案例：（1）进度条如何布局（2）过渡的使用
参考代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.bar {width: 150px;height: 15px;border: 1px solid red;border-radius: 7px;padding: 1px;}.bar_in {width: 50%;height: 100%;background-color: red;transition: all .7s;border-radius: 7px;}.bar:hover .bar_in {width: 100%;}</style>
</head><body><div class="bar"><div class="bar_in"></div></div>
</body></html>
结果展示：
上述代码会把图一变成图二，过渡效果实现成功。
小知识点：狭义的HTML5指结构标签本身 狭义的CSS就是相关样式
广义的H5就是 H5本身+CSS+JS
—————————————————————————————————————————
HTML和CSS3提高的内容知识点已讲解完毕，下面即将更新品优购项目代码，有什么问题都可以在评论区进行讨论哦！