HTML5新手基礎教程
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的啟蒙道路有所幫助。
