+概述：HTML5是W3C 与 WHATWG 合作的结果。
新特性：
1）canvas：用于绘画；
2）video/audio：用于媒体播放；
3）web离线存储；
4）新的特殊内容元素：article、footer、header、nav、section
5）新的表单控件：calendar、date、time、email、url、search
*
- 属性：
-> autoplay=“autoplay”：视频在就绪后马上播放；
-> controls=“controls”:显示控件栏，功能包括：播放、暂停、定位、音量、全屏切换、字幕（如果要可用）、音轨（如果可用）
->width/height：播放器宽高
->loop=“loop”:视频在结束后重新开始
->preload=“preload”：视频在页面加载时进行加载，并预备播放（若使用了autoplay，则无效）
->src=“”：要播放的url; - Dom操作video的方法及事件
方法：play() pause() load() canPlayType
属性：currentSrc currentTime videoWidth/videoHeight duration ended error paused muted seeking volume width/height
事件：play pause progress error timeupdate ended abort empty emptied waiting loadedmetadata
- 属性：同Video
Drag/drop
用于对元素的拖放，是HTML5的标准组成，任何元素都能拖放。
- 使用步骤：
1）设置元素为可拖放。如：
2)拖动什么。规定当元素拖动时的回调方法ondragstart和setData()。
…
function drag(ev){ ev.dataTransfer.setData(“Text",ev.target.id); }
3）放到何处。在ondragover事件中规定放置何处。默认无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。通过调用 ondragover 事件的 event.preventDefault() 方法；
4）进行放置。ondrop，当放置被拖元素时，会发生drop事件。
function drop(ev){
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data)); }
canvas：画布，使用JavaScript在网页上绘制图像；
1）创建：
2）通过javaScript绘制：
【cxt下的方法API类似于java下的Canvas的方法API】
SVG(Scalable Vector Graphics)：可伸缩矢量图形，在放大或改变尺寸的情况下其图形质量不会有损失，用于定义用于网络的基于矢量的图形，可用xml来定义。
1）与其他图像如jpg/gif的优势：
—> 可通过文本编辑器来创建和修改；
—> 可被搜索、索引、脚本化或压缩；
—> 可伸缩的；
—> 可在任何的分辨率下被高质量地打印；
—> 可在图像质量不下降的情况下被放大；
【注：Canvas与SVG的区别】
Canvas：
—> 依赖分辨率
—> 不支持事件处理器
—> 弱的文本渲染能力
—> 能够以 .png 或 .jpg 格式保存结果图像
—> 最适合图像密集型的游戏，其中的许多对象会被频繁重绘
SVG
—> 不依赖分辨率
—> 支持事件处理器
—> 最适合带有大型渲染区域的应用程序（比如谷歌地图）
—> 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
—> 不适合游戏应用
地理定位Geolocation:
Geolocation API 用于获得用户的地理位置。鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。
使用 ：getCurrentPosition() 方法来获得用户的位置。
function getLocation(){
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition); }
else{
x.innerHTML="Geolocation is not supported by this browser.";}
}
web存储
两种新方法：
1）localStorage：没有时间限制的数据存储
2）sessionStorage：针对一个session的数据存储；当用户关闭浏览器后，数据会被删除。
【注：这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。】
Application Cache:应用程序缓存。
- 三个优势：
->离线浏览；
->速度：已缓存资源加载更快；
->减小服务器负载：浏览器将只从服务器下载更新过或更改过的资源；
1）manifest：在html标签中包含manifest标签即可，
【注意：每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）；manifest 文件的建议的文件扩展名是：”.appcache”；manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置。】
包含三个部分：
1）CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
2）NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
3）FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
**Web Worker
**：后台任务。是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。
1)创建：if(typeof(w)=="undefined") { w=new Worker("demo_workers.js"); }
2）监听：w.onmessage=function(event){document.getElementById(“result").innerHTML=event.data;};
3）终止：w.terminate();
【注意：由于web workder位于外部文件中，无法以访问：window对象、document、parent对象】
server-sent event：服务器发送事件，允许网页获得来自服务器的更新。
- 单向消息传递。除了IE外都支持。
1）创建一个EventSource对象，然后规定发送更新的页面的url;
2）每接收一次更新，就会发生onmessage事件
3）在onmessage事件中取出数据。
var source=new EventSource("demo_sse.php");
source.onmessage=function(event) {
document.getElementById("result").innerHTML+=event.data + "
";};
注意：服务器端须将Content-Type设置为text/event-stream】
其他事件：
—> onopen：当与服务器的连接被打开
—> onerror：当错误发生
Input元素新增类型：
—> email：用于应该包含 e-mail 地址的输入域。
—> url：应该包含 URL 地址的输入域。
—> number：用于应该包含数值的输入域(包括max、min、step、value属性)。
—> range：滑动条，包含一定范围内数字值的输入域。(包括max、min、step、value属性)
—> Date pickers：多个可供选取日期和时间的新输入类型：date(日/月/年)、month、week、time(时/分)、datetime(日/月/年/时/分)、datetime-local
—> search：用于搜索域
—> color:
Input/Form新增属性：
—> autocomplete：规定form或input域应该拥有自动完成功能，适用元素下的：text, search, url, telephone, email, password, date pickers, range 以及 color