什么是 HTML5？
HTML5 將成為 HTML、XHTML 以及 HTML DOM 的新標准。
HTML 的上一個版本誕生於 1999 年。自從那以后，Web 世界已經經歷了巨變。
HTML5 仍處於完善之中。然而，大部分現代瀏覽器已經具備了某些 HTML5 支持。
HTML5 是如何起步的？
HTML5 是 W3C 與 WHATWG 合作的結果。
編者注：W3C 指 World Wide Web Consortium，萬維網聯盟。
編者注：WHATWG 指 Web Hypertext Application Technology Working Group。
WHATWG 致力於 web 表單和應用程序，而 W3C 專注於 XHTML 2.0。在 2006 年，雙方決定進行合作，來創建一個新版本的 HTML。
為 HTML5 建立的一些規則：
1.新特性應該基於 HTML、CSS、DOM 以及 JavaScript。
2.減少對外部插件的需求（比如 Flash）
3.更優秀的錯誤處理
4.更多取代腳本的標記
5.HTML5 應該獨立於設備
6.開發進程應對公眾透明
新特性
HTML5 中的一些有趣的新特性：
1.用於繪畫的 canvas 元素
2.用於媒介回放的 video 和 audio 元素
3.對本地離線存儲的更好的支持
4.新的特殊內容元素，比如 article、footer、header、nav、section
5.新的表單控件，比如 calendar、date、time、email、url、search
瀏覽器支持
最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 將支持某些 HTML5 特性。
HTML5 <video> - 使用 DOM 進行控制
HTML5 <video> 元素同樣擁有方法、屬性和事件。
其中的方法用於播放、暫停以及加載等。其中的屬性（比如時長、音量等）可以被讀取或設置。其中的 DOM 事件能夠通知您，比方說，<video> 元素開始播放、已暫停，已停止，等等。
下例中簡單的方法，向我們演示了如何使用 <video> 元素，讀取並設置屬性，以及如何調用方法。
<!DOCTYPE html> <html> <body> <div style="text-align:center;"> <button onclick="playPause()">播放/暫停</button> <button onclick="makeBig()">大</button> <button onclick="makeNormal()">中</button> <button onclick="makeSmall()">小</button> <br /> <video id="video1" width="420" style="margin-top:15px;"> <source src="/example/html5/mov_bbb.mp4" type="video/mp4" /> <source src="/example/html5/mov_bbb.ogg" type="video/ogg" /> Your browser does not support HTML5 video. </video> </div> <script type="text/javascript"> var myVideo=document.getElementById("video1"); function playPause() { if (myVideo.paused) myVideo.play(); else myVideo.pause(); } function makeBig() { myVideo.width=560; } function makeSmall() { myVideo.width=320; } function makeNormal() { myVideo.width=420; } </script> </body> </html>
HTML 5 拖放
拖放（Drag 和 drop）是 HTML5 標准的組成部分。
拖放
拖放是一種常見的特性，即抓取對象以后拖到另一個位置。
在 HTML5 中，拖放是標准的一部分，任何元素都能夠拖放。
下面的例子是一個簡單的拖放實例：
<!DOCTYPE HTML> <html> <head> <script type="text/javascript"> 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"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <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" /> </body> </html>
拖動什么 - ondragstart 和 setData()
然后，規定當元素被拖動時，會發生什么。
在上面的例子中，ondragstart 屬性調用了一個函數，drag(event)，它規定了被拖動的數據。
dataTransfer.setData() 方法設置被拖數據的數據類型和值：
在這個例子中，數據類型是 "Text"，值是可拖動元素的 id ("drag1")。
放到何處 - ondragover
ondragover 事件規定在何處放置被拖動的數據。
默認地，無法將數據/元素放置到其他元素中。如果需要設置允許放置，我們必須阻止對元素的默認處理方式。
這要通過調用 ondragover 事件的 event.preventDefault() 方法：
進行放置 - ondrop
當放置被拖數據時，會發生 drop 事件。
在上面的例子中，ondrop 屬性調用了一個函數，drop(event)。
調用 preventDefault() 來避免瀏覽器對數據的默認處理（drop 事件的默認行為是以鏈接形式打開）
通過 dataTransfer.getData("Text") 方法獲得被拖的數據。該方法將返回在 setData() 方法中設置為相同類型的任何數據。
被拖數據是被拖元素的 id ("drag1")
把被拖元素追加到放置元素（目標元素）中
HTML 5 Canvas
HTML5 的 canvas 元素使用 JavaScript 在網頁上繪制圖像。
畫布是一個矩形區域，您可以控制其每一像素。
canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。
建 Canvas 元素
向 HTML5 頁面添加 canvas 元素。
規定元素的 id、寬度和高度：
<canvas id="myCanvas" width="200" height="100"></canvas>
通過 JavaScript 來繪制
canvas 元素本身是沒有繪圖能力的。所有的繪制工作必須在 JavaScript 內部完成：
<script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75); </script>
JavaScript 使用 id 來尋找 canvas 元素：
var c=document.getElementById("myCanvas");
然后，創建 context 對象：
var cxt=c.getContext("2d");
---------暫時先寫到這里-----------