html5新特性

1.什么事HTML5

1.1 HTML5简介

万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(html)的第五次重大修改，作为新HTML语言，具有新的元素，属性和行为

1.2 广义的html5

1.广义的html5是html5本身+css3+javaScript
2.这个结合有时称为HTML5和朋友，通常缩写为Html5
3.虽然HTML5的一些特性仍然不被某些浏览器支持，但是它是一种发展趋势

2.H5新增语义化标签

新增语义化标签
<header> ：头标签
<nav> : 导航标签
<article> : 内容标签
<section> : 块级标签
<aside> : 侧边栏标签
<footer>: 尾部标签
​
注意：
1.这种语义化标准主要针对搜索引擎的
2.这些新标签页面职工可以使用多次的
3.在IE9中，需要把这些元素转化为块级元素
4.其实，我们移动端更喜欢使用这些标签
5.HTML5还增加了很多其他标签，我们后面再慢慢学

3.h5新增多媒体标签

多媒体标签包含两个，具体如下：
音频:<audio>
视频:<video>
使用它们可以很方便的在页面中嵌入音频和视频，而不再去使用落后的flash和其他浏览器插件。

3.1 audio 音频标签

HTML5 在不使用插件的情况喜爱也可以原生的支持音频格式文件的播放，当然支持格式是有限的。

1.音频格式

当前，<audio>元素支持三种音频格式：

3.audio音频标签常见属性

3.2 video视频标签

2.video 视频标签常见属性

总结
1.音频标签和视频标签使用基本一致
2.浏览器支持情况不同
3.谷歌浏览器把音频和视频自动播放禁止了
4.我们可以给视频标签添加muted属性可以自定播放视频，音频不可以
5.视频标签是重点，我们经常设置自动播放，不使用controls控件，循环和设置大小属性

2.Css 选择器

2.1属性选择器

类选择器、属性选择器、伪类选择器，权重为10

2.2 结构伪类选择器

结构选择器也就是选择相同元素的不同位置元素，在这里区分的。这一点还是很好的

总结： :nth-child(n) 选择父元素里面的 第 n个孩子，他不管里面孩子是否同一种类型
of-type 选择指定类型的元素

4.2D转换

转换(transform)是CSS3中具体颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果。
转换(transfrom)你可以简单理解为变形

4.1 二维坐标系

2D转换是改变标签在二维平面上的位置和形状的一种技术，先来学习二维坐标系

4.2 2D转换之移动 translate

2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。
1.语法
	transform : translate(x,y);或者分开写
	transform : translateX(n;
	transform : translateY(n);

2.重点
	1. 定义2D转换中的移动，沿着X和Y轴移动元素
	2.translate最大的优点：不会影响到其他元素的位置
	3.translate中的百分比单位是相对于自身元素的translate:(50%，50%)；
	4.对行内标签没有效果

4.3 2D 转换之旋转 rotate

2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。
1.语法
	transform:rotate（度数）
2.重点
	1.rotate里面跟着度数，单位是deg比如rotate（45deg）
	2.角度为正时，顺时针，负时，为逆时针。
	3.默认旋转的中心点是元素的中心点

4.42 D 转换中心点 transform-origin

我们可以设置元素转换的中心点
1.语法
	transform-origin: x y;

2. 重点
	1. 注意后面的参数x和y用空格隔开
	2.x y默认转换的中心点事元素的中心点(50% 50%)
	3.还可以给x y设置 像素 或者 方位名词 (top tottom left right center)

4.5 2D转化之缩放scale

缩放，顾明思义，可以放大和缩小。只要啊添加上了这个属性就能控制它放大还是缩小。

1.语法 
	transform:scale(x,y);
2.注意
	1.注意其中的x和y用逗号分隔
	2.transform:scale(1,1)：宽和高都放大一倍，相对于没有放大
	3.transform:scale(2,2)：宽和高都放大了2倍
	4.transform:scale(2)：只写一个参数，第二个参数则和第一个参数一样，相当于 scale（2,2）
	5.transform:scale(0.5,0.5)：缩小
	6.sacle 缩放最大的优势 ：可也设置旋转中心点缩放，默认以中心点缩放的，而且不影响其他盒子。

4.6 2D转换综合写法

注意：
	1.同时使用多个转换，其格式为：transform:translate() rotate() scale()...等，
	2.其顺序会影转换的效果。（先旋转会改变坐标轴方向）、
	3.当我们同时有位移和其他属性的时候，记得要将位移放到最前

4.7 2D 转换总结

1.转换transform 我们简单理解就是变形2D 和 3D 之分
2.我们暂且学了三个分别是 位移 旋转 和 缩放
3.2D 移动 translate(x,y) 最大的优势是不影响其他盒子，里面参数用%，是相对于自身宽度和高度来计算的
4.可以分开写比如translateX（x）和 translateY（y）
5.2D旋转rotate（度数）可以实现旋转元素 度数的单位是deg
6.2D 缩放sacle(x,y) 里面参数是数字不跟单位 可以是小数 最大的优势 不影响其他盒子
7. 设置转换中心点transfrom-origin : x y; 参数可以百分比、像素或者方位名词
8.当我们进行综合写法，同时有位移和其他属性的时候，记得要将位移放到最前

5 动画

动画(animation)是css3中具有颠覆性特性之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

5.1 动画的基本使用

制作动画分为两步：
	1.先定义动画
	2.在使用（调用）动画
1.用keyframes定义动画(类似定义类选择器)
@keyframe 动画名称{
	0%{
		width:100px;
	}
	100%{
		width:20px;
	}
}

1.0%是动画的开始，100%是动画的完成。这样的规则就是动画序列。
2.在@keyframes中规定某项css样式，就能创建由当前样式逐渐改变为新样式的动画效果。
3.动画是使用元素从一种样式逐渐化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
4.请用百分比来规定变化发生的时候，或用关键词"from"和“to”，等同于0%和100%.

2.元素使用动画

div{
	width : 200px;
	height: 200px;
	background-color:auqa;
	margin:100px auto;
	/*调用动画*/
	animation-name: 动画名称;
	/* 持续时间 */
	animation-duraion: 持续时间;
}

---

5.2 动画常用属性

5.3 动画简写属性

animation: 动画名称 持续时间运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;

总结：
1.简写属性里面不包括animation-play-state
2.暂停动画 ：animation-play-state : puased; 经常和鼠标经过其他配合使用
3.想要动画走回来，而不是直接跳回来：animation-direction : alternate
4.盒子动画结束后，停在结束位置 ：animation-fill-mode : forwards

5.4 速度曲线细节

animation-timing-function : 规定动画的速度曲线，默认是 “ease”

6.3D 转换

我们生活的环境是3D的照片就是3D物体在2D平面呈现的例子。
有什么特点
	1.近大远小
	2.物体后面遮挡不可见
当我们在网页上构建3D效果的时候参考这些特点就能产出3D效果。

6.1 三维坐标系

三维坐标其实就是指立体空间，立体空间是由3个轴共同组成的。

6.2 3D移动 translate3d

3D移动在2D移动的基础上加了一个可以移动的方向，就是z轴方向。

6.3 透视 perspective

在2D平面产生近大远小视觉立体，但是只是效果二维码
	1.如果想要在网页生产3D效果需要透视(理解成3D物体投影在2D平面内)。
	2.模拟人类的视觉位置，可认为安排一只眼睛去看
	3.透视我们也称为视距：视距就是人的眼睛到屏幕的距离
	4.距离视觉点越近的在电脑平面成像越大，越远成像越小
	5.透视的单位是像素

透视写在被观察元素的父盒子上面的
	1.就是视距，视距就是一个距离人的眼睛到屏幕的距离。
	2.就是z轴，物体距离屏幕的距离，z轴越大(正值)我们看到的物体就越大。

6.4 translateZ

6.5 3D 旋转 rotate3d

3D 旋转指可以在元素在三万平面沿着x轴，y轴，z轴或者自定义轴进行旋转。
语法
	1.transform:rotateX(45deg):沿着x轴正方向旋转45度
	2.transform:rotatey(45deg):沿着y轴正方向旋转45deg
	3.transform:rotateZ(45deg):沿着Z轴正反向旋转45deg
	4.transform:rotate(x,y,z,deg):沿着自定义轴旋转deg为角度(了解即可)

左手准则

1. 左手的手拇指指向x轴的正方向
2. 其余手指的弯曲方向就是改元素沿着x轴旋转的方向

左手准则

1. 左手的手拇指指向y轴的正方向
2. 其余手指的弯曲方向就是改元素沿着y轴旋转的方向 (正值)

transform:rotate(x,y,z,deg) : 沿着自定义轴旋转deg为角度(了解即可)
xyz是表示旋转轴的矢量，是表示你是是否希望沿着改轴旋转，最后一个表示旋转的角度。
	transform:rotate3d(1,0,0,45deg)就是沿着x轴旋转45deg
	transform:rotate3d(1,0,0,45deg)就是沿着对角线旋转45deg

6.6 3D 呈现 transfrom-style

1.控制子元素是否开启三维立体环境。
2.transform-style:flat 子元素不开启3d立体空间 默认
3.transform-style:preserve-3d;子元素开启立体空间
4.代码写给父级，但是影响的是子盒子
5.这个属性很重要，后面必用

7 浏览器私有前缀

浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加。

1.私有前缀

1. -moz- ： 代表firefox浏览器私有属性
2. -ms- : 代表ie 浏览器私有属性
3. -webkit- : 代表safari、chrome私有属性
4,。 -o- ：代表Opera 私有属性

2.提倡的写法

-moz-border-radius : 10px;
-webkit-border-radius : 10px;
-o-border-radius : 10px;
border-radius : 10px;