w3c-链接：http://www.w3school.com.cn/html5/index.asp
---<!DOCTYPE HTML>作用：
链接：http://i.wanz.im/2010/05/28/why_doctype_html/
规范ie解析方式
<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。
<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
<!DOCTYPE> 声明没有结束标签。
---视频：
<video src="movie.ogg" width="320" height="240" controls="controls">
Your browser does not support the video tag.
</video>
control 属性供添加播放、暂停和音量控件。
<video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的：
------
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式：
---
<video> 标签的属性：
autoplay
controls
height
loop
preload
src
width
方法
play()
pause()
load()
canPlayType
---音频：
<audio src="song.ogg" controls="controls">
Your browser does not support the audio tag.
</audio>
---
<audio controls="controls">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
---
autoplay
controls
loop
preload
src
---拖放：
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
设置元素为可拖放：<img draggable="true" />
拖动什么：ondragstart="drag(event)"
ev.dataTransfer.setData("id",ev.target.id);//设置被拖数据的数据
放到何处：ondragover="allowDrop(event)"
ev.preventDefault();//避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
进行放置：ondrop="drop(event)"
ev.preventDefault();
var data=ev.dataTransfer.getData("id");//获得被拖的数据
ev.target.appendChild(document.getElementById(data));
---canvas画布：
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：
<canvas id="myCanvas" width="200" height="100"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");//创建 context 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);//红色的矩形
cxt.moveTo(10,10);
cxt.lineTo(150,50);//画直线
cxt.lineTo(10,50);
cxt.stroke();
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);//画圆
cxt.closePath();
cxt.fill();
var grd=cxt.createLinearGradient(0,0,175,50);//渐变
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
var img=new Image()
img.src="flower.png"
cxt.drawImage(img,0,0);//把图像画在画布上。。。
</script>
---SVG可伸缩矢量图形：
SVG 是一种使用 XML 描述 2D 图形的语言。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
---位置：
HTML5 Geolocation API 用于获得用户的地理位置。
getCurrentPosition() 方法来获得用户的位置
coords.latitude 十进制数的纬度
coords.longitude 十进制数的经度
coords.accuracy 位置精度
coords.altitude 海拔，海平面以上以米计
coords.altitudeAccuracy 位置的海拔精度
coords.heading 方向，从正北开始以度计
coords.speed 速度，以米/每秒计
timestamp 响应的日期/时间
watchPosition() - 返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上的 GPS）。
clearWatch() - 停止 watchPosition() 方法
---web存储：
HTML5 提供了两种在客户端存储数据的新方法：
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储
<script type="text/javascript">
if (localStorage.pagecount)
{
localStorage.pagecount=Number(localStorage.pagecount) +1;
}
else
{
localStorage.pagecount=1;
}
document.write("Visits "+ localStorage.pagecount + " time(s).");
</script>
---应用程序缓存：
应用程序缓存为应用带来三个优势：
离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
---后台的 JavaScript：
web worker 是运行在后台的 JavaScript，不会影响页面的性能。
<script>
var w;
function startWorker()
{
if(typeof(Worker)!=="undefined")
{
if(typeof(w)=="undefined")
{
w=new Worker("/example/html5/demo_workers.js");
}
w.onmessage = function (event) { //事件监听器
document.getElementById("result").innerHTML=event.data;
};
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers...";
}
}
function stopWorker()
{
w.terminate();//停止
}
</script>
postMessage() 方法 - 它用于向 HTML 页面传回一段消息。
---：
HTML5 服务器发送事件（server-sent event）允许网页获得来自服务器的更新。
Server-Sent 事件 - 单向消息传递
<script>
if(typeof(EventSource)!=="undefined")
{
var source=new EventSource("/example/html5/demo_sse.php");//url
source.onmessage=function(event)//监听
{
document.getElementById("result").innerHTML+=event.data + "<br />";
};
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser does not support server-sent events...";
}
</script>
EventSource 对象用于接收服务器发送事件通知：
发送数据更新的服务器：把报头 "Content-Type" 设置为 "text/event-stream"
onopen 当通往服务器的连接被打开
onmessage 当接收到消息
onerror 当错误发生