最近看了一些HTML5的基础知识，写了一些小案例，记录一下，方便查找。
1、新建的HTML5页面中显著的变化是：DOCTYPE声明变简洁(<!DOCTYPE html>) / <meta content="charset=utf-8"/>
2、新增的元素：
结构元素：
section(要存在一个标题，分段时使用)
article(整块使用)
aside
header
hgroup
footer
address
nav(可在一个页面中多处使用，不要用menu标签代替nav)
figure
其他元素：
video
audio
embed
mark
progress
meter
time
ruby
rt
rp
wbr
canvas
command
details
datalist
datagrid
keygen
output
source
menu
small标识小字印刷体的元素
input元素：
email
url
number
range
search
date
datetime
datetimelocal
time
month
week
ValueAsNumber
3、废除的元素：
能使用CSS替代的元素：basefont、big、center、font、s、tt、u等等
不再使用frame框架
只有部分浏览器支持的元素
其他被废除的元素
4、新增的表单相关属性：
formaction可以将一个表单提交到多个Action
formmethod提交方式
formenctype对表单元素编码方式
formtarget打开方式
autofocus自动获取焦点
required必填项(提示的文字是固定的)
control
datalist可输入的下拉框
placeholder在输入前显示提示文字
pattern填入正则表达式，方便判断
selectionDirection用户选择的方向
5、全局属性：
contentEditable属性：该元素是否可编辑，是Boolean类型，若未指定值则默认继承父元素的可编辑状态
designMode属性：
hidden属性：
spellcheck属性：对input和textarea的标签的内容进行语法检查
tabindex属性：tab键的顺序
6、网页编排规则：
显示编排内容区域块
隐示编排内容区域块
标题分级
不同区域块使用相同级别的标题
7、Range对象的基本概念：一个Range对象代表页面上的一段连续区域，通过Range对象可以获取或修改网页上的任何区域。
Selection
Range
SelectNode
SelectNodeContents
setStart/setEnd/setStart/setBefore
cloneRange/cloneContents
extractContents
insertNode
compareBoundaryPoints
collapse
detach
8、Canvas绘制图形：
lineTo()
moveTo()
bezierCurveTo() 贝塞尔曲线
createLinearGradient() 颜色渐变
createRadialGradient() 径向渐变，绘制出的图形的边线是曲线
globalCompositeOperation() 绘制组合图形
shadowOffsetX/shadowOffsetY/shadowColor/shadowBlur 绘制阴影图形
drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh)(img对象,原图被复制区域的起始坐标和宽高,复制区域在画布上的起始坐标和宽高)
9、Web Storage/ Web SQL/ IndxedDB：
HTML5新增的非常重要的功能是可以在客户端本地保存数据的WebStorage功能，之前可以使用Cookies在客户端保存简单的用户信息，但是由于Cookies会有些限制：Cookies的大小不能超过4KB;Cookies会随请求一起发送，浪费带宽;正确操纵Cookies也是很困难的，所以更倾向于使用Web Storage，它可以存储更多的数据。
Web Storage有两种形式：SessionStorage和LocalStorage，前者只存储在当前的页面或者窗口对象中，对其他页面不可见，当页面关闭后数据就会丢失；后者保存数据更持久，即使浏览器窗口已经关闭，数据也会保存下来并可用于所有同源网页或者窗口的加载(即用户重新打开浏览器访问相同域名，并且协议和端口一致的网址，将仍然可以有效访问LocalStorage存储的数据)。
如果要在客户端存储大量数据，Web Storage显然不能满足需求，此时可以考虑使用Web SQL(关系型)和IndxedDB(非关系型)两种客户端的轻量级数据库保存数据，前者在本地建了一个SQLLite数据库，操作数据库的对象有：
var db = openDatabase(shortName,version,displayName,maxSize)//打开数据库连接，若没有此数据库则创建
db.transaction(function(tx){})//开启事务,代码要写在事务中
tx.executeSql("")//执行的SQL语句
10、应用缓存(Application Cache)：主要用于缓存一些静态资源,LocalStorage用来缓存一些数据。
使用方法：通过创建一个.appcache 类型的文件，称为缓存清单(cache manifest)文件，并添加manifest属性<html manifest="index.appcache">
Manifest文件类型：
1)、CACHE MANIFEST：在此标题下列出的文件将在首次下载后进行缓存
2)、NETWORK：在此标题下列出的文件需要与服务器的连接，且不会被缓存
3)、FALLBACK：在此标题下列出的文件规定当页面无法访问时的回退页面(比如404页面)
有些注意事项：http://www.tuicool.com/articles/zmUrU3r
11、Web Workers：
Web Workers为WEB前端网页上的脚本提供了一种能在后台进程中运行的方法。一旦它被创建，Web Workers就可以通过postMessage()向任务池发送任务请求，执行完之后再通过postMessage()返回消息给创建者指定的事件处理程序(通过onmessage进行捕获)。Web Workers进程能够在不影响用户界面的情况下处理任务，并且，它还可以使用XMLHttpRequest来处理I/O，无论responseXML和channel属性是否为null。
注意：通常，后台进程（包括web workers进程）不能对DOM进行操作。如果希望后台程序处理的结果能够改变DOM，只能通过返回消息给创建者的回调函数进行处理。