HTML5簡易總結
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> varc=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定義標題；
HTML5簡易總結