The article contains the additional knowledge of Html5 and Css3…
HTML5新特性
新增语义化标签
section相当于一个大的div
新增多媒体标签
为了照顾兼容性，可以这么写：
他会从上到下找mp4的再找ogg的，都找不到返回下面的文字
由于不同浏览器controls播放控件长的不一样，因此这个一般不写，一般用js去控制
谷歌通过js去控制音频播放
总结
新增input
新增表单属性
Multiple通常和input中的file一起用
Css3新特性
新增选择器
属性选择器
结构伪类选择器
逻辑更清晰的话应该这么写：
Nth-child(n)非常重要
注意：（）里面这能写n，不能写其他字母不然会失效
Nth-of-type(n)
Nth-of-type和nth-child的区别
Nth-child会先看nth -child之后再看前面的标签名，像上面的情况就是首先nth-child会选出p标签，因为它是第一个孩子，之后再看需要选出div但是没有div，所以不会有任何效果
之后我们使用nth-of-type，查找顺序是先找到div，之后找div的第一个孩子
结论
伪元素选择器（重要）
应用场景（本质上是装饰的元素）：
在css2中是单冒号，尽量写双冒号
Before和after是作为父盒子的孩子，放到父盒子里面的前面和后面
案例
1、
2、
Content必须写，如果没有就写‘’
将原先的空div删去：
3、
注意：为什么这里是display：table，因为如果是block的话那after就会到before的下一行显示了，为了让他们两个在同一行显示，我们用table
Css3 2D转换
二维坐标系
移动translate
参数也可以是%，若是50%，则移动自身宽度 * 50%
之前我们想要内部盒子居中的做法是position之后再减掉宽和高，这里有个问题就是如果父级的宽度变一变那么将重新计算减去的量，但是使用translate之后就不用计算了（定位配合translate）：
需要注意的是translate对行内标签不起作用
如果我们需要X、Y同时移动可以这么写：
优点
比起margin或者定位脱标，2d转换移动不会影响其他盒子
旋转rotate
案例
由于position：absolute已经脱标，因此不需要写display：block这句代码
设置转换中心点
案例
最后我们想让这个粉色的块在外面的时候消失，可以使用overflow：hidden
缩放scale
修改scale中心点
还是通过修改transform-origin
Scale和直接修改width和height的区别
如果使用width和height进行缩放，不仅无法确定以哪个点为中心点而且会影响其他盒子
案例
1、
2、
2D转换综合写法以及顺序问题
注意点:translate一定是放在最前面的
总结
Css3动画
或者
动画常用属性
动画简写属性
注意：简写没有animation-play-state
案例
这里scale效果不好，还是用width和height，而我们把div中的所有开头为“pulse”的盒子都放在水平居中了，因此width和height的动画就不会向下跑了，而是向四周发散。
下面再做一个台湾的，注意，我们不需要重新再写一个了：
注意！由于这个写法涉及到层级覆盖，而父级就是写这两个属性的，因此我们重写的时候也需要写这两个，不然的话会优先执行top和left
速度曲线细节
Step（）
注意step（）也是属性值，写了step（）就不要再写上面的其他的属性了
这个step（）是一格一格来走的，类似逐帧
案例
这里讲一下为什么不用gif做，首先gif颜色限制，不好看，其次gif无法设置播放快慢。
Css3 3D
三维坐标系
3D转换
Translate3d
透视perspective
在上面那个案例的基础上给被观察盒子的父级加透视代码：
这个透视的数值就是眼睛距离屏幕的那个数值，透视值越大距离越远图形越小。
TranslateZ
3D旋转 rotate3d
左手准则
3D呈现transform-style（重要）
因为一会儿box也要旋转，所以就给body加perspective了，body对于div来讲其实也是父级
案例
1、
2、
由于它是沿着x轴旋转，如果把紫色盒子沿z轴负向移进去的话到时候转的时候就会出现偏差，但是如果将粉色盒子沿z轴正向向外移的话就可以结局这个问题：
综合案例
由于该案例是旋转的效果，因此这里的transform写法是对的，可以先旋转后移动
Css3盒子模型
原先的盒子加上padding和border之后势必会让盒子变大
我们发现设置为box-sizing：border-box之后padding和border不再影响盒子大小
那么以后就可以在开头写以下代码：
Css3其他特性
滤镜filter
Calc函数
Css3过渡
让两个属性变化：
让所有属性变化：
案例
1、
2、
利用过度转换图片
浏览器私有前缀
侠义HTML5和CSS3
广义HTML5
Web服务器
总结
