1.video标签（支持Ogg MPEG4 WebM） IE9 9+ 属性：src width height loop controls autoplay preload;
方法：play() pause() load() 其他属性 事件等。在所有属性中，只有 videoWidth 和 videoHeight 属性是立即可用的。在视频的元数据已加载后，其他属性才可用。
2.audio标签（支持Ogg MP3 Mav）IE9 9+ 属性：autoplay controls loop preload src.
3.拖放：
function allowDrop(ev) { ev.preventDefault(); //阻止默认，否则无法放置在别的元素中 } function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); //设置被拖数据的数据类型和值 （可以自己制定任意值） } function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text");//获取被拖数据，对应setData() ev.target.appendChild(document.getElementById(data)); } -------------------------------------------------------------------------------- <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69" />
//ondragstart调用函数，通过setData()设置被拖动的数据;
//ondragover规定在何处放置被拖动的元素，要解除默认设置；
//ondrop 当放置被拖数据时，发生drop事件，调用函数。（可以获取被拖数据并添加到放置元素中）
4.Canvas:
<canvas id="myCanvas" width="200" height="100"></canvas> --------------------------------------------------------------------------- <script> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d");//内建的HTML5对象，拥有多种绘制方法； cxt.fillStyle="#FF0000"; //染色 cxt.fillRect(0,0,150,75);// 前两位是起始位置坐标，后两位是大小 </script> cxt.drawImage(img,0,0);//可以将图像放置到画布；
5.SVG标签（可伸缩矢量图形）（谷歌地图）
可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
6.地理定位：Geolocation
使用 getCurrentPosition() 方法来获得用户的位置。
watchPosition() - 返回用户的当前位置，并继续返回用户移动时的更新位置
7.web存储：HTML5 使用 JavaScript 来存储和访问数据。
if (localStorage.pagecount) { localStorage.pagecount=Number(localStorage.pagecount) +1; } else { localStorage.pagecount=1; } document.write("Visits "+ localStorage.pagecount + " time(s)."); 对用户访问页面次数进行计算
sessionStorage同理，只是关闭浏览器后数据清空；
8.应用缓存 Cache Manifest(可以脱机浏览，也可减轻服务器负担）IE不支持：
在html标签内包含manifest属性如（<html manifest=‘demo.appcache‘>）
manifest 文件可分为三个部分：
CACHE MANIFEST //文件将在首次下载后进行缓存 # 2012-02-21 v1.0.0 /theme.css /logo.gif /main.js NETWORK: //文件需要与服务器的连接，且不会被缓存 login.asp FALLBACK://文件规定当页面无法访问时的回退页面（比如 404 页面） /html5/ /404.html
一旦应用被缓存，它就会保持缓存直到发生下列情况(用户清空缓存，manifest文件被修改 程序更新）
更新注释行#中的日期和版本号是一种使浏览器重新缓存文件的办法。
9.Web Worker：在后台运行js，不影响页面性能（可用于大型计算）
<p>Count numbers: <output id="result"></output></p> <button onclick="startWorker()">Start Worker</button> <button onclick="stopWorker()">Stop Worker</button> --------------------------------------------------------------------- var w; function startWorker() { if(typeof(Worker)!=="undefined") { if(typeof(w)=="undefined") { w=new Worker("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>
10.服务器发送事件，server-sent event SSE
<div id="result"></div> ------------------------------------------------------------------------------ if(typeof(EventSource)!=="undefined") {//EventSource 对象用于接收服务器发送事件通知 var source=new EventSource("/example/html5/demo_sse.php"); //每接收到一次更新，就会发生 onmessage 事件 source.onmessage=function(event) { document.getElementById("result").innerHTML+=event.data + "<br />"; }; } else { document.getElementById("result").innerHTML="抱歉，您的浏览器不支持 server-sent 事件 ..."; }
其它事件：onopen onmessage onerror
11.HTML5的Input类型：
email url
number: <input type="number" name="points" min="1" max="10" />
range :<input type="range" name="points" min="1" max="10" />
date month week time datetime datetime-local
search
HTML5的表单元素：
datalist:输入域的选项列表
Webpage: <input type="url" list="url_list" name="link" /> ////用list属性引用datalist的id <datalist id="url_list"> <option label="W3School" value="http://www.W3School.com.cn" /> <option label="Google" value="http://www.google.com" /> <option label="Microsoft" value="http://www.microsoft.com" /> </datalist>
keygen:
keygen 元素的作用是提供一种验证用户的可靠方法。
keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。
私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。
目前，浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。
output:表单中用于不同类型的输出，比如计算或脚本输出；
HTML5的表单属性：
autocomplete：自动提示；
autofocus:自动聚焦；
form:规定输入域所属的一个或多个表单 （Last name: <input type="text" name="lname" form="user_form" />）指向fom的id;
form的重写属性：（formaction formenctype formmethod formnovalidate formtarget）
<form action="demo_form.asp" method="get" id="user_form"> E-mail: <input type="email" name="userid" /><br /> <input type="submit" value="Submit" /> <br /> <input type="submit" formaction="demo_admin.asp" value="Submit as admin" /> <br /> <input type="submit" formnovalidate="true" value="Submit without validation" /> <br /> </form> //可以创建不同的提交按钮
height和width:<input type="image" src="img_submit.gif"width="99"height="99"/>
list属性：规定输入域的datalist，适用于text search url telephone email date number range color;
min max和step:Points: <input type="number" name="points"min="0"max="10"step="3"/>
multiple属性：Select images: <input type="file" name="img"multiple="multiple"/>可以选取多个文件，也适用于email
novalidate属性：不验证；
pattern属性：验证input的模式（正则）
Country code: <input type="text" name="country_code"
pattern="[A-z]{3}" title="Three letter country code" />
placeholder:提示；
required：不能为空；
12.HTML语义元素
section:标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。(一段内容）
article:一段独立的内容；
nav:导航；
aside:定义主区域之外的内容（比如侧边栏）,应与主区域内容相关；
header:元素注意用于定义内容的介绍展示区域.(可以使用多个header元素）;
footer:一个页脚通常包含文档的作者，著作权信息，链接的使用条款，联系信息等;
figure:规定独立的流内容；（图像，图标，照片，代码等），figcaption定义标题；
