HTML+CSS3

HTML新增元素

header  头部标签
nav  导航栏
section 块
article  文章，内容
aside 侧边栏
footer  底部标签

(IE9 中需要将这些元素转换为块元素display:block;)

音频 和 视频

sourse资源
controls 设置或返回音频/视频是否显示控件（比如播放/暂停等）。
loop 设置或返回音频/视频是否应在结束时重新播放。
muted 设置或返回音频/视频是否静音
autoplay 是否在加载完成后随即播放音频/视频(自动播放)

表单新增属性：

required=“required” 不能为空
placeholder="" 占位符、提示文本
autofocus=“autofocus” 自动获取光标
autocomplete=“off/on” 提示输入过得内容（条件：name属性，成功提交）
multiple 上传多个文件
新增表单

属性选择器

E[att]
E[att=“val”]
E[att^=“val”] 属性att的值以"val"开头的元素 div[id^=“nav”] { background:#ff0; }
E[att$=“val”] 属性att的值以"val"结尾的元素
E[att*=“val”] 属性att的值包含"val"字符串的元素

结构伪类选择器

（1） ul li:first-child() 第一个
ul li:last-child() 最后一个
ul li:nth-child(8) 第八个
ul li:nth-child(even) 偶数个
ul li:nth-child(odd) 奇数个

（2） ul li:first-of-type()
ul li:last-of-type()
ul li:nth-of-type()
（同一类型，指定类型的元素）
伪类选择器
::after
::before

2D转换transform

（1）translate()
根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n) 定义 2D 转换，沿着 X 轴移动元素。
translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。
（2）rotate()
在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
rotate(angle) 定义 2D 旋转，在参数中规定角度。
（3）scale()
该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：
scale（2,3）转变宽度为原来的大小的2倍，和其原始大小3倍的高度。
scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n) 定义 2D 缩放转换，改变元素的宽度。
scaleY(n) 定义 2D 缩放转换，改变元素的高度。
实际应用：定位+transform：translate(50%,50%); 实现居中
transform对于行内元素无效
旋转中心：transform-orgin：left bottom；
缩略写法：transform：translate() rotate() scale();
移动同其他属性值一起写的时候，translate()最好写在最前面

3D转换transform

translate3d(x,y,z) 定义 3D 转化。
translateX(x) 定义 3D 转化，仅使用用于 X 轴的值。
translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y) 定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z) 定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿 X 轴的 3D 旋转。
rotateY(angle) 定义沿 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿 Z 轴的 3D 旋转。

注：perspective:400px;   透视
	transform-style：preserve-3d; 开启3D立体空间

动画：animation

animation: name duration timing-function delay iteration-count direction fill-mode;

name：@keyframes 动画的名称。
	duration：动画完成一个周期所花费的秒或毫秒
	timing-function：动画的速度曲线
		--linear	动画从头到尾的速度是相同的。	
		--ease	默认。动画以低速开始，然后加快，在结束前变慢。
		--ease-in	动画以低速开始。
		--ease-out	动画以低速结束。
		--ease-in-out	动画以低速开始和结束。
	delay ：动画何时开始
	iteration-count：动画被播放的次数（infinite  无限次）
	direction：动画是否在下一周期逆向地播放
		--reverse	动画反向播放。
		--alternate	动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放
		--alternate-reverse	动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。
	fill-mode：动画是否正在运行或暂停
		--paused	指定暂停动画
		--running	指定正在运行的动画