一.HTML5的新特性
HTML5的新增特性主要是针对以前的不足，增加了一些新的标签、新的表单和新的表单属性等。这些新特性都有兼容性问题，基本是IE9+以上的版本浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。
二.HTML5新增语义化标签
<header>头部标签
<nav>导航标签
<article>内容标签
<aside>侧边栏标签
<section>定义文档某个区域
<footer>尾部标签
三.HTML5新增的多媒体标签
视频标签<video>
当前<video>元素支持三种视频格式，尽量使用mp4格式
<video src="" autoplay="autoplay" muted="muted" poster="" loop="loop"></video>
音频<audio>
当前<audio>元素支持MP3、Wave、Ogg三种音频格式。
<audio src="" auyoplay="autoplay" controls="controls" loop="loop"></audio>
注意：谷歌浏览器把音频和视频自动播放禁止了。
四.HTML5新增的input类型
注意：type="url"是限制用户必须输入网址。
五.HTML5新增的表单属性
六.CSS3新增选择器
6.1.属性选择器
属性选择器可以根据元素特定属性的来选择元素，这样就可以不用借助于类或者id选择器。
注意：类选择器、属性选择器、伪类选择器，权重为10
6.2.结构伪类选择器
结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素。
注意：
nth-child(n)是将所有的的孩子排序，然后看第n个孩子属性是不是与E匹配
nth-of-type(n)是先找到与E匹配的属性。然后将匹配的属性开始排序，
nth-child(n)中n可以是数字，关键字和公式。
n如果是关键字：even偶数，odd奇数。
n如果是公式：
6.3.伪元素选择器
伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。
注意：before和after必须要有content属性，伪元素选择器属于行内元素，权重为1。
七.CSS3盒子模型
CSS3中可以通过box-sizing来指定盒模型，有两个值：即可指定content-box、border-box，这样我们计算盒子大小的方式就发生了改变。
可以分成两种情况：
1.box-sizing:content-box 盒子大小为width+padding+border
2.box-sizing:border-box盒子大小为width
如果盒子模型我们改变了box-sizing:border-box,那padding和border就不会撑大盒子了(前提padding和border不会超过width宽度)
八.CSS3滤镜
滤镜filter属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。
filter: blur(10px);
注意：blur是一个函数，进行模糊处理，数值越大越模糊。
九.calc函数
calc()此css函数让你在声明css属性值时执行一些计算。
width: calc(100%-80px);
括号里面可以使用加减乘除来进行计算。
十.CSS3过渡效果
过渡是CSS3中具有颠覆性的特征之一，我们可以在不使用Flash动画或JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
过渡动画：是从一个状态渐渐地过渡到另一个状态，可以让我们的页面更好看和动感。
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
属性：想要变化的css属性，宽度高度 背景颜色 内外边距都可以，如果想要所有的属性都变化过渡，写一个all就可以。
花费时间：单位是秒
运动曲线：默认是ease(逐渐慢下来)、linear(匀速)、ease-in(加速)、ease-out(减速)、ease-in-out(先加速后减速)
何时开始：单位是秒。可以设置延迟触发时间，默认是0s
注意：谁做过渡给谁加
十一. 2D转换
2D转换(transform)是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果，
11.1. 二维坐标系
11.2. 移动translate
2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位
<!-- x就是x轴上移动位置，y就是y轴上移动位置 -->
transform: translate(x,y);
<!-- 如果只移动x坐标 -->
transform: translateX(100px);
<!-- 如果只移动y坐标 -->
transform: translateY(100px);
<!-- translate里面的参数是可以用%,移动的距离是盒子自身的宽度或者高度来对比 -->
transform: translateX(50%);
定义2D转换中的移动，沿着X和Y轴移动元素，translate最大的优点就是不会影响其他元素的位置，translate中的百分比单位是相对于自身元素的translate:(50%,50%);
translate对行内标签没有效果
11.3. 2D转换之旋转rotate
2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。
<!-- rotate里面跟度数，单位是deg -->
transform: rotate(45deg);
rotate里面跟度数，单位是deg，角度为正时，顺时针，负时，为逆时针，默认旋转的中心点是元素的中心点。
11.4. 2D转换中心点transform-origin
设置元素转换的中心点。
transform-origin: x y;
/* 可以跟方位名词 */
transform-origin: left bottom;
/* 可以是像素 */
transform-origin: 30px 30px;
注意后面的参数x和y用空格隔开，x和y默认转换的中心点是元素的中心点(50% 50%),我们还可以给x和y设置像素或者方位名词
11.5. 2D转换之缩放scale
元素添加scale这个属性就能控制它放大放小
transform: scale(x,y);
/* 修改了高度与宽度皆放大两倍 */
transform: scale(2,2);
/* 简写 */
transform: scale(2);
/* 修改了高度与宽度皆缩小为原来的0.5倍 */
transform: scale(0.5,0.5);
scale优势之处不会影响其它盒子，而且可以设置缩放的中心点。
11.6. 2D转换综合写法
/* 同时有位移和其它属性，我们需要把位移放到最前面 */
transform: translate(50px, 60px) rotate(45deg) scale(2);
十二. 动画
动画(animation)是css3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用作实现复杂的动画效果。相较于过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。
12.1. 动画的基本使用
a.先定义动画
b.再使用动画
12.2. 用Keyframes定义动画
用Keyframes定义动画类似于定义选择器。
/* move为自定义的动画名称 */
@keyframes move {
/* 开始状态 */
0% {
transform: translateX(0px);
}
/* 结束状态 */
100% {
transform: translateX(10000px);
}
}
from和to等价于0%和100%
12.3. 元素使用动画
/* 调用动画 */
animation-name: move;
/* 持续时间 */
animation-duration: 2s;
12.4. 动画序列
动画是使元素从一种样式逐渐变化为另一种样式的效果，可以改变任意多的样式和任意多的次数。
@keyframes move {
/* 开始状态 */
0% {
transform: translateX(0px);
}
/* 中间状态 */
50% {
transform: rotate(180deg);
transform: translateY(100px);
}
/* 结束状态 */
100% {
transform: translateX(10000px);
}
}
12.5.动画常用属性
@keyframes xuanzhuan {
/* 开始状态 */
0% {
transform: scale(1.5);
}
50% {
transform: rotate(180deg);
}
/* 结束状态 */
100% {
border: 5px solid black;
transform: rotate(360deg);
}
}
img {
display: block;
width: 200px;
height: 200px;
margin: 200px auto;
border-radius: 50%;
border: 2px solid purple;
animation-name: xuanzhuan;
/* 动画持续时间 */
animation-duration: 5s;
/* 动画速度曲线，默认是ease */
animation-timing-function: linear;
/* 动画何时开始,默认是0s */
animation-delay: 1s;
/* 动画播放次数，默认是1，infinite为无限循环 */
/* animation-iteration-count: infinite; */
/* 是否反方向播放，默认是normal,alternat为逆播放*/
/* animation-direction: alternate; */
/* 动画结束后状态，默认是backwards回到起始状态，forwards为停留在结束状态 */
animation-fill-mode: backwards;
}
img:hover {
/* 鼠标经过图片，让这个图片停止动画paused，鼠标离开继续动画running */
animation-play-state: paused;
}
12.6. 动画简写属性
animation: 动画名称 持续时间 速度曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;
12.7. 速度曲线
steps()就是分几步来完成动画
/* 分十步完成动画 */
animation-timing-function:steps(10);
十三. 3D转换
3D转换是指在三维空间中对物体进行旋转、平移、缩放等操作，从而改变物体在屏幕上的显示方式。常见的3D转换包括平移、旋转、缩放等操作。这些转换可以帮助我们在三维空间中实现不同的视觉效果和动画效果。
13.1. 三维坐标系
13.2. 3D移动translate3d
3D移动在2D移动的基础上多加了一个可以移动的方向，就是Z轴方向。
/* 沿着Z轴移动 */
transform: translateZ(100px);
/* 3D移动有简写的方法 transform: translate3D(x,y,z)*/
/* xyz不能省略，如果没有就写0 */
transform: translate3D(100px,100px,100px);
13.3. 透视perspective
在2D平面产生近大远小视觉立体，但是效果为二维，如果想要在网页中产生3D效果，则需要透视，透视也叫视距，也就是眼睛到屏幕的距离。透视单位为像素。透视写在被观察元素的父盒子上面。
body {
/* 近大远小，也就是视距越大，成像越小 */
perspective: 500px;
}
div {
width: 200px;
height: 200px;
background-color: purple;
transform: translate3D(100px,100px,100px);
}
十四. 浏览器私有前缀
浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无需添加。
1.私有前缀
-moz-:代表firefox浏览器私有属性
-ms-：代表IE浏览器私有属性
-webkit-：代表safari、chrome私有属性
-o-：代表Opera私有属性
