H5C3提高（1）
div对搜索引擎来说没有语义。
H5新增标签
语义化标签
导航标签
内容标签
定义文档某个区域
侧边栏标签
尾部标签
可以多次使用，建议在移动端使用
视频标签
格式：
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 自动播放（谷歌需要加muted解决） |
| controls | controls | 向用户显示播放控件 |
| width | px | 播放器宽 |
| height | px | 播放器高 |
| loop | loop | 播放完是否继续，循环播放 |
| poster | imgurl | 加载时出现的图片 |
| muted | muted | 静音播放 |
| src | url | 视频地址 |
| preload | auto（预先加载） none (不加载) |
规定是否预先加载视频 |
音频标签
尽量使用MP3
input表单
| 属性值 | 说明 |
|---|---|
| type=“email” | 限制用户必须输入email类型 |
| type=“url” | 限制用户必须输入URL类型 |
| type=“date” | 限制用户必须输入日类型 |
| type=“time” | 限制用户必须输入时间类型 |
| type=“month” | 限制用户必须输入月类型 |
| type=“week” | 限制用户必须输入周类型 |
| type=“number” | 限制用户必须输入数字类型 |
| type=“tel” | 手机号 |
| type=“search” | 搜索框 |
| type=“color” | 生成一个颜色选择表单 |
注：验证时必须添加表单域
新增表单属性
| 属性 | 值 | 说明 |
|---|---|---|
| required | required | 表示必填 |
| placeholder | 提示文本 | 表单的提示信息，存在默认值将不显示 |
| autocomplete | off/on | 当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项 默认已经打开，关闭用off需要放在表单内，同时加上name属性，同时成功提交过 |
| multiple | multiple | 可以多选文件提交 |
| autofocus | autofocus | 自动聚焦属性，页面加载完成自动聚焦到指定表单 |
autofocus：自动聚焦
autocomplete：（必须有name属性）
multiple：不同于type：file；
可以多选文件
C3新增标签
新增选择器
属性选择器
可以根据元素特定属性来选择元素，这样就可以不用借助于类或id选择器
| 选择符 | 简介 |
|---|---|
| E[att] | 选择具有att属性的E元素 |
| E[att="x"] | 选择具有att属性且属性值等于x的E元素 |
| E[att^="x"] | 匹配具有att属性且属性值以x开头的E元素 |
| E[att$="x"] | 匹配具有att属性且属性值以x结尾的E元素 |
| E[att*="x"] | 匹配具有att属性且属性值含有x的E元素 |
结构伪类选择器
主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素
（要有空格）因为E为父元素，有空格相当于继承
| 选择符 | 简介 |
|---|---|
| E :fist-child | 匹配父元素中第一个子元素 |
| E :last-child | 匹配父元素中最后一个子元素 |
| E :nth-child(n) | 匹配父元素中第n个子元素 |
| E :first-of-type | 指定类型E的第一个 |
| E :last-of-type | 指定类型E的最后一个 |
| E :nth-of-type(n) | 指定类型E的第n个 |
E :nth-child(n)，n可以是数字也可以是公式，这样就可以进行隔行换色应用
加公式
只能是字母n,意味着选择了所有（n从0开始，n是个数，所以0被忽略）
还有其他公式：
| 公式 | 取值 |
|---|---|
| 2n | 偶数 |
| 2n+1 | 奇数 |
| 5n | 5、10、15.... |
| n+5 | 从5（包括5）开始到最后 |
| -n+5 | 前5个 |
nth-child(n)与nth-of-type(n)区别
nth-child对父类里面所有孩子排序选择，先找到第n个，再看是否符合（不符合就选不出来了）
nth-of-type对父类指定元素进行选择，先匹配E，再去找第几个。
伪元素选择器
伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，简化HTML元素
| 选择符 | 简介 |
|---|---|
| ::before | 在元素内部的前面插入内容 |
| ::after | 在元素内部的后面插入内容 |
before和after创建一个元素，但属于行内元素
新创建元素在文档树中找不到，成为伪元素
语法：element::before{}
before和after必须有content属性
和标签选择器一样，权重为1 所以div::before权重为 1+1=2
基本使用
会创建一个行内块元素盒子，放在父类内部，一个是放前面，一个放后面，但都是行内元素
不可直接设大小但可以通过加浮动加定位或display控制变大小；
解释伪元素如何清除浮动
.clearfix::after {
content:""; //必须写
display: block; //插入元素必须是块级
height:0;//不要看见该元素
clear:both;//清除浮动
visibility:hidden;//隐藏
}
C3盒子模型
以前用padding和border等会撑开盒子
1.box-sizing:content-box 盒子大小为width+padding+border（默认）
2.box-sizing:border-box 盒子大小为width
这样设置的大小不会随边框改变即不会撑大盒子了
可以初始化为
图片模糊处理
语法：filter： 函数（）
如filter：blur(5px); blur模糊处理 数值越大越模糊
计算盒子宽度
calc函数
calc（）在声明CSS属性时执行计算
width：calc（100%-80px）100%就可以和父亲一起变化了
C3过渡
过渡动画：从一个状态渐渐过渡到另一个状态
现在经常和 :hover一起搭配使用
格式：transition：要过渡的属性 花费的时间 运动曲线 何时开始；
属性：要变化的CSS属性，宽高等，如果所有属性都变化，写all
花费时间：要有单位
运动曲线默认ease；即速度图像（逐渐慢下来）
何时开始：单位秒，可以延迟触发时间，默认0s；
渐渐变长 ： 
如果写多个属性，用逗号隔开即可；
如果想过渡hover所有属性，直接用all即可
