一、html5新特性
1.增加了一个专门用于绘画的元素canvas
2.增加了用于媒体播放的音频和视频元素
３.增强了对本地离线存储更好的支持
４.新增了很多有语义的结构化标签
５.新增了很多input类型
二、新增的input类型
1.number，跟数值有关的，max和min 限制最大值和最小值
2.range,滑块，一般用来控制音量、亮度的调节。
3.email,邮箱，自带了验证功能，但是真正的验证，需要正则验证才是完善的,required表示必须进行输入
4.url网址输入框，也自带不完善的验证功能，并且与email一样可以设置required属性，保证必须填写
5.有关时间日期的
6.color,颜色选取
label标签，标签元素，显示文本的。但是在表单里面，可以起到关联其他表单元素的作用。增强用户体验的。通过内联属性for，填写外部关联元素设置的id，进行关联。
label做容器，关联的元素写在label内部。
三、结构化标签
header footer nav article section aside figure figuration
header 用来定义文档的头部
footer 用来定义文档的底部
nav 用来定义文档的导航部分
artical 用来定义文档中独立的内容部分
section 可以嵌套在artical中进行使用，表示区段，或者分段的小块
aside 侧边栏、
figure定义独立的数据流，比如图片、图像等
figuration 嵌套在figure中，起到标题的作用
除了figuration 之外，其余的都是ｂｌｏｃｋ块级， 只有figure有默认的margin，其余的没有
四、音频和视频
1.音频
src 音乐资源的路径
autoplay 自动播放
controls 控制面板
loop 循环播放
muted 初始静音
audio支持的音乐格式有mp3 ogg wav
选择不同的文件格式
source标签为ａｕｄｉｏ提供音乐资源，并且可以指定多种类型的音乐资源
2.视频
video标签支持的文件类型 mp4 ogg webm
width height 是设置播放界面大小的，通常情况下只会指定一方的值，然后等比缩放
poster,当视频链接出现问题，或者网络延迟加载慢时，显示的一张占位图片
你的浏览器太拉基了，不支持video标签
五、流式布局和响应式布局
1.viewport
viewport用来做移动端屏幕适配的
width=device-width获取移动端屏幕宽度
height=device-height获取移动端的屏幕高度
initial-scale=1.0 初始化缩放比例
maximum-scale=3.0 最大放大比例
minimum-scale=0.5 最小缩小比例
默认可以允许用户缩放，如果不允许缩放，可以设置user-scalable=no
如果用viewport用来做移动端屏幕适配,数据不要用死值，要使用百分比
2.流式布局
流式布局
尺寸百分比、定位百分比、em和rem、弹性图片
vw vh
百分比的参照物为父级
em的单位设置，参照父级字体大小，默认情况下１ｅｍ
rem的参照物为文档，html
ｅｍ和rem单位只针对字体
font-size:2rem;
3.响应式布局
响应式网站设计的原则，首先搞清楚，分多少个阶段，每个阶段的临界点在什么地方。每个阶段相同的样式不需要写在媒体查询里面，媒体查询里面每个阶段都不一样。
media 媒体查询，主要功能监测屏幕
@media only screen and (min-width:1000px) {
div{
background-color:red;
font-size:50px;
color:chartreuse;
}
}
@media only screen and (min-width:600px) and (max-width:1000px) {
div{
background-color:aqua;
font-size:20px;
color:tomato;
}
}
六、css3选择器
1.毗邻选择器
与div 同级（兄弟关系） 以下（上面的不行）紧挨着的p标签满足此样式
div+p{
width:200px;
}
2.大波浪选择器
div同级 以下 的同级 兄弟标签只要满足是p标签的都满足此样式
div~p{
width:200px;
}
3.子代选择器
big下一层离他最近的 子集 满足样式是div的满足此样式
#big>div{
width:200px;
}
ul>li:nth-child(1){
background-color: #008000;
}
ul>li:nth-child(2){
background-color: orangered;
}
ul>li:nth-child(3){
background-color:deepskyblue;
}
ul>li:nth-child(4){
background-color: blueviolet;
}
奇数，偶数，n就是所有的，2n偶数，n奇数,3n 3的倍数，2n-1表示奇数
计数是从第一个子元素开始的，往后依次累加，
ul li:nth-child(2n){
background-color: #FFA500;
}
ul li:nth-last-child(2n){
background-color: #FFA500;
}
div div:nth-child(2n){
color: #FFA500;
}
计数从类型是第一个div的类型开始计数,并且计数的类型是div ，不是div的元素不进行计数
div div:nth-of-type(2n){
color: chocolate;
}
4.属性选择器
a标签 设置了title属性 才满足此样式
a[title]{
border:1px solid orange;
}
属性值以ok开头满足此样式
a[title^=ok]{
font-size:40px;
}
属性值以1结尾满足此样式，但是数值要放在单引号或者双引号内部，这里的数字都是字符串，要加双引号，或者单引号
a[title$="1"]{
background-color:red;
}
属性值包含k满足此样式
a[title*=k]{
margin-right:20px;
}
5.伪类选择器
子元素的开头和结尾是伪类选择器的显示位置
#big:before{
display:block;
content:"我是一个块级元素";
width:450px;
height:100px;
background-color:aqua;
}
#big:after{
/*必须设置的两个属性*/
display:block;
content:"";
clear:both;
width:300px;
height:200px;
background-color:purple;
}
七、边框和边框图片
border：2px red solid;
border-width border-color border-style
单给border-style，可以出现3px黑色边框，并且边框颜色默认与字体颜色一样
border-style:solid;
边框圆角
border-radius: 50%;
两个值 左上右下 右上左下
border-radius: 100px 200px ;
三个值表示 左上 右上左下 右下
border-radius: 100px 200px 300px;
四个值 左上 右上 右下 左下
border-radius:50px 200px 50px 200px;
八、阴影
1.文本阴影text-shadow
h-shadow纵向偏移距离 正数向下负数向上
w-shadow横向偏移距离 正数向右负数向左
blur模糊程度，值远大越模糊
color阴影颜色
阴影不占空间
text-shadow:5px 10px 5px palevioletred;
2.容器阴影box-shadow
容器阴影 相对于文本阴影来说 多了一个数值属性 模糊距离
inset内阴影 默认为outset 但是如果手动设置outset将不会出现阴影
box-shadow:10px 40px 20px 10px chocolate;
九、css3盒模型
box-sizing有两个值一个是content-box，另一个是border-box。
当设置为box-sizing:content-box时，将采用标准模式解析计算，也是默认模式；
当设置为box-sizing:border-box时，将采用怪异模式解析计算；
兼容保证属性在不同的浏览器上可以显示，并且保证浏览器在同一浏览器的不同版本上正常显示
1.标准盒模型
在标准模式下的盒模型如下图所示，盒子总宽度/高度=width/height+padding+border+margin
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
2.怪异盒模型
怪异盒模型下 宽高包含了border content padding 的宽高
盒子的总宽度和高度是包含内边距padding和边框border宽度在内的，盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin;
box-sizing:border-box;
/*FireFox3.5+ 火狐*/
-moz-box-sizing:border-box;
/* Opera9.6(Presto内核) 欧鹏*/
-o-box-sizing:border-box;
/* Safari3.2+和谷歌*/
-webkit-box-sizing:border-box;
/* IE8*/
-ms-box-sizing:border-box;
/*IE9+,Chrome10.0+,Safari5.1+,Opera10.6*/
box-sizing:border-box;
十、线性渐变和径向渐变
1.线性渐变linear-gradient()
渐变的属性是替代背景图片的,想要出现渐变效果，至少要有两个颜色,只给定颜色值时，颜色会平分背景，均匀显示
background-image: linear-gradient(cyan,red,yellow,green,blue);
改变渐变的方向,固定的方向可以给定一个方向值，也可以给定复合方向值（空格隔开）
to left从右向左
background-image: linear-gradient(to left bottom,red,yellow);
角度值，可以实现任何方向的线性渐变
background-image: linear-gradient(30deg,red,blue);
让颜色不均匀分布,
20%代表红色实体颜色结束的位置，20%代表蓝色实体颜色开始的位置
background-image: linear-gradient(red 20%,blue 20%);
20%代表红色实体颜色结束的位置，50%代表蓝色实体颜色开始的位置，中间的30%就是渐变的位置，这30%红色和蓝色平分,如果想要出现渐变效果，一定要保证后一个颜色的百分比大于前一个颜色的百分比
background-image: linear-gradient(red 20%,blue 50%);
颜色从浅到深渐变
background-image: linear-gradient(rgba(255,0,0,0),rgba(255,0,0,1));
加上背景图片
background-image:-webkit-linear-gradient(to left, rgba(0, 255, 0, 1),rgba(255, 0, 0, 0)),url("https://www.google.com/images/srpr/logo3w.png");
重复线性渐变
最后一个颜色百分比，减去第一个颜色百分比，就是单个重复渐变区域的占比
background-image:repeating-linear-gradient(45deg,red10%,blue20%,orange30%);
2.径向渐变radial-gradient()
默认径向渐变的发散形状为椭圆 ellipse,设置为circle发散形状变为圆形
background-image: radial-gradient(circle, red 20%,white 20%);
改变径向渐变的发散点
单一位置
background-image: radial-gradient(at left center,red,blue);
复合位置
百分比 数值像素
background-image: radial-gradient(at left top,red 30%,blue 30%);
background-image: radial-gradient(at 80% 20%,red 20%,yellow 40%);
background-image: radial-gradient(at 200px 20%,red 20%,yellow 40%);
渐变的范围
closest-corner 最近的角,closest-side 最近的边
farthest-corner 最远的角,farthest-side 最远的边
background-image:-webkit-radial-gradient(60%60%,closest-corner,red,blue,yellow,black);
重复径向渐变
background-image: repeating-radial-gradient(red,blue,orange);
十一、过渡transition
过渡需要触发
变换的属性：transition-property:
变换的时间：transition-duration
过渡延迟时间：transition-delay
时间变换轨迹：transition-timing-function，linear匀速，ease逐渐变慢，ease-in由慢变快，ease-out由快变慢，ease-in-out慢快慢
贝塞尔曲线，四个值代表两个参照点的坐标，坐标的x值取值范围【0~1】，y没有限制 但不易过大或过小
transition:all 2s 0.5s cubic-bezier(1,-0.01,0.63,0.79);
同时进行过渡的方法：
第一种 all
transition: all 2s;
第二种 分开指定，逗号隔开
transition: margin-left 2s,transform 6s;
十二、2d形变
/*给形变加一个过渡效果*/
transition:all 2s;
/*形变中心点*/
/*像素百分比*/
transform-origin:20% 60%;
2d变换时，虽然自身发生了形变，但是不会影响已有的布局，不会改变空间
2d变换的四个内容：平移，旋转，缩放，拉伸，有x、y、z方向
1.平移：translate
transform: translate(100px,100px);
transform: translateX(100px);
2.缩放：scale
值大于1代表放大，小于1代表缩小。第一个值横向，第二个值纵向
transform: scale(2.0,0.5);
3.旋转：rotate
transform: rotate(3600deg);
4.拉伸：skew
skewX值为正，拉得是左上和右下，值为负，拉的是右上和左下，（x轴不变，y轴转逆时针角度）
skewY值为正，左上右下，值为负，拉的是右上和左下（y轴不变，x轴转逆时针角度）
transform: skewY(30deg);
transform: skew(-30deg,-60deg);
可以通过空格隔开，可以实现多个形变效果（多个形变执行的时候具有先后顺序）
transform:translate(200px,200px)skew(-30deg,-60deg);
十三、3d形变
设置css样式：
#seat{
/*视距*/
perspective:800px;
/*视角*/
perspective-origin:top;
}
#stage{
/*想要实现3d变换效果，需要我们去构建3d空间*/
transform-style:preserve-3d;
}
十四、动画
1.动画
动画不需要触发，但是也可以触发
动画的必备属性：动画名称，动画的执行时间
div{
/*动画名称*/
animation-name:moving;
/*动画的执行时间*/
animation-duration:3s;
/*动画的延迟时间*/
animation-delay:0.2s;
/*动画执行次数,循环次数,数字代表具体的次数，infinite代表无限循环*/
animation-iteration-count:1s;
/*动画的执行方向,normal默认的值alternate奇数次顺序执行，偶数次倒序执行*/
animation-direction:alternate;
/*动画执行时间变化轨迹*/
animation-timing-function:linear;
/*保留动画结束的停留位置*/
animation-fill-mode:forwards;
/*动画状态:running执行 paused静态*/
animation-play-state:running;
/*复合属性*/
/*animation: moving 2s 0.2s alternate infinite ease forwards;*/
}
/*关键帧动画名称*/
@keyframes moving{
/*定义所选取的动画的执行过程*/
from{
margin-left: 600px;
}
to{
margin-left: 1000px;
}
}
/*from和to关键字*/
/*只给from，不给to，从from的状态运动到元素本身的状态*/
/*只给to，不给from，从元素本身的状态运动到to的状态*/
/*同时给from和to，从from的状态运动到to得状态*/
/*百分比*/
@keyframes moving{
0%{
}
50%{
/*这些值，只是用来定义动画的，并不会改变原有的属性*/
margin-left:500px;
margin-top:500px;
}
100%{
margin-left:1000px;
/*margin-top: 0;*/
}
}
/*hover时候再执行动画，把动画名称放在hover里面，动画也可以通过hover效果触发执行*/
2.动画库的使用
方式一：
引用动画的css
animated +css中运动状态名称