一、HTML部分
1、HTML5新特点
向下兼容、用户至上、化繁为简、无插件范式、访问通用性、引入语义、引入原生媒体支持、引入可编程内容
2、HTML5标签语法
可以省略的元素：空元素语法的元素{br} ;可以省略结束标签的元素 {p,li,h}；可以全部省略标签的元素 {html,head,body}
>>>尽量不用！！
具有boolean值的属性：属性名=属性值 >>> 可以只写属性名
属性值的引号可省略：具有多个属性值的不能省
3、HTML新增结构标签（变形的具有特定语义的div）
*section：表示页面中的内容区块，近似于div，相当于主体部分，可以取代id大块，与div相比语义上地位更加重要。
*article：代表一块与当前页面不相关的内容
**header：头部
**footer：尾部
hgroup：标题组
*Nav：导航栏
*aside：与文章相关的内容，栗子有微博中的“相关文章”
【结构如下图】
二、CSS3部分
1、transform定义变换
常用变换：
平移 translate
缩放 scale
定义旋转 rotate
可同时进行多种变换，变换之间用逗号分隔
2、transform-origin 定义变换起点
可选值：left/center/right top/center/bottom
或者直接写x y轴坐标点
3、transition 定义过渡
四个属性值：
①参与过度的属性：可以单独指定某个CSS，也可以all（全部）、none（没有）
②过度开始到过渡完成的时间：.3s .5s（栗子）
③过度的样式函数：常选择ease
④过渡开始前的延迟时间：一般省略
transition属性可以同时定义多个过渡效果，用逗号分隔
（栗子）transition: color .3s ease,border .5s ease;
4、animation 动画
step1、声明一个动画的关键帧
@keyframes{
}
阶段写法：
每个阶段用百分比表示，从0%到100%
或者用from{} to{}
step2、在CSS选择器中使用animation动画属性，调用声明好的关键帧（一般采取缩写形式，写法顺序如下图）
下面是一个K做的一个小小的animation，代码如下（因为搞了半天视频上传没弄上去，就先这样了，以后K搞明白了一定会再上传效果视频滴~）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>炸飞机！！</title> <style type="text/css"> body{ /*background-color: #000000;*/ background-image: url(img/QQ图片20170316141436.png); background-repeat: no-repeat; background-size: cover; } .div{ width: 100px; height: 100px; border-radius: 50px; /*background-color: #1E90FF;*/ -webkit-animation: colorback 5s ease infinite alternate forwards; } @-webkit-keyframes colorback{ 0% {background-color: #000000;} 10% {background-color: #111111;} 20% {background-color: #222222;} 30% {background-color: #333333;} 40% {background-color: #444444;} 50% {background-color: #555555;} 60% {background-color: #666666;} 70% {background-color: #777777;} 80% {background-color: #888888;} 90% {background-color: #999999;} 100% {background-color: #AAAAAA;} } .picture{ width: 90px; height: 30px; position: fixed; top: 110px; left: 110px; background-repeat: no-repeat; background-size: cover; background-image: url(img/QQ20170316110112.jpg); -webkit-animation: fly 3s 0s linear; } @-webkit-keyframes fly{ 0% { top: 110px; left: 110px; } 100% { top: 120px; left: 50%; } } .lighter{ display: block; position: fixed; bottom: 0; left: 50%; -webkit-animation: lighter 2s linear normal; width: 50px; height: 150px; } @-webkit-keyframes lighter{ 0% { transform: scale(1); bottom: 0; } 50% { transform: scale(0.5); bottom: 30%;} 100% { transform: scale(0); bottom: 60%;} } .light{ display: block; position: fixed; bottom: 60%; left: 30%; -webkit-animation: light 1s 2s linear normal; transform: scale(0); } @-webkit-keyframes light{ 0% { transform: scale(0); } 100% { transform: scale(0.6); } </style> </head> <body> <div class="div"></div> <div class="picture"></div> <img src="img/QQ图片20170316141417.png" class="lighter"/> <img src="img/QQ图片20170316141427.png" class="light" /> </body> </html>