HTML5课程

查看章节 全部展开
阶段 章节 课程内容

初识HTML5

1

第一章：HTML5新增语义化标签
1.1 - <header></header> 页眉
1.1.1 - 主要用于页面的头部的信息介绍，也可用于板块头部 1
1.2 - <footer></footer> 页脚
1.2.1 - 主要用于页面的底部 或者 版块底部 1
1.3 - <section></section> 页面上的版块
1.3.1 - 用于划分页面上的不同区域,或者划分文章里不同的节 1
1.4 - <article></article> 用来在页面中表示一套结构完整且独立的内容部分
1.4.1 - 可以用来呈现论坛的一个帖子，杂志或报纸中的一篇文章，一篇博客，用户提交的评论内容，可互动的页面模块挂件等。 1
1.5 - <aside></aside> 侧边栏 1
1.5.0 - 可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别与主要内容的部分
1.5.1 - aside 的内容应该与 article 的内容相关。
1.5.2 - 被包含在article中作为主要内容的附属信息部分，其中的内容 以是与当前文章有关的引用、词汇列表等。
1.5.3 - 在article之外使用，作为页面或站点全局的附属信息部分；最典型的形式是侧边栏(sidebar)，其中的内容可以是友情链接、附属导航或广告单元等。
1.6 - <hgroup></hgroup> 页面上的一个标题组合
1.6.1 - 一个标题和一个子标题，或者标语的组合 1
1.7 - <nav></nav> 菜单导航
1.7.1 - 菜单导航 （包含链接的的一个列表） 1
1.8 - <figure></figure> 用于对元素进行组合。
1.8.1 - 一般用于图片或视频 1
1.9 - <figcaption></figcaption> figure的子元素
1.9.1 - 用于对figure的内容 进行说明 1
1.10 - <time></time> 用来表现时间或日期 1
1.11 - <datalist></datalist> 选项列表
1.11.1 - 与 input 元素配合使用，来定义 input 可能的值。 1
1.12 - <details></details> 用于描述文档或文档某个部分的细节 1
1.12.1 - 该元素用于摘录引用等 应该与页面的主要内容区分开的其他内容
1.12.2 - Open 属性默认展开
1.13 - <summary></summary> details 元素的标题 1
1.14 - <dialog></dialog> 定义一段对话 1
1.15 - <address></address> 定义文章 或页面作者的详细联系信息 1
1.16 - <mark></mark> 需要标记的词或句子 1
1.17 - <keygen></keygen> 给表单添加一个公钥 1
1.18 - <progress></progress> 定义进度条 1
【备注：仅支持IE9及以上浏览器 】
其它平台手册： W3School手册 runoob手册

2

第二章：HTML5语义化标签的兼容
2.1 - 标签兼容 1
2.1.1 - 针对IE6-8这些不支持HTML5语义化标签的浏览器我们可以使用javascript来解决他们。方法如下：
在页面的头部加下： 
<script>

document.createElement("header");

document.createElement("nav");

document.createElement("footer");

……

</script>
2.2 - 样式兼容1
2.2.1 - HTML5语义化标签在IE6-8下，我们用js创建出来之后，他是不会有任何默认样式的甚至是 display，所以在样式表里 要对这些标签定义一下 它默认的display
2.3 - HTML5新标签不兼容IE8及以下版本浏览器
2.3.1 - 以上两种兼容处理只能实现正常的显示，不能实现一些特殊效果。如：进度条、选项列表（datalist）等
2.3.2 - 插件html5shiv.js可以实现IE6-IE8浏览器的基础兼容 1

3

第三章：HTML5表单新控件、新属性及表单验证
3.1 - 【新增表单控件】
3.1.1 - email : 电子邮箱文本框，跟普通的没什么区别 1
3.1.1.1 - 当输入不是邮箱的时候，验证通不过
3.1.1.2 - 移动端的键盘会有变化
3.1.2 - tel : 电话号码1
3.1.3 - url : 网页的URL1
3.1.4 - search : 搜索引擎1
3.1.4.1 - chrome下输入文字后，会多出一个关闭的X
3.1.5 - range : 特定范围内的数值选择器 1
3.1.5.1 - min、max、step( 步数 )
3.1.5.2 - 例子 : 用JS来显示当前数值
3.1.6 - number : 只能输入数字的输入框 1
3.1.7 - color : 颜色选择器1
3.1.8 - datetime : 显示完整日期1
3.1.9 - datetime-local : 显示完整日期，不含时区 1
3.1.10 - time : 显示时间，不含时区1
3.1.11 - date : 显示日期1
3.1.12 - week : 显示周1
3.1.13 - month : 显示月1
3.2 - 【新增表单属性】
3.2.1 - placeholder : 输入框提示信息 1
3.2.1.1- 例子 : 微博的密码框提示
3.2.2 - autocomplete : 是否保存用户输入值 1
3.2.2.1- 默认为on，关闭提示选择off
3.2.3 - autofocus : 指定表单获取输入焦点 1
3.2.4 - list和datalist : 为输入框构造一个选择列表 1
3.2.4.1- list值为datalist标签的id
3.2.5 - required : 此项必填，不能为空值 1
3.2.6 - Pattern : 正则验证 pattern="\d{1,5}" 1
3.2.7 - Formaction 在submit里定义提交地址 1

HTML5的新特性

4

第四章：新的选择器
4.1 - querySelector 返回文档中匹配指定 CSS 选择器的第一个元素。 R
4.1.1 - 注意： querySelector() 方法仅仅返回文档中匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。
4.1.2 - 语法：document.querySelector(CSS selectors)
例：document.querySelector('.box'); 1
4.2 - querySelectorAll 返回文档中匹配指定 CSS 选择器的所有元素节点列表。
4.2.1 - 例：document.querySelectorAll('.box'); 1
4.2.2 - 获取一组元素
4.3 - getElementsByClassName 返回文档中所有指定类名的元素集合，作为 NodeList 对象。 R
4.3.1 - 语法：document.getElementsByClassName(classname)
例：document.getElementsByClassName('box'); 1
4.4 - classList 返回元素的类名，作为 DOMTokenList 对象。 R
4.4.1 - length : class的长度
4.4.2 - add() : 添加class方法
4.4.3 - remove() : 删除class方法
4.4.4 - toggle() : 切换class方法
例：document.getElementById('div1').classList; 1
4.5 - HTML5新特性的浏览器支持情况引

5

第五章：JSON的新方法
5.1 - parse() : 把字符串转成json R 1
5.1.1 - 字符串中的属性要严格的加上引号
5.2 - stringify() : 把json转化成字符串 R 1
5.2.1 - 会自动的把双引号加上
5.3 - 新方法与eval的区别 1
5.3.1 - eval : 可以解析任何字符串变成JS
例：eval(str);
5.3.2 - parse : 只能解析JSON形式的字符串变成JS (安全性要高一些)
例：JSON.parse(str);
5.4 - 新方法的应用
5.4.1 - 深度克隆新对象1
5.4.1.1 - 因为对象的赋值等于引用，所以先把对象转成字符串再赋值就不是引用了
5.4 - 如何其他浏览器做到兼容
5.4.1 - JSON中下载下载json2.js

6

第六章：自定义数据与JS加载
6.1 - data自定义数据
6.1.1 - dataset的使用 1
6.1.1.1 - data-name : dataset.name
6.1.1.2 - data-name-first : dataset.nameFirst
6.1.2 - Data数据在jquery mobile中有着重要作用 1
6.2 - 延迟加载JS
6.2.1 - Html5的defer和async 1
6.2.1.1 - defer : 延迟加载，会按顺序执行，在onload执行前被触发 R
6.2.1.2 - async : 异步加载，加载完就触发，有顺序问题 R
6.2.2 - 推荐Labjs库

7

第七章：历史管理history
8.1 - 触发历史管理的情况
8.1.1 - 页面有跳转
8.1.2 - hash值有改变时 1
8.1.2.1 - hash 属性是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分）。 W
8.1.2.2 - 语法：location.hash=anchorname
8.1.2.3 - onhashchange ：当hash值改变时触发该事情。 1
8.1.3 - history的pushState方法存入历史管理
8.1.3.1 - 条件：服务器下运行
8.1.3.2 - 使用history的pushState方法存入历史管理 1
pushState : 三个参数 ：数据、标题(都没实现)、网址(可选)
注意：网址是虚假的，需在服务器指定对应页面，不然刷新找不到页面
8.1.3.3 - popstate事件 : 读取数据 event.state 1
8.1.4 - History 对象 W
8.1.4.1 - History 对象属性
length：返回浏览器历史列表中的 URL 数量。
8.1.4.2 - History 对象方法
back()：加载 history 列表中的前一个 URL。
forward()：加载 history 列表中的下一个 URL。
go()：加载 history 列表中的某个具体页面。

8

第八章：拖放操作
8.1 - 拖放属性 draggable 1
8.1.1 - 给元素添加draggable属性设置为true时，元素才可以拖拽
8.1.2 - 火狐下必须在dragstart事件中设置dataTransfer对象才可以拖拽除图片外的其他标签
8.2 - 拖放事件 1
8.2.1 - 拖拽元素事件 : 事件对象为被拖拽元素
8.2.1.1 - dragstart , 拖拽前触发
8.2.1.2 - drag ,拖拽前、拖拽结束之间，连续触发
类似mousemove，但鼠标不动时mousemove不被触发，页drag依然会被触发
8.2.1.3 - dragend , 拖拽结束触发
8.2.2 - 目标元素事件 : 事件对象为目标元素
8.2.2.1 - dragenter , 进入目标元素触发，相当于mouseover
8.2.2.2 - dragover ,进入目标、离开目标之间，连续触发
类似mousemove，但鼠标不动时mousemove不被触发，页drag依然会被触发
8.2.2.3 - dragleave , 离开目标元素触发，相当于mouseout
8.2.2.4 - drop , 在目标元素上释放鼠标触发
要想触发drop事件，就 必须在dragover当中阻止默认事件
8.3 - 事件的执行顺序
8.3.1 - drop不触发的时候
dragstart > drag > dragenter > dragover > dragleave > dragend
8.3.2 - drop触发的时候(dragover的时候阻止默认事件)
dragstart > drag > dragenter > dragover > drop > dragend
8.3.3 - 不能释放的光标和能释放的光标不一样(dragover的时候是否阻止默认事件)
8.4 - dataTransfer对象 1
设置dataTransfer对象可解决火狐下不兼容问题
dataTransfer对象在event对象下 即：event.dataTransfer
8.4.1 - setData() : 设置数据 key和value(必须是字符串)
8.4.2 - getData() : 获取数据，根据key值，获取对应的value
8.4.3 - effectAllowed : 设置光标样式
光标样式有：none, copy, copyLink, copyMove, link, linkMove, move, all 和 uninitialized
8.4.4 - setDragImage ：设置拖动时跟随鼠标移动的图片，用来替代默认的元素
8.4.4.1 - 三个参数：指定的元素，坐标X，坐标Y
8.4.5 - files ：获取外部拖拽的文件，返回一个filesList列表 1
8.4.5.1 - filesList下有个type属性，返回文件的类型
8.5 - FileReader(读取文件信息)，配合ataTransfer对象的files使用 1
8.5.1 - readAsDataURL : 参数为要读取的文件对象，将文件读取为DataUrl
8.5.2 - onload : 当读取文件成功完成的时候触发此事件
this.result , 来获取读取的文件数据，如果是图片，将返回base64格式的图片数据
8.6 - dataTransfer对象
8.6.1 - 拖拽删除列表1
8.6.2 - 拖拽购物车6
8.6.3 - 上传图片预览功能1

canvas

9

第九章：canvas基础
8.0 - 菜鸟（runoob.com）手册【推荐】
8.0.1 - canvas标签（基础） R
8.0.2 - canvas参考手册【推荐-内容更详细】 R
8.1 - 获取canvas元素，创建绘制（2d）环境 1
8.1.1 - canvas标签 （默认：宽300 高150）
8.1.1.1 - canvas的宽高一定要在标签中设置。在样式中设置的话会不太如愿（样式中设置宽高是以默认宽高的比例缩放）。
<canvas id="c1" width="400" height="400">
	<span>不支持canvas浏览器</span>
</canvas>
8.1.2 - 获取canvas元素，创建绘制环境
8.1.2.1 - getContext('2d')是2D绘图环境；getContext('webgl')是3D绘图环境[兼容性很差]
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
8.2 - 绘制方块 1
8.2.1 - fillRect(L,T,W,H)：绘制“有填充无边框”的矩形（默认颜色为黑色）
8.2.2 - strokeRect(L,T,W,H)：绘制"有边框无填充"的矩形。
8.2.2.1 - 默认1像素黑色边框，实际可能是2像素。
原因：边框是以设置位置为中心，向两边延伸0.5像素,实际就占了两像素的位置。
解决方法：把设置坐标位置偏移0.5像素。如下：
oGC.strokeRect(50.5,50.5,100,100);
8.2.3 - Rect(L,T,W,H)：绘制“无边框无填充”的矩形。
8.2.3.1 - 需使用 stroke() 或 fill() 方法在画布上实际地绘制矩形。
8.2.4 - clearRect(L,T,W,H)：删除画布中一个矩形区域。
8.3 - 颜色、样式和阴影
8.3.1 - fillStyle ：填充绘画的颜色、渐变或模式。 R
8.3.1.1 - 因边框是以坐标为中心向两边延伸，所以当和填充一起用的时候会被填充覆盖一半，或者是覆盖边框一半的填充（谁先绘制谁被覆盖）。
8.3.2 - strokeStyle ：线条颜色、渐变或模式 R
8.3.3 - shadowOffsetX：设置或返回阴影与形状的水平距离 R
8.3.4 - shadowOffsetY：设置或返回阴影与形状的垂直距离 R
8.3.5 - shadowColor：设置或返回用于阴影的颜色。 R
8.3.5.1 - 默认颜色是黑色透明，所以设置阴影一定要设置阴影颜色。
8.3.6 - shadowBlur：设设置或返回用于阴影的模糊级别 R
8.4 - 线条样式（边界绘制） 1
8.4.1 - lineWidth ：设置或返回当前的线条宽度。（是一个数值，不带单位） R
8.4.1.1 - 值为一个数值，不带单位（以像素计）
8.4.1.2 - 边线以设置坐标为中心，向两边延伸。
8.4.2 - lineCap：线条的结束端点样式。 R
8.4.2.1 - butt：默认。向线条的每个末端添加平直的边缘。
8.4.2.2 - round：向线条的每个末端添加圆形线帽。
8.4.2.3 - square：向线条的每个末端添加正方形线帽。
8.4.3 - lineJoin：两条线相交时，所创建的拐角类型。 R
miter：默认，创建尖角； round：创建圆角； bevel：创建斜角。
8.5 - 绘制路径
8.5.1 - beginPath()：起始一条路径，或重置当前路径。（起到区分路径的效果） R
8.5.2 - closePath()：创建从当前点回到起始点的路径。（起到闭合路径的效果） R
8.5.3 - moveTo() ：把路径移动到画布中的指定点，不创建线条。（相当于落笔位置） R
8.5.4 - lineTo() ：添加一个新点。（相当于其它落笔点） R
8.5.4 - stroke() ：绘制已定义的路径。(默认黑色) R
8.5.4 - fill() ：填充当前绘图（路径）。(默认黑色) R
8.5.4 - lineTo() ：添加一个新点。（相当于其它落笔点） R
8.5.4 - lineTo() ：添加一个新点。（相当于其它落笔点） R
8.5.4 - 实例
8.5.4.1 - 鼠标画线（画板效果） 1
8.5.4.2 - 方块移动 1
8.5 - 绘制圆/弧/曲线
8.5.1 - arc()：创建弧/曲线（用于创建圆形或部分圆）。 R
8.5.1.1 - 语法：arc(x,y,半径，起始弧度，结束弧度，旋转方向)
8.5.1.1.1 - x,y：圆的中心的坐标
8.5.1.1.2 - 弧度与角度的关系：弧度=角度*Math.PI/180
8.5.1.1.3 - 旋转方向：顺时顺（默认：false）、逆时针（true）
8.5.1.2 - 例子：用arc画个钟表 1
8.5.2 - arcTo()：创建两切线之间的弧/曲线。 R
8.5.2.1 - 语法：arcTo(x1,y1,x2,y2,r)
8.5.2.1.1 - 第一组坐标、第二组坐标、半径
8.5.3 - quadraticCurveTo()：创建二次贝塞尔曲线。 R
8.5.3.1 - 语法：quadraticCurveTo(cpx,cpy,x,y);
8.5.3.1.1 - cpx：贝塞尔控制点的 x 坐标。
8.5.3.1.2 - cpy：贝塞尔控制点的 y 坐标。
8.5.3.1.3 - x：结束点的 x 坐标。
8.5.3.1.4 - y：结束点的 y 坐标。
8.5.3 - bezierCurveTo()：创建二次贝塞尔曲线。 R
8.5.3.1 - 语法：bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
8.5.3.1.1 - cp1x：第一个贝塞尔控制点的 x 坐标。
8.5.3.1.2 - cp1y：第一个贝塞尔控制点的 y 坐标。
8.5.3.1.3 - cp2x：第二个贝塞尔控制点的 x 坐标。
8.5.3.1.4 - cp2y：第二个贝塞尔控制点的 y 坐标。
8.5.3.1.5 - x：结束点的 x 坐标。
8.5.3.1.6 - y：结束点的 y 坐标。
8.5.4 - save() ：保存当前环境的状态。
8.5.4 - restore() ：返回之前保存过的路径状态和属性。
8.5.4.1 - save()开始，restore()结束，两者包含的代码段中的设置独立出来，不影响其它区域。
8.6 - 转换
8.6.1 - translate()：重新映射画布上的 (0,0) 位置。 R
8.6.2 - rotate()：旋转当前绘图。 R
8.5.2.1 - 参数为弧度
8.5.2.2 - 弧度与角度的关系：弧度=角度*Math.PI/180
8.6.3 - scale()：缩放当前绘图至更大或更小。 R
8.6.4 - 实例：旋转、放大缩小的方块 1
8.7 - 图像绘制(插入图片)
8.7.1 - drawImage()：向画布上绘制图像、画布或视频。 R
8.7.2 - 【语法】
8.7.2.1 - 在画布上定位图像：
drawImage(img,x,y);
8.7.2.2 - 在画布上定位图像，并规定图像的宽度和高度：
drawImage(img,x,y,width,height);
8.7.2.3 - 剪切图像，并在画布上定位被剪切的部分：
drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
8.7.3 - 参数值
img：规定要使用的图像、画布或视频。
sx：可选。开始剪切的 x 坐标位置。
sy：可选。开始剪切的 y 坐标位置。
swidth：可选。被剪切图像的宽度。
sheight：可选。被剪切图像的高度。
x：在画布上放置图像的 x 坐标位置。
y：在画布上放置图像的 y 坐标位置。
width：可选。要使用的图像的宽度（伸展或缩小图像）。
height：可选。要使用的图像的高度（伸展或缩小图像）。
8.7.4 - drawImage需要先等图片加载完后再执行。
img.onload = function(){
    ctx.drawImage(img,10,10,150,180);
}
8.7.5 - 实例
8.7.5.1 - 微博的图片旋转效果 1
8.7.5.2 - "插入"视频（每 20 毫秒，代码就会绘制视频的当前帧） 1
8.8 - 渐变、背景
8.8.1 - createPattern()：在指定的方向上重复指定的元素。（类似背景） R
8.8.1.1 - 元素可以是图片、视频，或者其他canvas 元素。被重复的元素可用于绘制/填充矩形、圆形或线条等等。
8.8.1.2 - 语法： context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");
8.8.1.2.1 - image：规定要使用的模式的图片、画布或视频元素。
8.8.1.2.2 - repeat：默认。该模式在水平和垂直方向重复。
8.8.1.2.3 - repeat-x：该模式只在水平方向重复。
8.8.1.2.4 - repeat-y：该模式只在垂直方向重复。
8.8.1.2.5 - no-repeat：该模式只显示一次（不重复）。
8.8.2 - createLinearGradient()：创建线性渐变（用在画布内容上）。 R
8.8.2.1 - 语法： context.createLinearGradient(x0,y0,x1,y1);
8.8.2.2.1 - x0：渐变开始点的 x 坐标
8.8.2.2.2 - y0：渐变开始点的 y 坐标
8.8.2.2.3 - x1：渐变结束点的 x 坐标
8.8.2.2.4 - y1：渐变结束点的 y 坐标
8.8.2.3 - 渐变可用于填充矩形、圆形、线条、文本等等。
8.8.2.4 - 提示：请使用该对象作为 strokeStyle 或 fillStyle 属性的值。
8.8.2.5 - 提示：请使用 addColorStop() 方法规定不同的颜色，以及在 gradient 对象中的何处定位颜色。
8.8.3 - createRadialGradient()：创建放射状/环形的渐变（用在画布内容上）。 R
8.8.3.1 - 语法： context.createRadialGradient(x0,y0,r0,x1,y1,r1);
8.8.3.1.1 - x0：渐变的开始圆的 x 坐标
8.8.3.1.2 - y0：渐变的开始圆的 y 坐标
8.8.3.1.3 - r0：开始圆的半径
8.8.3.1.4 - x1：渐变的结束圆的 x 坐标
8.8.3.1.5 - y1：渐变的结束圆的 y 坐标
8.8.3.1.6 - r1：结束圆的半径
8.8.3.2 - 渐变可用于填充矩形、圆形、线条、文本等等。
8.8.3.3 - 提示：请使用该对象作为 strokeStyle 或 fillStyle 属性的值。
8.8.3.4 - 提示：请使用 addColorStop() 方法规定不同的颜色，以及在 gradient 对象中的何处定位颜色。
8.8.4 - addColorStop()：规定渐变对象中的颜色和位置。 R
8.8.4.1 - 语法： gradient.addColorStop(stop,color);
8.8.4.1.1 - stop：介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。
8.8.4.1.2 - color：在 stop 位置显示的 CSS 颜色值。
8.8.4.2 - addColorStop() 方法与 createLinearGradient() 或 createRadialGradient() 一起使用。
8.9 - 文本
8.9.1 - strokeText()：在画布上绘制带边框的文本（无填充）。 R-详细
8.8.1.1 - 语法： context.strokeText(text,x,y,maxWidth[可选]);
8.8.2 - fillText()：在画布上绘制"被填充的"文本。 R-详细
8.8.2.1 - 语法： context.fillText(text,x,y,maxWidth[可选]);
8.8.3 - font：设置或返回文本内容的当前字体属性。 R-详细
8.8.3.1 - 语法： context.font="italic small-caps bold 12px arial";
8.8.4 - textAlign：设置或返回文本内容的当前对齐方式。（左右方向） R-详细
8.8.4.1 - 语法： context.textAlign="center|end|left|right|start";
8.8.5 - textBaseline：设置或返回在绘制文本时使用的当前文本基线。（上下方向） R-详细
8.8.5.1 - 语法： context.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom";
8.8.6 - measureText()：返回包含指定文本【宽度】的对象。 R-详细
8.8.6.1 - 语法： context.measureText(text).width;
8.8.6.2 - 文本的高度就是font中的字体大小
8.8.6.3 - 实例：文本在画布中居中 1

10

第十章：2D转换
10.1 - transform R
10.1.1 - rotate() 旋转函数(顺时针旋转) 取值度数(允许负值) 1
10.1.1.1 - deg 度数
10.1.1.2 - Transform-origin 旋转的基点 详解
10.1.2 - skew() 倾斜函数 取值度数 1
10.1.2.1 - 如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜
10.1.2.2 - skewX() 只在X轴(水平方向)倾斜 1
10.1.2.3 - skewY() 只在Y轴(垂直方向)倾斜 1
10.1.3 - scale() 缩放函数 取值 正数、负数和小数 1
10.1.3.1 - 如果是两个值，分别指X、Y方向缩放；如果是一个值，则是两个方向同时缩放
10.1.3.2 - scaleX() 只在X轴(水平方向)缩放
10.1.3.3 - scaleY() 只在Y轴(垂直方向)缩放
10.1.4 - translate() 位移函数 1
10.1.4.1 - 如果第二个参数为空，则默认为0，参数为负表示向相反方向位移
10.1.4.2 - translateX() 只在X轴(水平方向)位移
10.1.4.3 - translateY() 只在Y轴(垂直方向)位移
10.1.5 - Transform 执行顺序问题 — 从后往前解析，从前往后执行。 1
10.1.6 - 实例
10.1.6.1 - 钟表效果 1 2
10.1.6.2 - 倾斜的导航 1
10.1.6.3 - 360导航(扇形导航) 1 2 3 4
10.2 - matrix(a,b,c,d,e,f)（矩阵函数）默认值：matrix(1,0,0,1,0,0) 1
10.2.1 - 通过矩阵实现【缩放】 1
10.2.1.1 - x轴缩放 a=x*a　c=x*c　e=x*e;
10.2.1.2 - y轴缩放 b=y*b　d=y*d　f=y*f;
10.2.2 - 通过矩阵实现【位移】 1
10.2.2.1 - x轴缩放 x轴位移: e=e+x
10.2.2.2 - y轴缩放 y轴位移: f=f+y
10.2.3 - 通过矩阵实现【倾斜】 1 1
10.2.3.1 - x轴倾斜: c=Math.tan(xDeg/180*Math.PI)
10.2.3.2 - y轴倾斜: b=Math.tan(yDeg/180*Math.PI)
10.2.4 - 通过矩阵实现【旋转】 1
10.2.4.1 - a=Math.cos(deg/180*Math.PI);
10.2.4.2 - b=Math.sin(deg/180*Math.PI);
10.2.4.3 - c=-Math.sin(deg/180*Math.PI);
10.2.4.4 - d=Math.cos(deg/180*Math.PI);
10.2.5 - 变换兼容IE9以下IE版本只能通过矩阵来实现 1
10.2.5.1 - filter: progid:DXImageTransform.Microsoft.Matrix( M11= 1, M12= 0, M21= 0 , M22=1,SizingMethod='auto expand');
10.2.5.2 - IE下的矩阵没有E和F两个参数 M11==a; M12==c; M21==b; M22==d
10.2.6 - 浏览器支持
10.3 - Transform-origin 旋转的基点 R 1 1 1
10.3.1 - 语法：transform-origin: x-axis y-axis z-axis;
10.3.2 - 各值解析
10.3.2.1 - x-axis：定义视图被置于 X 轴的何处。可能的值：left center right length %
10.3.2.2 - y-axis：定义视图被置于 Y 轴的何处。可能的值：top center bottom length %
10.3.2.3 - z-axis：定义视图被置于 Z 轴的何处。可能的值：length
10.3.3 - 默认值：50% 50% 0
10.3.4 - 2D转换元素可以改变元素的X和Y轴。3D转换元素，还可以更改元素的Z轴。;
10.3.5 - 浏览器支持

11

第十一章：3D转换
11.1 - 常规3D效果——翻转 R
11.1.1 - rotateX()方法：围绕X轴旋转一个给定的度数。 1
11.1.2 - rotateY()方法：围绕Y轴旋转一个给定的度。 1
11.2 - 转换属性 R
11.2.1 - transform-style 指定嵌套元素是怎样在三维空间中呈现。 R
11.2.1.1 - 语法：transform-style: flat|preserve-3d;
11.2.1.1.1 - flat 表示所有“子元素”在2D平面呈现（默认）。
11.2.1.1.2 - preserve-3d 表示所有“子元素”在3D空间中呈现。(定义了该属性的元素，opactity值不能少小1)
11.2.2 - Perspective 元素距离视图的距离（景深），以像素计。定义在3D元素的父级上。 R
11.2.2.1 - 默认值为none，与 0 相同。不设置透视。
11.2.2.2 - 它是一个元素的子元素，透视图，而不是元素本身。
11.2.3 - Perspective- origin 规定3D元素的底部位置（景深基点） R
11.2.4 - transform-origin 旋转的基点 详解
11.2.5 - backface-visibility 定义元素在不面对屏幕时是否可见。
11.3 - 其它3D 转换方法 R
11.3.1 - rotateZ()方法：围绕Z轴旋转一个给定的度。[效果类似2D的rotate()方法]。 1
11.3.2 - rotate3d(x,y,z,angle) 定义3D旋转,同时多个方向旋转给定度数 [x,y,z的值为0或1，angle为度数] 1
11.3.3 - translateX() 沿X轴位移，与2D同用。 1
11.3.4 - translateY() 沿Y轴位移，与2D同用。 1
11.3.5 - translateZ() 沿Z轴位移，仅3D有，近大远小。 1
11.3.6 - translate3d(x,y,z) 定义3D转化，分别沿三个轴位移。 1
11.3.7 - scaleX() 沿X轴缩放，与2D同用。 1
11.3.8 - scaleY() 沿Y轴缩放，与2D同用。 1
11.3.9 - scaleZ() 沿Z轴缩放，仅3D有，实际看不到效果。 1
11.3.10 - scale3d(x,y,z) 定义3D转化，分别沿三个轴位移，z轴看不到效果，实际效果和2D的scale(x,y)一样。 1
11.4 - 实例
11.4.1 - 3D盒子(模仿纸盒折叠方式) 1 2 3
11.4.2 - 3D盒子(另一种方式) 1
11.4.3 - 神奇魔方 1
11.4.4 - 3D图片翻转切换 1 2 3
11.4.3 - 3D小盒子图片切换 1 2
11.5 - 浏览器支持

12

第十二章：CSS3动画
12.1 - 关键帧——keyFrames R
12.1.1 - 类似于flash，只需指明两个状态，之间的过程由计算机自动计算
12.1.2 - 关键帧的时间单位
12.1.2.1 - 数字：0%、25%、100%等
12.1.2.2 - 字符：from(0%)、to(100%)
12.1.3 - 格式
@keyframes 动画名称
{
	动画状态
}
例： 
@keyframes  miaov_test
{
	from { background:red; }
	to { background:green; }
}
可以只有to 1
12.2 - animate——调用动画 R
12.2.0 - animation 所有动画属性的简写属性，除了 animation-play-state 属性。 R
12.2.0.1 - 语法
animation: name duration timing-function delay iteration-count direction;
12.2.1 - 必要属性
12.2.1.1 - animation-name 动画名称（关键帧名称）
12.2.1.2 - animation-duration 动画完成一个周期所花费的时间
12.2.1.3 - 例： 1 
-webkit-animation-name: 'miaov';
-webkit-animation-duration: 4s;
12.2.2 - 可选属性
12.2.2.1 - animation-timing-function 动画运动形式，默认是 "ease"。 R
12.2.2.1.1 - linear 匀速。
12.2.2.1.2 - ease 缓冲。
12.2.2.1.3 - ease-in 由慢到快。 1
12.2.2.1.4 - ease-out 由快到慢。
12.2.2.1.5 - ease-in-out 由慢到快再到慢。
12.2.2.1.5 - cubic-bezier(number, number, number, number)： 特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内 url
12.2.2.2 - animation-delay 动画延迟(只是第一次) R
12.2.2.2.1 - 允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画。
12.2.2.3 - animation-iteration-count 重复次数(infinite为无限次) 1
12.2.2.4 - animation-direction 播放前重置。默认是 "normal"。 R
12.2.2.4.1 - normal 默认值。动画按正常播放。 1
12.2.2.4.2 - reverse 动画反向播放。
12.2.2.4.3 - alternate 动画在奇数次正向播放，在偶数次反向播放。 1
12.2.2.4.4 - alternate-reverse 动画在奇数次正向播放，在偶数次反向播放。
12.2.2.5 - animation-play-state 播放状态（ running 播放 和paused 暂停 ） 1
12.2.2.6 - animation-fill-mode 规定动画在播放之前或之后，其动画效果是否可见。 W 详解
12.2.2.6.1 - 语法： animation-fill-mode : none | forwards | backwards | both;
12.2.2.6.2 - none 不改变默认行为。 1
12.2.2.6.3 - forwards 当动画完成后，保持最后一个属性值（即：最后一个关键帧的样子）。 1
12.2.2.6.4 - backwards 在 animation-delay 所指定的一段时间时，在动画显示之前，应用开始属性值（即：第一个关键帧的样子）。 1 2
12.2.2.6.4 - both 向前和向后填充模式都被应用。 1
12.2.3 - animate和JS结合 1
12.2.3.1 - JS添加动画的方式
12.2.3.1.1 - 在class里加入animation的各种属性，直接元素增加class
12.2.3.1.2 - 直接给元素加-webkit-animation-xxx样式
12.2.3.2 - 动画完成事件 1
12.2.3.2.1 - Webkit内核：
obj.addEventListener('webkitAnimationEnd', function (){}, false);
12.2.3.2.2 - firefox：
obj.addEventListener('nimationEnd', function (){}, false);
12.3 - 实例
12.3.1 - 无缝滚动 1
12.3.2 - 折纸 1
12.3.2.1 - 解析过程：布局 1 1 动画效果 1 1
12.4 - 收集动画效果
12.4.1 - Animate.css 一款强大的预设css3动画库 1
12.5 - 浏览器支持
共 4 个阶段，15 章节，755 小节知识点。