HTML5教程
什麼是HTML5？
在這裡我不說一些特別難懂的語言，我這裡簡單的解釋一下，如果你學過HTML，那麼就是HTML4，HTML5是針對現有的版本進行了一些豐富，把一些原先常用的標籤進行了統一，還添加了一些以前沒有的新標籤來滿足更復雜的功能，像原先網頁上面的音樂播放器，現在都不需要通過flash插件來實現，僅僅通過HTML5編寫程序來實現，可以說HTML5的出現是一個很大的進步。
給大家介紹一個HTML5學習的技術社區：HTML5伴侶
HTML5現在的侷限？
最大的一個侷限就是還沒有完全支持，支持HTML5的現代瀏覽器：
但是還有些瀏覽器不支持，比如IE9之前的版本。
有些東西需要HTML5來實現，但是不能保證用戶用的瀏覽器都支持HTML5，所以有些功能需要保證兼容性，所以這也是限制HTML5的一個原因。
另外的一個因素就是HTML5在移動端的表現沒有想象中優越，有很多的開發者在移動端做了很多嘗試，尤其是在移動端開發遊戲，在動畫效果的實現上面，流暢度沒有得到很好地的保證，不過隨著移動設備的硬件越來越快，所以在以後HTML5在移動端的劣勢會被掩蓋，當然並不是所有的移動端設備表現的都不好，HTML5在IOS平臺下的表現就很不錯，已經可以成為企業開發的一個選擇，相反android就不盡人意。
HTML5的優勢
HTML5最好的一個優勢就是跨平臺，如果你是開發者，你只要寫一套程序就可以在任何地方運行，PC，移動端都可以，這個大大的節約了開發成本。
另外一個優點就是標準的統一，開發人員不需要再頭疼瀏覽器的兼容性，不過在這之前得保證瀏覽器支持HTML5。
最後一個優點是站在用戶的角度，在移動端你想要用一個APP，你得去下載，每次APP更新或者改版，用戶很反感，用HTML5開發的只需要藉助移動端瀏覽器打開，不需要用戶下載，打開就可以直接用，用戶頭疼的更新問題也不用擔心了。
以上都是我的廢話，希望您不要對此感到反感，接下來我就正式來介紹HTML5。
HTML5新特性：
1.添加了canvas元素，這個元素可以幫助我們實現更炫更棒的動畫效果，HTML5遊戲就是通過這個canvas來實現的場景的渲染。
2.媒介元素，如video和audio元素。
3.本地離線存儲的支持。
4.原先的標籤更加分散和清晰，比如article，footer，header，nav等等。
5.新的表單元素屬性，比如data，time，Email，url，search等。
HTML5視頻
很多視頻的網站都是通過flash插件來播放視頻的，但是HTML5提供了對視頻播放的支持。
Ogg = 帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件
MPEG4 = 帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件
WebM = 帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件
標籤使用
1
2
12
13 瀏覽器不支持html5視頻功能
14
IE9一下不支持video，IE9支持了MPEG4的video元素。
Video的屬性選擇
HTML5音頻
HTML5支持音頻（音樂）的標準，通過audio元素。
音頻格式：
要確保適用於 Safari 瀏覽器，音頻文件必須是 MP3 或 Wav 類型。
標籤使用：
Your browser does not support the audio tag.
IE8 不支持 audio 元素。在 IE 9 中，將提供對 audio 元素的支持。
HTML5 Canvas
Canvas元素可以實現繪製圖形動畫。
Canvas可以說是HTML5裡面最重要的一個標籤了，這個標籤的出現讓遊戲開發更加容易，不過Canvas需要配合JavaScript使用。
元素創建
規定元素的 id、寬度和高度：
這個地方為什麼要定義id屬性呢？如果你對JS的DOM編程有一定了解的話，你就知道通過ID屬性可以獲取一個元素對象，從而可以通過JS來對元素進行操作。
如果你對DOM不熟悉的話，建議你先去看下相關的學習資料。
這裡給你一個DOM學習的電子書下載鏈接：
JavaScript控制Canvas
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 方法規定了形狀、位置和尺寸。
上面的 fillRect 方法擁有參數 (0,0,150,75)。
意思是：在畫布上繪製 150x75 的矩形，從左上角開始 (0,0)。
如下圖所示，畫布的 X 和 Y 座標用於在畫布上對繪畫進行定位。
下面我在 canvas 元素上進行繪畫的更多實例：
實例 - 線條
通過指定從何處開始，在何處結束，來繪製一條線：
JavaScript 代碼：
canvas 元素：
Your browser does not support the canvas element.
實例 - 圓形
通過規定尺寸、顏色和位置，來繪製一個圓：
JavaScript 代碼：
canvas 元素：
Your browser does not support the canvas element.
實例 - 漸變
使用您指定的顏色來繪製漸變背景：
JavaScript 代碼：
canvas 元素：
Your browser does not support the canvas element.
實例 - 圖像
把一幅圖像放置到畫布上：
JavaScript 代碼：
canvas 元素：
Your browser does not support the canvas element.
你看我canvas相比較前幾個標籤來說，解釋說明舉例明顯更多，這也說明canvas標籤的重要性，希望你能好好學習這個標籤。
HTML5 Web存儲
在客戶端存儲數據
HTML5 提供了兩種在客戶端存儲數據的新方法：
localStorage - 沒有時間限制的數據存儲
sessionStorage - 針對一個 session 的數據存儲
之前，這些都是由 cookie 完成的。但是 cookie 不適合大量數據的存儲，因為它們由每個對服務器的請求來傳遞，這使得 cookie 速度很慢而且效率也不高。
在 HTML5 中，數據不是由每個服務器請求傳遞的，而是隻有在請求時使用數據。它使在不影響網站性能的情況下存儲大量數據成為可能。
對於不同的網站，數據存儲於不同的區域，並且一個網站只能訪問其自身的數據。
HTML5 使用 JavaScript 來存儲和訪問數據。
localStorage 方法
localStorage 方法存儲的數據沒有時間限制。第二天、第二週或下一年之後，數據依然可用。
如何創建和訪問 localStorage：
實例
sessionStorage 方法
sessionStorage 方法針對一個 session 進行數據存儲。當用戶關閉瀏覽器窗口後，數據會被刪除。
如何創建並訪問一個 sessionStorage：
實例
HTML5 Input類型
HTML5 擁有多個新的表單輸入類型。這些新特性提供了更好的輸入控制和驗證。
本章全面介紹這些新的輸入類型：
1.email
2.url
3.number
4.range
5.Date pickers (date, month, week, time, datetime, datetime-local)
6.search
7.color
註釋：Opera 對新的輸入類型的支持最好。不過您已經可以在所有主流的瀏覽器中使用它們了。即使不被支持，仍然可以顯示為常規的文本域。
Input 類型 - email
email 類型用於應該包含 e-mail 地址的輸入域。
在提交表單時，會自動驗證 email 域的值。
實例
E-mail:
提示：iPhone 中的 Safari 瀏覽器支持 email 輸入類型，並通過改變觸摸屏鍵盤來配合它（添加 @ 和 .com 選項）。
Input 類型 - url
url 類型用於應該包含 URL 地址的輸入域。
在提交表單時，會自動驗證 url 域的值。
實例
Homepage:
提示：iPhone 中的 Safari 瀏覽器支持 url 輸入類型，並通過改變觸摸屏鍵盤來配合它（添加 .com 選項）。
Input 類型 - number
number 類型用於應該包含數值的輸入域。
您還能夠設定對所接受的數字的限定：
實例
Points:
請使用下面的屬性來規定對數字類型的限定：
屬性
值
描述
max
number
規定允許的最大值
min
number
規定允許的最小值
step
number
規定合法的數字間隔（如果 step="3"，則合法的數是 -3,0,3,6 等）
value
number
規定默認值
提示：iPhone 中的 Safari 瀏覽器支持 number 輸入類型，並通過改變觸摸屏鍵盤來配合它（顯示數字）。
Input 類型 - range
range 類型用於應該包含一定範圍內數字值的輸入域。
range 類型顯示為滑動條。
您還能夠設定對所接受的數字的限定：
實例
請使用下面的屬性來規定對數字類型的限定：
屬性
值
描述
max
number
規定允許的最大值
min
number
規定允許的最小值
step
number
規定合法的數字間隔（如果 step="3"，則合法的數是 -3,0,3,6 等）
value
number
規定默認值
Input 類型 - Date Pickers（日期選擇器）
HTML5 擁有多個可供選取日期和時間的新輸入類型：
15 date - 選取日、月、年
16 month - 選取月、年
17 week - 選取周和年
18 time - 選取時間（小時和分鐘）
19 datetime - 選取時間、日、月、年（UTC 時間）
20 datetime-local - 選取時間、日、月、年（本地時間）
下面的例子允許您從日曆中選取一個日期：
實例
Date:
Input裡面的類型新增的屬性雖然多了一些，但是大多都很簡單，和原先的text,password都是一樣的道理。
HTML5表單元素
HTML5 擁有若干涉及表單的元素和屬性。
datalist 元素
datalist 元素規定輸入域的選項列表。
列表是通過 datalist 內的 option 元素創建的。
如需把 datalist 綁定到輸入域，請用輸入域的 list 屬性引用 datalist 的 id：
實例
Webpage:
提示：option 元素永遠都要設置 value 屬性。
keygen 元素
keygen 元素的作用是提供一種驗證用戶的可靠方法。
keygen 元素是密鑰對生成器（key-pair generator）。當提交表單時，會生成兩個鍵，一個是私鑰，一個公鑰。
私鑰（private key）存儲於客戶端，公鑰（public key）則被髮送到服務器。公鑰可用於之後驗證用戶的客戶端證書（client certificate）。
目前，瀏覽器對此元素的糟糕的支持度不足以使其成為一種有用的安全標準。
實例
output 元素
output 元素用於不同類型的輸出，比如計算或腳本輸出：
實例
HTML5表單屬性
本章講解涉及
註釋：在某些瀏覽器中，您可能需要啟用自動完成功能，以使該屬性生效。
autofocus 屬性
autofocus 屬性規定在頁面加載時，域自動地獲得焦點。
註釋：autofocus 屬性適用於所有 標籤的類型。
實例
User name:
form 屬性
form 屬性規定輸入域所屬的一個或多個表單。
註釋：form 屬性適用於所有 標籤的類型。
form 屬性必須引用所屬表單的 id：
實例
Last name:
註釋：如需引用一個以上的表單，請使用空格分隔的列表。
表單重寫屬性
表單重寫屬性（form override attributes）允許您重寫 form 元素的某些屬性設定。
表單重寫屬性有：
21 formaction - 重寫表單的 action 屬性
22 formenctype - 重寫表單的 enctype 屬性
23 formmethod - 重寫表單的 method 屬性
24 formnovalidate - 重寫表單的 novalidate 屬性
25 formtarget - 重寫表單的 target 屬性
註釋：表單重寫屬性適用於以下類型的 標籤：submit 和 image。
實例
註釋：這些屬性對於創建不同的提交按鈕很有幫助。
height 和 width 屬性
height 和 width 屬性規定用於 image 類型的 input 標籤的圖像高度和寬度。
註釋：height 和 width 屬性只適用於 image 類型的 標籤。
實例
list 屬性
list 屬性規定輸入域的 datalist。datalist 是輸入域的選項列表。
註釋：list 屬性適用於以下類型的 標籤：text, search, url, telephone, email, date pickers, number, range 以及 color。
實例
Webpage:
min、max 和 step 屬性
min、max 和 step 屬性用於為包含數字或日期的 input 類型規定限定（約束）。
max 屬性規定輸入域所允許的最大值。
min 屬性規定輸入域所允許的最小值。
step 屬性為輸入域規定合法的數字間隔（如果 step="3"，則合法的數是 -3,0,3,6 等）。
註釋：min、max 和 step 屬性適用於以下類型的 標籤：date pickers、number 以及 range。
下面的例子顯示一個數字域，該域接受介於 0 到 10 之間的值，且步進為 3（即合法的值為 0、3、6 和 9）：
實例
Points:
multiple 屬性
multiple 屬性規定輸入域中可選擇多個值。
註釋：multiple 屬性適用於以下類型的 標籤：email 和 file。
實例
Select images:
novalidate 屬性
novalidate 屬性規定在提交表單時不應該驗證 form 或 input 域。
註釋：novalidate 屬性適用於
pattern 屬性
pattern 屬性規定用於驗證 input 域的模式（pattern）。
模式（pattern） 是正則表達式。您可以在我們的 JavaScript 教程中學習到有關正則表達式的內容。
註釋：pattern 屬性適用於以下類型的 標籤：text, search, url, telephone, email 以及 password。
下面的例子顯示了一個只能包含三個字母的文本域（不含數字及特殊字符）：
實例
Country code:
pattern="[A-z]{3}" title="Three letter country code" />
placeholder 屬性
placeholder 屬性提供一種提示（hint），描述輸入域所期待的值。
註釋：placeholder 屬性適用於以下類型的 標籤：text, search, url, telephone, email 以及 password。
提示（hint）會在輸入域為空時顯示出現，會在輸入域獲得焦點時消失：
實例
required 屬性
required 屬性規定必須在提交之前填寫輸入域（不能為空）。
註釋：required 屬性適用於以下類型的 標籤：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。
實例
Name:
這份簡易的HTML5教程是為了新手準備，HTML5還有很大其他的更高級的東西，我在這裡沒有介紹，不過隨著學習的深入，以後你肯定會接觸到的，我在最後給大家展示一些HTML5開發的實例，包括遊戲，應用以及各種demo。
HTML5開發的驢子跳遊戲：
HTML5開發遊戲場景：
HTML5和JS結合開發的植物大戰殭屍：
HTML5的傳奇還在繼續，你現在是不是充滿了熱情，摩拳擦掌的想要試試HTML5具有什麼樣的魅力？那就快來學習吧，希望這份教程在你HTML5的啟蒙道路有所幫助。