如果說XHTML已經開始尋求取代HTML,那麼HTML5的實用性在於，它將兩種語法整合在一起，採用同樣有效的方式來表達HTML的抽象DOM表示。HTML5規範結合了HTML4，XHTML1以及DOM級別2HTML，併進行了相應的更新。 HTML5取代XHTML 1成為HTML規範的XML序列化格式。 ...
如果說XHTML已經開始尋求取代HTML,那麼HTML5的實用性在於，它將兩種語法整合在一起，採用同樣有效的方式來表達HTML的抽象DOM表示。HTML5規範結合了HTML4，XHTML1以及DOM級別2HTML，併進行了相應的更新。
HTML5取代XHTML 1成為HTML規範的XML序列化格式。開發人員既可以使用寬鬆的HTML語法，也可以使用嚴格的XML語法來設定HTML5文檔的格式。
HTML5包含以下新增和更新功能：
1. 新增了一種HTML文檔類型：<DOCTYPE html>
2. 新增了一些結構化標記的元素(<header>，<nav>,<footer>,<section>等)
3. 向後相容的HTML和XHTML分析規則
4. 新增了用於多媒體內容的<audio>和<vidio>標記元素
5. 更多的輸入元素類型值，允許本地的日期選擇，時間，顏色和數字
6. 從HTML中刪除了框架frame（但是ifame保留了，對它進行了沙盒sandbox處理）
7. 用於二維繪圖，媒體播放，媒體類型註冊，拖放以及跨文檔消息傳輸的API
8. 用於實現離線瀏覽的Web應用程式緩存
一、繪畫canvas元素
<canvas>定義圖形,繪製路徑，矩形，圓形，字元以及添加圖像的方法 。
首先創建canvas元素，並規定元素的id、寬度和高度撒的：
<canvas id="myCanvas" width="200" height="100"></canvas>
然後通過javas來繪製。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");
getContext("2d") 對象是內建的 HTML5 對象，擁有多種繪製路徑、矩形、圓形、字元以及添加圖像的方法。
下麵的兩行代碼繪製一個紅色的矩形：
cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75);
fillStyle 方法將其染成紅色，fillRect 方法規定了形狀、位置和尺寸。
下麵的兩行代碼繪製一條直線：
cxt.moveTo(100,100);
cxt.lineTo(200,200);
下麵的一行代碼是畫一個圓：
cxt.arc(70,18,15,0,Math.PI*2,false);
這些屬性值分別對應的是什麼，70,18分別是X軸和Y軸，15是這個圓的半徑，0是角度,Math.PI*2是圓周率，false代表順時針而true是逆時針。
顏色的漸變效果也是可以實現的：
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
</script>
還有一些其他效果:
曲線quadraticCurreTo
字體fillText
二、音頻audio和視頻video
Video也支持多個source元素，鏈接到不同的視頻文件，瀏覽器將使用第一個可識別的格式
屬性值：
autoplay=”autoplay”就緒後馬上播放
loop=“loop”播放完再次播放
preload="預載入"
muted="靜音"
volume-=0.1音量減
volume+=0.1音量加
currentTime+=10 快進10秒
currentTime-=10 快退10秒
playbackRate=1 加速播放 （預設的播放速度）
audio的屬性值和video的一樣
三、存儲
HTML5 提供了兩種在客戶端存儲數據的新方法：
localStorage - 沒有時間限制的數據存儲
localStorage 方法存儲的數據沒有時間限制。第二天、第二周或下一年之後，數據依然可用。
sessionStorage - 針對一個 session 的數據存儲
sessionStorage 方法針對一個 session 進行數據存儲。當用戶關閉瀏覽器視窗後，數據會被刪除。
四、語意化標簽
<article>標簽定義外部的內容（結構元素）
<aside>定義頁面內容之外的內容。 aside的內容與article的內容相關。（結構元素）
<figure>定義一組媒介內容的分組，以及它們的標題。（結構元素）
<section>標簽定義文檔中的節（section，區段）。比如章節，頁眉，頁腳或文檔中的其他部分（結構元素）
五、新的表單類型
1、email
email 類型用於應該包含 e-mail 地址的輸入域。在提交表單時，會自動驗證 email 域的值。
E-mail: <input type="email" name="user_email" />
2、url
url 類型用於應該包含 URL 地址的輸入域。在提交表單時，會自動驗證 url 域的值。
Homepage: <input type="url" name="user_url" />
3、number
number 類型用於應該包含數值的輸入域。還能夠設定對所接受的數字的限定：
Points: <input type="number" name="points" min="1" max="10" />
4、range
range 類型用於應該包含一定範圍內數字值的輸入域。
range 類型顯示為滑動條。還能夠設定對所接受的數字的限定：
<input type="range" name="points" min="1" max="10" />
5、Date pickers (date, month, week, time, datetime, datetime-local)
HTML5 擁有多個可供選取日期和時間的新輸入類型
Date: <input type="date" name="user_date" />
6、search
search 類型用於搜索域，比如站點搜索或 Google 搜索。search 域顯示為常規的文本域。
7、color顏色的選擇
