html5
普通：
header section footer nav article aside figure
特殊：
canvas video audio(controls控制台)
表单：
type
time
color
range
number
自动获取焦点：
autofocus
提示文字：
placeholder
css3：
background:-webkit-linear-gradient(top,red,blue,green);
浏览器的前缀：
以前：
background:-webkit-linear-gradient(top,red,blue,green);
background:-ms-linear-gradient(top,red,blue,green);
background:-moz-linear-gradient(top,red,blue,green);
background:-o-linear-gradient(top,red,blue,green);
现在：
background:-webkit-linear-gradient(top,red,blue,green);
background:linear-gradient(top,red,blue,green);
-webkit- 谷歌
-ms- IE
-moz- 火狐
-o- 欧朋
圆角：
border-radius:10px; ---四个方向的圆角都是10px
圆：
1.正方形
2.值是：50%；（宽高的一半）
左上角单独写法：
border-top-left-radius:50px;
border-top-left-radius:100px 50px;---上边100px弧度 左边50px弧度！
动画：
第一种动画：
用法：改变谁提前给它加好这个动画样式！
transition:1s all; ---过渡动画！
transition:3s all ease-in-out;
transition:时间 所有样式 运动形式;
好处：
1. 什么样式都可以！
2. 和js配合起来很轻松！
3. 性能很高！
***跳变的动画做不了！（变好几次）
第二种动画：
定义动画
@-webkit-keyframes aaa{
0%{width:100px;height:100px; background:red;}
50%{width:300px;height:100px; background:yellow; border-radius:50%;}
100%{width:100px;height:100px; background:red;}
调用：（让谁改变，给谁调用！）
-webkit-animation:aaa 2s infinite;
-webkit-animation:动画名 时间 运动形式;
infinite（无限运动）
背景色：
1.red blue
2.#000 #fff
3.rgb（0,0,0）---css3
background:rgba(0,0,0,0.5);
background:rgba(0,0,0,透明度);
盒子阴影：
默认外阴影！
box-shadow:5px 5px 5px 5px #000;
1.X轴偏移量（正数向右）
2.Y轴偏移量（正数向下）
3.模糊度
4.阴影大小
5.颜色
内阴影:inset
box-shadow:inset 5px 5px 5px 5px blue;
文本阴影：
text-shadow:5px 5px 5px #000;
1.X轴偏移量（正数向右）
2.Y轴偏移量（正数向下）
3.模糊度
4.颜色
***注意：
1.没有内阴影
2. text-shadow:5px 5px 5px blue,15px 15px 2px red,30px 30px 2px green;
背景色渐变：
线性：
background:linear-gradient(red,blue,green);
方向：默认从上往下
背景色：linear-gradient(颜色1,颜色2,颜色3)；
-webkit-linear-gradient(top,red,blue,green);
-webkit-linear-gradient(开始方向,red,blue,green)
------单词表示法：
background:-webkit-linear-gradient(10deg,red,blue,green)---度数表示法：
60deg--60度；---按照逆时针来走的！
background:linear-gradient(45deg,red 25%,blue 25%,blue 50%,yellow 50%,yellow 75%,green 75%);
径向：
background:radial-gradient(red,blue);
1.形状1
background:radial-gradient(100px 100px,red,blue);
background:radial-gradient(x轴半径 y轴半径,red,blue);
2.形状2
background:radial-gradient(ellipse,red,blue);----会随着div的宽高变椭圆
background:radial-gradient(circle,red,blue);----就是圆
3.位置：圆的中心点的位置！
全：background:radial-gradient(位置,形状,red,blue);
1.单词表示法
-webkit-radial-gradient(left top,100px 100px,red,blue)
2.数值（以div的左上角为起点）
background:-webkit-radial-gradient(0 0,100px 100px,red,blue);
第一个值是left
第二个是top
背景色：-webkit-
背景图大小：
background-size:100% 100%;
背景图大小：宽 高！
background-size:contain;
宽度100%（宽度和父级宽度一致，高度按照宽度比例变化-为了保持图片不变形）
background-size:cover;
高度100%（高度和父级高度一致，宽度宽度按照高度比例变化-为了保持图片不变形）
蒙版：
-webkit-mask:url(img/666.png) no-repeat center;
效果：配合背景图达到效果（对于素材来说：透明的地方不显示，不透明显示）