開始學習HTML5所需要的技巧和工具

 html5的確已經變成了web開發一個熱門話題。 由於大多數現代瀏覽器（Safari瀏覽器，瀏覽器，Firefox，IE10和移動設備）的支持,即使規範還未完全完成，但很多人已經採用它作爲所有的Web開發項目的主要技術。在線巨頭網站，如谷歌，Facebook，Twitter和YouTube網站，它們都在使用html5！

 

所以，我爲自己也爲所有想學習它的朋友寫了這篇文章，作爲一個研究。

在你開始前，你可可能想了解現代瀏覽器以及移動平臺的支持特性。

• HTML5 Support Chart
• Mobile HTML5
• HTML5 Test
• HTML5 Demo

推薦閱讀

• 10個在線簡化HTML5編碼的工具
• 2011年20個最棒的免費HTML5網站模板
• 非常有用的HTML5,CSS3的框架

Enable HTML5 tags!

舊版本的IE不能識別新的html元素。然而，已經有了一些javascript和css的解決方案來修改這個弱點。

• HTML5Shiv: 這個腳本使用IE去識別並裝飾HTML5元素。
• HTML5 Enabler: 和HTML5Shiv類似，HTML5 Enabler使用IE識別新的HTML5元素。
• Modernizr: Modernrizr 允許我們採取of HTML5和css3能力的新特性。
• HTML5 Reset: 這個有點不同於其他的，它自帶的文件夾結構和文件爲你準備好開始一個新的項目。對於HTML5和css3的支持，它使用的是Modernizr。

我發現了一系列的javascript插件來兼容在一些瀏覽器上對HTML5的支持。

VideoJS

HTML5視頻播放器，在不同瀏覽器中保持一致外觀，不支持HTML5則退回到flash功能，它將在所有瀏覽器包括IE6和移動設備中工作。

AudioJS

html音頻播放器，audio.js 使用html5音頻元素而且它擁有VideoJs同樣的特性-一致的佈局，如果不支持HTML5它將使用flash替換。

HTML5Widget

實現了HTML5表單模塊的一個子集，包括日曆，顏色選擇器，滑動組件，客戶端驗證等等。

Webforms2

HTMl5表單增加屬性如：pattern, required, autofocus，擴展已有屬性，如文本框的maxlength屬性。

LimeJS

LimeJS是HTML5的遊戲框架，用於爲現代化的觸摸屏和桌面瀏覽器建設快速的、原生體驗性的遊戲。絕對很棒，必須嘗試！

FlexieJS

事實上不是關於HTML5的，它很棒地支持了CSS3的靈活的盒模型。

在線工具

而且，還有一些HTML5有效的在線工具來加速開發HTML5網站的步伐。我發掘了一些HTML5的cheatsheet和在線參考資料。

HTML5 Boilerplate

HTML5樣板是專業的基於HTML/CSS/JS的一個快速，健壯和麪向未來的網站模板。您獲得最佳出爐的最佳做法：跨瀏覽器的正常化，性能優化，甚至像跨域Ajax和Flash的可選功能。

Switch to HTML5

有用的在線工具，按照你的喜好生成HTML5文檔結構。

Initializr

Initializr是一個HTML5模板生成器，用於幫助您HTML5項目開始。它是建立在HTML5 Boilerplate之上。

HTML5 Visual Cheatsheet 

HTML5 Canvas Cheatsheet

HTML5 PocketBook