一、html5新特性
1.增加了一个专门用于绘画的元素canvas
2.增加了用于媒体播放的音频和视频元素
３.增强了对本地离线存储更好的支持
４.新增了很多有语义的结构化标签
５.新增了很多input类型
二、新增的input类型
1.number，跟数值有关的，max和min 限制最大值和最小值
<input type="number" value="10" name="numberInput" min="1" max="12">
2.range,滑块，一般用来控制音量、亮度的调节。
<input type="range" min="1" max="5">
3.email,邮箱，自带了验证功能，但是真正的验证，需要正则验证才是完善的,required表示必须进行输入
<input type="email" required="required">
4.url网址输入框，也自带不完善的验证功能，并且与email一样可以设置required属性，保证必须填写
<input type="url">
5.有关时间日期的
<input type="time">
<input type="date">
<input type="week">
<input type="month">
6.color,颜色选取
<input type="color">
label标签，标签元素，显示文本的。但是在表单里面，可以起到关联其他表单元素的作用。增强用户体验的。通过内联属性for，填写外部关联元素设置的id，进行关联。
<label for="textI">用户名:</label>
<input id="textI" type="text" placeholder="请输入用户名" />
label做容器，关联的元素写在label内部。
<label>用户名:<input type="text"/></label>
三、结构化标签
header footer nav article section aside figure figuration
header 用来定义文档的头部
footer 用来定义文档的底部
nav 用来定义文档的导航部分
artical 用来定义文档中独立的内容部分
section 可以嵌套在artical中进行使用，表示区段，或者分段的小块
aside 侧边栏、
figure定义独立的数据流，比如图片、图像等
figuration 嵌套在figure中，起到标题的作用
除了figuration 之外，其余的都是ｂｌｏｃｋ块级， 只有figure有默认的margin，其余的没有
四、音频和视频
1.音频
<audio src="../source/菊花爆满山.mp3" autoplay="autoplay" controls="controls" loop="loop" muted="muted">你的浏览器太辣鸡了，不支持audio标签</audio>
src 音乐资源的路径
autoplay 自动播放
controls 控制面板
loop 循环播放
muted 初始静音
audio支持的音乐格式有mp3 ogg wav
选择不同的文件格式
source标签为ａｕｄｉｏ提供音乐资源，并且可以指定多种类型的音乐资源
<audio autoplay="autoplay">
<source src="../source/菊花爆满山.mp3" type="audio/mp3">
<audio autoplay="autoplay">
<source src="../source/菊花爆满山.mp3" type="audio/ogg">
</audio>
2.视频
video标签支持的文件类型 mp4 ogg webm
width height 是设置播放界面大小的，通常情况下只会指定一方的值，然后等比缩放
poster,当视频链接出现问题，或者网络延迟加载慢时，显示的一张占位图片
<video autoplay="autoplay" controls="controls" loop="loop" muted="muted" width="200" height="500" poster="../source/haha.jpg">
<source src="../source/diqiu.mp4" type="video/mp4">
你的浏览器太拉基了，不支持video标签
</video>
五、流式布局和响应式布局
1.viewport
viewport用来做移动端屏幕适配的
<meta name="viewport" content="width=device-width,height=device-height,
initial-scale=1.0,maximum-scale=3.0,minimum-scale=0.5,user-scalable=no">
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;
<img src="../img/001.jpg" width="50%"/>
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形变
<!--3D 空间立体感-->
<!--观众席景深层-->
<div id="seat">
<!--舞台构造3d空间-->
<div id="stage">
<!--演员3d元素-->
<div id="actor">
</div>
</div>
</div>
设置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
<link rel="stylesheet" href="css/animate.css"/>
animated +css中运动状态名称
<div class="animated shake"></div>
方式二：
<link rel="stylesheet" href="css/animate.css"/>
//首先获取div
var btn=document.getElementById("btn");
css设置：
/*div:hover {
动画名称
animation-name: bounce;
动画执行时间
animation-duration: 2s;
}*/
.times{
animation-duration:2s;
}
js设置
//添加移入、移出事件
btn.onmouseover=function() {
//btn.style.animationName = "shake";
//btn.style.animationDuration = "2s";
btn.className="shake times";
}
btn.onmouseout=function() {
//btn.style.animationName = "bounce";
//btn.style.animationDuration = "2s";
btn.className="bounce times";
}
