本文通過對w3schoolHTML5基礎教程，整理出比較常見的卻又容易遺忘或者忽略的HTML5相關知識點。本文的標題順序與w3school中的HTML5基礎教程標題順序保持一致。適合翻閱和複習。
1.HTML 5 視頻
（1）視頻格式
當前，video 元素支持三種視頻格式：
（2）一種兼容的做法
video 元素允許多個 source 元素。source 元素可以鏈接不同的視頻文件。瀏覽器將使用第一個可識別的格式：
<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>（3）HTML5 - 方法、屬性以及事件
下面列出了大多數瀏覽器支持的視頻方法、屬性和事件：
2.HTML 5 音頻
（1）音頻格式
當前，audio 元素支持三種音頻格式：
（2）一種兼容的做法
audio 元素允許多個 source 元素。source 元素可以鏈接不同的音頻文件。瀏覽器將使用第一個可識別的格式：
<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>（3）<audio> 標籤的屬性
3.HTML 5 拖放
（1）設置元素爲可拖放
首先，爲了使元素可拖動，把 draggable 屬性設置爲 true ：
<img draggable="true" />（2）拖動什麼 - ondragstart 和 setData()
ondragstart 屬性調用了一個函數，drag(event)，它規定了被拖動的數據。
dataTransfer.setData() 方法設置被拖數據的數據類型和值：
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}（3）放到何處 - ondragover
ondragover 事件規定在何處放置被拖動的數據。
默認地，無法將數據/元素放置到其他元素中。如果需要設置允許放置，我們必須阻止對元素的默認處理方式。
這要通過調用 ondragover 事件的 event.preventDefault() 方法：
event.preventDefault()（4）進行放置 - ondrop
function drop(ev){
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}4.HTML 5 Canvas
具體屬性和方法調用查看：HTML 5 Canvas 參考手冊
（1）創建 Canvas 元素
<canvas id="myCanvas" width="200" height="100"></canvas>（2）通過 JavaScript 來繪製
canvas 元素本身是沒有繪圖能力的。所有的繪製工作必須在 JavaScript 內部完成：
<script type="text/javascript">
// 拿到canvas（必須）
var c=document.getElementById("myCanvas");
// 創建畫布（必須）
var cxt=c.getContext("2d");
// 開始繪製
cxt.fillStyle="#FF0000";
// 在畫布上繪製 150x75 的矩形，從左上角開始 (0,0)
cxt.fillRect(0,0,150,75);
</script>5.HTML5 內聯 SVG
具體屬性和方法調用查看：SVG 參考手冊
（1）什麼是SVG？
- SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
- SVG 用於定義用於網絡的基於矢量的圖形
- SVG 使用XML 格式定義圖形
- SVG 是萬維網聯盟的標準
（2）SVG 的優勢
- SVG 圖像可通過文本編輯器來創建和修改
- SVG 圖像可被搜索、索引、腳本化或壓縮
- SVG 是可伸縮的
- SVG圖像可在任何的分辨率下被高質量地打印
- SVG 可在圖像質量不下降的情況下被放大
（3）把 SVG 直接嵌入 HTML 頁面
實例：
<!DOCTYPE html>
<html>
<body>
<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>
</body>
</html>6.HTML5 地理定位
（1）HTML5 - 使用地理定位
實例：
<script>
var x=document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
}
else {
x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position) {
x.innerHTML="Latitude: " + position.coords.latitude +
"<br />Longitude: " + position.coords.longitude;
}
</script>（2）getCurrentPosition() 方法 - 返回數據
7.HTML 5 Web 存儲
（1）localStorage 方法（沒有時間限制的數據存儲）
localStorage 方法存儲的數據沒有時間限制，需同域名才能訪問得到，實例：
<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>（2）sessionStorage 方法（針對一個 session 的數據存儲）
sessionStorage 方法針對一個 session 進行數據存儲。當用戶關閉瀏覽器窗口後，數據會被刪除。實例：
<script type="text/javascript">
if (sessionStorage.pagecount) {
sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
}
else {
sessionStorage.pagecount=1;
}
document.write("Visits "+sessionStorage.pagecount+" time(s) this session.");
</script>8.HTML 5 應用程序緩存
（1）Cache Manifest 基礎
如需啓用應用程序緩存，請在文檔的 標籤中包含 manifest 屬性：
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>（2）Manifest 文件
- CACHE MANIFEST - 在此標題下列出的文件將在首次下載後進行緩存
- NETWORK - 在此標題下列出的文件需要與服務器的連接，且不會被緩存
- FALLBACK - 在此標題下列出的文件規定當頁面無法訪問時的回退頁面（比如 404 頁面）
9.HTML 5 Web Workers
（1）什麼是 Web Worker？
web worker 是運行在後臺的 JavaScript，獨立於其他腳本，不會影響頁面的性能。您可以繼續做任何願意做的事情：點擊、選取內容等等，而此時 web worker 在後臺運行。
（2）檢測 Web Worker 支持
if(typeof(Worker)!=="undefined") {
// Yes! Web worker support!
// Some code.....
}
else {
// Sorry! No Web Worker support..
}（3）創建 Web Worker 對象
if(typeof(w)=="undefined") {
w=new Worker("demo_workers.js");
}（4）終止 Web Worker
如需終止 web worker，並釋放瀏覽器/計算機資源，請使用 terminate() 方法：
w.terminate();10.HTML 5 服務器發送事件
（1）Server-Sent 事件 - 單向消息傳遞
Server-Sent 事件指的是網頁自動獲取來自服務器的更新。
（2）接收 Server-Sent 事件通知
var source=new EventSource("demo_sse.php");
source.onmessage=function(event){
document.getElementById("result").innerHTML+=event.data + "<br />";
};11.HTML5 Input 類型
HTML5 新的 Input 類型：
12.HTML5 表單元素
HTML5 的新的表單元素：
13.HTML5 表單屬性
HTML5 的新的表單屬性：
