HTML5、CSS3新增特性

HTML5新特性：IE9+以上版本的浏览器支持

//==============================================================
新增的语义化标签：
<header></header> :头部标签
<nav></nav>	:导航标签
<article></article> ：内容标签
<section></section> ：定义文档某个区域
<aside></aside>	：侧边栏标签
<footer></footer> ：尾部标签

注意：
1.语义化标签主要针对的是搜索引擎
2.可以重复使用
3.在IE9中默认不是块级元素，需要转换成块级元素
4.移动端兼容

//==============================================================
新增的多媒体标签：
1.音频标签： <audio></audio>
2.视频标签： <video controls>
				<source src="#" type="video/mp4">
				<source src="#" type="video/ogg">
				<source src="#" type="video/webm">
				<h1>你的浏览器不支持video标签</h1>
			</video>

audio标签支持3种格式音频：mp3(所有浏览器支持),wav,ogg
<audio src="#" autoplay="autopaly" controls="controls" loop="loop"></audio>
autoplay:自动播放(谷歌浏览器中禁用此功能)
controls:显示播放控件
loop:循环播放



video标签支持3种格式视频：MP4(所有浏览器支持),WebM，Ogg
<video src="#" autoplay="autoplay" muted="muted" controls="controls" loop="loop" poster="#"></video>属性：
autoplay:自动播放(谷歌浏览器中需要添加muted来解决自动播放)
muted:静音播放
controls:显示播放控件
loop:循环播放
poster:预先加载图片


//==============================================================
新增的表单类型：
type="email"
type="url"
type="date"
type="time"
type="month"
type="week"
type="number"
type="tel"
type="search"	//搜索框
type="color"  //生成颜色选择表单


新增的表单属性：
required：表单不能为空
placehoder：提示文本
autofocus：自动获取焦点
autocomplete:提示键入过的值，默认打开,如autocomplete="on",关闭autocomplete="off",需要在表单加上name属性，同时成功提交
multiple：可以提交多个文件


//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
CSS3新年特性：IE9+支持、移动端支持优于PC端
新增选择器：
1.属性选择器:权重0010
Ele[Att]：可以选中某个标签的属性
Ele[Att=值]：（重点）可以根据属性的值选择元素 
Ele[Att^=值]：标签中属性以“值”开头的元素
Ele[Att$=值]：标签中属性以“值”结尾的元素
Ele[Att*=值]：标签中属性只要有“值”的元素


2.结构伪类选择器：权重是0010
所有元素排序
Ele:first-child
Ele:last-child
Ele:nth-child(n) ：(重点) n可以是一个数字，关键字(odd,even)，公式

指定元素排序
Ele:first-of-type 
Ele:last-of-type 
Ele:nth-of-type(n)

3.伪元素选择器：权重是0001
Ele::before  ：在元素内部的前面插入内容
Ele::after  ：在元素内部的后面插入内容

注意：
通过伪元素选择器创建元素，是行内元素
通过伪元素选择器创建元素，在文档树中是找不到的，所有称伪元素

清除浮动的两种方式：
额外标签
单伪元素：
.clearfix::after {
	content:"";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}

双伪元素：
.clearfix::before, .clearfix::after {
	content:"";
	display:table;
}
.clearfix::after {
	clear:both;
}

//==============================================================

盒子模型：
box-sizing:content-box (默认)盒子大小为width+padding+border
box-sizing:border-box 盒子大小为：width


//==============================================================

滤镜filter:
filter:函数();  查看MDN文档

calc函数:是一个计算函数
width:calc(100%-30px);

//==============================================================

过渡(重点)：
多个属性变化可以逗号隔开
如果想要所有属性变化，att写成all
transition:att time speed delay; 

//==============================================================
2D转换transform：
1.移动translate：
	transform:translate(x,y);  // 移动x,y轴
可以单独移动：
	transform:translateX(n);  //只移动X轴
	transform:translateY(n);  //只移动Y轴
注意：
	translate不会影响到其他元素的位置，对行内标签没有效果

2.旋转rotate：
	transform:rotate(45deg);

转换中心点transform-origin:
	transform-origin:x y;  //方位名词(left,right,top,botton),默认为(50%,50%).

3.缩放scale:
	transform:scale(x,y); //等比例缩放，x,y>1放大，x,y<1缩小。
注意：
	scale缩放与修改width,height的优点在于scale缩放不影响其他元素，且可以修改缩放中心点 

2D转换综合写法：
	transfrom:translate() rotate() scale();//顺序会影响效果,一般把位移放到最前面。

//==============================================================

动画animation：
	两步走：1.定义动画，用@keyframes定义动画
			@keyframes 动画名称 {
				0%(等同于from) {
					初始状态；
				}
				... // 可以多个状态
				100%(等同于to) {
					结束状态
				}
			}
		   2.调用动画：
		   animation-name:动画名称;
		   animation-duration:时间;

animation-timing-function: ;  //规定动画运动曲线
animation-dalay: ;	//何时开始
animation-iteration-count: ;	//循环次数,默认是 1 ，infinite无限循环
animation-direction: ;	//是否逆向播放，默认normal, alternate逆向播放
animation-fill-mode: ;	//动画的结束状态，默认backwards 回到起始状态，forwards 停留在结束状态
animation-play-state: ;	//规定动画是否正在运行或暂停，默认是'running',paused暂停


动画综合写法：不包含animation-play-state: ;
	animation:动画名称 时间 运动曲线 何时开始 循环次数 逆向播放 结束状态；


//==============================================================
3D转换：

3D移动：
	transform:translateX(px);
	transform:translateY(px);
	transform:translateZ(px);
	transform:translate3d(x,y,z);

透视 perspective：px;  //需要写到父元素中


3D旋转：
	transform:rotateX(deg);
	transform:rotateY(deg);
	transform:rotateZ(deg);
	transform:rotate3d(x,y,z);
	
3D呈现：
//给父元素添加
transform-style:;	//控制子元素是否开启三维立体环境，默认值flat 不开启，preserve-3d 开启立体环境