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音頻編碼的MPEG4文件
WebM=帶有VP8視頻編碼和Vorbis音頻編碼的WebM文件
標籤使用
1
2
12
13瀏覽器不支持html5視頻功能
14
IE9一下不支持video，IE9支持了MPEG4的video元素。
Video的屬性選擇
HTML5音頻
HTML5支持音頻（音樂）的標準，通過audio元素。
音頻格式：
要確保適用於Safari瀏覽器，音頻文件必須是MP3或Wav類型。
標籤使用：
Yourbrowserdoesnotsupporttheaudiotag.
IE8不支持audio元素。在IE9中，將提供對audio元素的支持。
HTML5Canvas
Canvas元素可以實現繪製圖形動畫。
Canvas可以説是HTML5裏面最重要的一個標籤了，這個標籤的出現讓遊戲開發更加容易，不過Canvas需要配合JavaScript使用。
元素創建
規定元素的id、寬度和高度：
這個地方為什麼要定義id屬性呢？如果你對JS的DOM編程有一定了解的話，你就知道通過ID屬性可以獲取一個元素對象，從而可以通過JS來對元素進行操作。
如果你對DOM不熟悉的話，建議你先去看下相關的學習資料。
這裏給你一個DOM學習的電子書下載鏈接：
JavaScript控制Canvas
varc=lementById("myCanvas");
varcxt=ontext("2d");
style=";";
Rect(0,0,150,75);
JavaScript使用id來尋找canvas元素：
varc=lementById("myCanvas");
然後，創建context對象：
varcxt=ontext("2d");
getContext("2d")對象是內建的HTML5對象，擁有多種繪製路徑、矩形、圓形、字符以及添加圖像的方法。
下面的兩行代碼繪製一個紅色的矩形：
style=";";
Rect(0,0,150,75);
fillStyle方法將其染成紅色，fillRect方法規定了形狀、位置和尺寸。
上面的fillRect方法擁有參數(0,0,150,75)。
意思是：在畫布上繪製150x75的矩形，從左上角開始(0,0)。
如下圖所示，畫布的X和Y座標用於在畫布上對繪畫進行定位。
下面我在canvas元素上進行繪畫的更多實例：
實例-線條
通過指定從何處開始，在何處結束，來繪製一條線：
JavaScript代碼：
varc=lementById("myCanvas");
varcxt=ontext("2d");
To(10,10);
To(150,50);
To(10,50);
ke();
canvas元素：
Yourbrowserdoesnotsupportthecanvaselement.
實例-圓形
通過規定尺寸、顏色和位置，來繪製一個圓：
JavaScript代碼：
varc=lementById("myCanvas");
varcxt=ontext("2d");
style=";";
nPath();
(70,18,15,0,*2,true);
ePath();
();
canvas元素：
Yourbrowserdoesnotsupportthecanvaselement.
實例-漸變
使用您指定的顏色來繪製漸變背景：
JavaScript代碼：
varc=lementById("myCanvas");
varcxt=ontext("2d");
vargrd=teLinearGradient(0,0,175,50);
olorStop(0,"#FF0000");
olorStop(1,"#00FF00");
style=grd;
Rect(0,0,175,50);
canvas元素：
Yourbrowserdoesnotsupportthecanvaselement.
實例-圖像
把一幅圖像放置到畫布上：
JavaScript代碼：
varc=lementById("myCanvas");
varcxt=ontext("2d");
varimg=newImage()
="flower.png"
Image(img,0,0);
canvas元素：
Yourbrowserdoesnotsupportthecanvaselement.
你看我canvas相比較前幾個標籤來説，解釋説明舉例明顯更多，這也説明canvas標籤的重要性，希望你能好好學習這個標籤。
HTML5Web存儲
在客户端存儲數據
HTML5提供了兩種在客户端存儲數據的新方法：
localStorage-沒有時間限制的數據存儲
sessionStorage-針對一個session的數據存儲
之前，這些都是由cookie完成的。但是cookie不適合大量數據的存儲，因為它們由每個對服務器的請求來傳遞，這使得cookie速度很慢而且效率也不高。
在HTML5中，數據不是由每個服務器請求傳遞的，而是隻有在請求時使用數據。它使在不影響網站性能的情況下存儲大量數據成為可能。
對於不同的網站，數據存儲於不同的區域，並且一個網站只能訪問其自身的數據。
HTML5使用JavaScript來存儲和訪問數據。
localStorage方法
localStorage方法存儲的數據沒有時間限制。第二天、第二週或下一年之後，數據依然可用。
如何創建和訪問localStorage：
實例
name="Smith";
e(name);
sessionStorage方法
sessionStorage方法針對一個session進行數據存儲。當用户關閉瀏覽器窗口後，數據會被刪除。
如何創建並訪問一個sessionStorage：
實例
name="Smith";
e(name);
HTML5Input類型
HTML5擁有多個新的表單輸入類型。這些新特性提供了更好的輸入控制和驗證。
本章全面介紹這些新的輸入類型：
l
er
e
pickers(date,month,week,time,datetime,datetime-local)
ch
r
註釋：Opera對新的輸入類型的支持最好。不過您已經可以在所有主流的瀏覽器中使用它們了。即使不被支持，仍然可以顯示為常規的文本域。
Input類型-email
email類型用於應該包含e-mail地址的輸入域。
在提交表單時，會自動驗證email域的值。
實例
E-mail:
提示：iPhone中的Safari瀏覽器支持email輸入類型，並通過改變觸摸屏鍵盤來配合它（添加@和選項）。
Input類型-url
url類型用於應該包含URL地址的輸入域。
在提交表單時，會自動驗證url域的值。
實例
Homepage:
提示：iPhone中的Safari瀏覽器支持url輸入類型，並通過改變觸摸屏鍵盤來配合它（添加選項）。
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類型-DatePickers（日期選擇器）
HTML5擁有多個可供選取日期和時間的新輸入類型：
15date-選取日、月、年
16month-選取月、年
17week-選取周和年
18time-選取時間（小時和分鐘）
19datetime-選取時間、日、月、年（UTC時間）
20datetime-local-選取時間、日、月、年（本地時間）
下面的例子允許您從日曆中選取一個日期：
實例
Date:
Input裏面的類型新增的屬性雖然多了一些，但是大多都很簡單，和原先的text,password都是一樣的道理。
HTML5表單元素
HTML5擁有若干涉及表單的元素和屬性。
datalist元素
datalist元素規定輸入域的選項列表。
列表是通過datalist內的option元素創建的。
如需把datalist綁定到輸入域，請用輸入域的list屬性引用datalist的id：
實例
Webpage:
提示：option元素永遠都要設置value屬性。
keygen元素
keygen元素的作用是提供一種驗證用户的可靠方法。
keygen元素是密鑰對生成器（key-pairgenerator）。當提交表單時，會生成兩個鍵，一個是私鑰，一個公鑰。
私鑰（privatekey）存儲於客户端，公鑰（publickey）則被髮送到服務器。公鑰可用於之後驗證用户的客户端證書（clientcertificate）。
目前，瀏覽器對此元素的糟糕的支持度不足以使其成為一種有用的安全標準。
實例
Username:
Encryption:
output元素
output元素用於不同類型的輸出，比如計算或腳本輸出：
實例
HTML5表單屬性
本章講解涉及
和元素的新屬性。新的form屬性：
autocomplete
novalidate
新的input屬性：
autocomplete
autofocus
form
formoverrides(formaction,formenctype,formmethod,formnovalidate,formtarget)
height和width
list
min,max和step
multiple
pattern(regexp)
placeholder
Required
autocomplete屬性
autocomplete屬性規定form或input域應該擁有自動完成功能。
註釋：autocomplete適用於標籤，以及以下類型的標籤：text,search,url,telephone,email,password,datepickers,range以及color。
當用户在自動完成域中開始輸入時，瀏覽器應該在該域中顯示填寫的選項：
實例
Firstname:
Lastname:
E-mail:
註釋：在某些瀏覽器中，您可能需要啟用自動完成功能，以使該屬性生效。
autofocus屬性
autofocus屬性規定在頁面加載時，域自動地獲得焦點。
註釋：autofocus屬性適用於所有標籤的類型。
實例
Username:
form屬性
form屬性規定輸入域所屬的一個或多個表單。
註釋：form屬性適用於所有標籤的類型。
form屬性必須引用所屬表單的id：
實例
Firstname:
Lastname:
註釋：如需引用一個以上的表單，請使用空格分隔的列表。
表單重寫屬性
表單重寫屬性（formoverrideattributes）允許您重寫form元素的某些屬性設定。
表單重寫屬性有：
21formaction-重寫表單的action屬性
22formenctype-重寫表單的enctype屬性
23formmethod-重寫表單的method屬性
24formnovalidate-重寫表單的novalidate屬性
25formtarget-重寫表單的target屬性
註釋：表單重寫屬性適用於以下類型的標籤：submit和image。
實例
E-mail:
註釋：這些屬性對於創建不同的提交按鈕很有幫助。
height和width屬性
height和width屬性規定用於image類型的input標籤的圖像高度和寬度。
註釋：height和width屬性只適用於image類型的標籤。
實例
list屬性
list屬性規定輸入域的datalist。datalist是輸入域的選項列表。
註釋：list屬性適用於以下類型的標籤：text,search,url,telephone,email,datepickers,number,range以及color。
實例
Webpage:
min、max和step屬性
min、max和step屬性用於為包含數字或日期的input類型規定限定（約束）。
max屬性規定輸入域所允許的最大值。
min屬性規定輸入域所允許的最小值。
step屬性為輸入域規定合法的數字間隔（如果step="3"，則合法的數是-3,0,3,6等）。
註釋：min、max和step屬性適用於以下類型的標籤：datepickers、number以及range。
下面的例子顯示一個數字域，該域接受介於0到10之間的值，且步進為3（即合法的值為0、3、6和9）：
實例
Points:
multiple屬性
multiple屬性規定輸入域中可選擇多個值。
註釋：multiple屬性適用於以下類型的標籤：email和file。
實例
Selectimages:
novalidate屬性
novalidate屬性規定在提交表單時不應該驗證form或input域。
註釋：novalidate屬性適用於
以及以下類型的標籤：text,search,url,telephone,email,password,datepickers,range以及color.實例
E-mail:
pattern屬性
pattern屬性規定用於驗證input域的模式（pattern）。
模式（pattern）是正則表達式。您可以在我們的JavaScript教程中學習到有關正則表達式的內容。
註釋：pattern屬性適用於以下類型的標籤：text,search,url,telephone,email以及password。
下面的例子顯示了一個只能包含三個字母的文本域（不含數字及特殊字符）：
實例
Countrycode:
pattern="[A-z]{3}"title="Threelettercountrycode"/>
placeholder屬性
placeholder屬性提供一種提示（hint），描述輸入域所期待的值。
註釋：placeholder屬性適用於以下類型的標籤：text,search,url,telephone,email以及password。
提示（hint）會在輸入域為空時顯示出現，會在輸入域獲得焦點時消失：
實例
required屬性
required屬性規定必須在提交之前填寫輸入域（不能為空）。
註釋：required屬性適用於以下類型的標籤：text,search,url,telephone,email,password,datepickers,number,checkbox,radio以及file。
實例
Name:
這份簡易的HTML5教程是為了新手準備，HTML5還有很大其他的更高級的東西，我在這裏沒有介紹，不過隨着學習的深入，以後你肯定會接觸到的，我在最後給大家展示一些HTML5開發的實例，包括遊戲，應用以及各種demo。
HTML5開發的驢子跳遊戲：
HTML5開發遊戲場景：
HTML5和JS結合開發的植物大戰殭屍：
HTML5的傳奇還在繼續，你現在是不是充滿了熱情，摩拳擦掌的想要試試HTML5具有什麼樣的魅力？那就快來學習吧，希望這份教程在你HTML5的啟蒙道路有所幫助。
酷知知識幫
