+概述：HTML5是W3C 与 WHATWG 合作的结果。
+新特性：
1）canvas：用于绘画；
2）video/audio：用于媒体播放；
3）web离线存储；
4）新的特殊内容元素：article、footer、header、nav、section
5）新的表单控件：calendar、date、time、email、url、search
+ <video src= controls=“controls”>
用于播放视频，支持的视频格式有：Ogg,MPEG4,WebM。但不是所有浏览器支持；
* 属性：
-> 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
+ <audio src="song.ogg" controls="controls">
播放音频：
* 属性：同Video
+ Drag/drop
用于对元素的拖放，是HTML5的标准组成，任何元素都能拖放。
* 使用步骤：
1）设置元素为可拖放。如：<img draggable="true" />
2）拖动什么。规定当元素拖动时的回调方法ondragstart和setData（）。
3）放到何处。在ondragover事件中规定放置何处。默认无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。通过调用 ondragover 事件的 event.preventDefault（） 方法；
4）进行放置。ondrop，当放置被拖元素时，会发生drop事件。
canvas：画布，使用JavaScript在网页上绘制图像；
1）创建：<canvas id="myCanvas" width="200" height=“100"></canvas>
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（） 方法来获得用户的位置。
web存储
两种新方法：
1）localStorage：没有时间限制的数据存储
2）sessionStorage：针对一个session的数据存储；当用户关闭浏览器后，数据会被删除。
【注：这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。】
Application Cache:应用程序缓存。
* 三个优势：
->离线浏览；
->速度：已缓存资源加载更快；
->减小服务器负载：浏览器将只从服务器下载更新过或更改过的资源；
1）manifest：在html标签中包含manifest标签即可，<html manifest=“demo.appcache">
【注意：每个指定了 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事件中取出数据。
注意：服务器端须将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域应该拥有自动完成功能，适用元素<input>下的：text, search, url, telephone, email, password, date pickers, range 以及 color
<form action="demo_form.asp" method="get" autocomplete=“on">
<input type="email" name="email" autocomplete="off" />
—> autofocus：规定在页面加载时，域自动获得焦点。
<input type="text" name="user_name" autofocus="autofocus" />
—> form：规定输入域所属的是一个或个全表单
<input type="text" name="lname" form="user_form" />
—> form overrides（formaction,formenctype,formmethod,formtarget）：即重写这些属性。适用于<input>下的：submit和image,如：
<input type="submit" formaction="demo_admin.asp" value="sure" />
—> height/width:规定用于 image 类型的 input 标签的图像高度和宽度。
—> list：规定输入域的 datalist。datalist 是输入域的选项列表。
—> min/max/step：用于为包含数字或日期的 input 类型规定限定（约束），适用于<input>下的：data pickers、number、range
—> multiple：规定输入域中可选择多个值。适用于<input>下的：email和file
—> pattern（regexp）：规定用于验证 input 域的模式（pattern）。适用于<input>下的：text, search, url, telephone, email 以及 password。
—> placeholder：提供一种提示（hint），描述输入域所期待的值。
—> required：规定必须在提交之前填写输入域（不能为空）。
<input type="text" name="usr_name" required="required" />
—> novalidate：规定在提交表单时不应该验证 form 或 input 域。适用于<input>下的：text, search, url, telephone, email, password, date pickers, range 以及 color.
<form action="demo_form.asp" method="get" novalidate=“true">
+ Form元素新增元素：
—> datalist：输入框下带一个选项列表，列表是通过 datalist 内的 option 元素创建的。
【注意：option 元素永远都要设置 value 属性。】
—> keygen：密钥对生成器（key-pair generator），是提供一种验证用户的可靠方法，当提交表单时，会生成两个键，一个是私钥，一个公钥。
私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。但各浏览器支持度都不是很好。
—> output：用于不同类型的输出，比如计算或脚本输出。
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h59963.shtml
