html5css3
1.html5新增语义化标签
<header><nav><article><section><aside><footer>
2.新增多媒体标签
视频<video>格式：map4,webm,ogg
<video controls="controls" autoplay="autoplay" muted="muted" loop="loop"><source src="xxx.mp4" type="video/mp4"><source src="xxx.ogg" type="video/ogg">你的浏览器不支持video标签。
</video>| 属性 | 值 | 描述 |
| autoplay | autoplay | 自动播放（谷歌浏览器添加muted） |
| controls | controls | 展示播放控件 |
| width | px | 宽度 |
| height | px | 高度 |
| loop | loop | 循环播放 |
| preload | auto预先加载视频 none不预先加载视频 | 是否预先加载（如果自动播放忽略该属性） |
| src | url | 视频url地址 |
| poster | imgurl | 加载等待的画面图片 |
| muted | muted | 静音播放 |
音频<audio>格式：mp3,wav,ogg
<audio controls="controls" autoplay="autoplay" loop="loop"><source src="xxx.mp3" type="audio/mp3"><source src="xxx.ogg" type="audio/ogg">你的浏览器不支持audio 标签。
</audio >| 属性 | 值 | 描述 |
| autoplay | autoplay | 自动播放（谷歌浏览器添加muted） |
| controls | controls | 展示播放控件 |
| muted | muted | 静音播放 |
| preload | auto预先加载视频 none不预先加载视频 metadata | 是否预先加载 |
| loop | loop | 循环播放 |
| src | url | 视频url地址 |
总结：音频和视频标签的使用方式基本一致
浏览器支持情况不同
谷歌浏览器把音频视频自动播放禁止了
视频标签添加muted属性静音播放，音频不可以要通过js
3.html5新增input 标签
| 属性值 | 说明 |
| type="email" | 邮箱类型 |
| type="url" | url类型 |
| type="date" | 日期类型 |
| type="time" | 时间类型 |
| type="month" | 月类型 |
| type="week" | 周类型 |
| type="number" | 数字类型 |
| type="tel" | 手机号码 |
| type="search" | 搜索框 |
| type="color" | 颜色选择表单 |
| type="submit" value="提交" | 提交 |
验证的时候必须添加form表单域，点击提交按钮可以验证表单
4.html5新增表单属性
| 属性 | 值 | 说明 |
| required | required | 必填 |
| polaceholder | 提示文本 | 表单提示信息 |
| autofocus | autofocus | 自动聚焦 |
| autocomplete | off/on | 加上name属性，显示之前输入过的值，一般写off |
| multiple | multiple | 可以多选文件上传 |
5.css3新增选择器
属性选择器、结构伪类选择器权重为10、伪元素选择器权重为1
属性选择器
| 选择符 | 简介 |
| div[att] | 选择具有att属性的div元素 |
| div[att=val] | 选择具有att属性且属性值等于val的div元素 |
| div[att^=val] | 选择具有att属性且以val开头的div元素 |
| div[att$=val] | 选择具有att属性且以val结尾的div元素 |
| div[att*=val] | 选择具有att属性且值包含val的div元素 |
结构伪类选择器nth-child,nth-of-type
一般用于选择父级里面的第几个孩子
| 选择符 | 简介 |
| div:first-child | 匹配父元素中的第一个div元素 |
| div:last-child | 匹配父元素中的最后一个div元素 |
| div:nth-child(n) | 匹配父元素中的第n个div元素， even，odd，2n,2n+1,n+5,-n+5 |
| div:first-of-type | 指定类型的第一个 |
| div:last-of-type | 指定类型的最后一个 |
| div:nth-of-type(n) | 指定类型的第n个 |
区别：nth-child会对父元素里面的所有元素的盒子都排列序号
nth-of-type对父元素里面指定子元素的盒子排列序号
伪元素选择器::before,::after
利用css创建新标签元素，不需要html标签，简化html结构
| 选择符 | 简介 |
| ::before | 在元素内部的前面插入内容 |
| ::after | 在元素内部的后面插入内容 |
注意：
before和after创建的元素，属于行内元素
新创建的这个元素在文档树中是找不到的，所以叫伪元素
语法：e::before{}
before和after必须有content属性
伪元素选择器和标签选择器一样，权重为1
使用场景：字体图标，黑色半透明遮罩层效果，清除浮动
<style>@font-face{}div{position:relative;}div::after{content:'\e91e';font-family:'icomoon';position:absolute;top:10px;right:10px;}
</style><style>div{position:relative;}div::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.4) url(img/png) no-repeat center;display:none;}div:hover::before{display:block;}
</style><style>.clearfix::after{clear:both;display:block;content:'';}
</style>6.css3盒模型
box-sizing:border-box;不会撑大盒子
box-sizing:content-box;
7.css3filter滤镜
图片模糊处理filter:blur(5px);
8.计算盒子宽度calc函数
width:calc(100% - 80px)
9.新增属性过渡transition
transition:要过渡的属性 时间 运动曲线 何时开始；
谁做过渡给谁加，如果想要写多个属性，逗号隔开
<style>div{width:200px;height:30px;background-color:pink;/* transition: width .5s ease 0s,height.5s ease 0s; */transition: all .5s;}div:hover{width:400px;height:200px;}
</style>