HTML5 開發者須要瞭解的技巧和工具彙總

HTML5 開發者須要瞭解的技巧和工具彙總

     HTML5如今已經成爲了Web開發中的熱門話題，大多數現代瀏覽器（Safari、Chrome，Firefox，IE10和移動設備）都支持HTML5。即便HTML5的規範尚未制定完成，但許多開發者已經將其做爲Web開發項目中的主要技術。一些網站巨頭，如Google、Facebook、Twitter和YouTube等，都創建在HTML5基礎上。

HTML5中最使人興奮的功能莫過於畫布（canvas）和強大的表單功能，畫布功能已經能夠在大部分瀏覽器中完美體驗（除了IE），但對於新表單元素的支持還不是太好。對Web開發者來講，是時候開始HTML5開發了。

要進行HTML5開發，本文中的一些技巧、工具可讓你縮短學習的時間，提升開發的效率。

1、HTML5支持測試列表

在開始以前，你須要瞭解現代的瀏覽器以及移動平臺對於HTML5的支持狀況。

·          

·         主流瀏覽器HTML5功能支持一覽

·         移動平臺HTML5支持一覽

·         HTML5支持測試

·         HTML5演示

2、讓HTML5元素可用

老版本的IE瀏覽器不能識別新的HTML元素。可是，可使用一些JavaScript或CSS解決方案來彌補這個缺陷。

·         HTML5Shiv：此腳本可使IE瀏覽器識別HTML5元素。

·         HTML5 Enabler：功能與HTML5Shiv相似。

·         Modernizr：它使得開發者能夠在支持HTML5和CSS3的瀏覽器中充分利用HTML5和CSS3的特性進行開發，同時又不會犧牲其餘不支持這些新技術的瀏覽器的控制。

·         HTML5 Reset：它提供了一組HTML、CSS文件，讓你可以以最少的時間來啓動一個新的項目。它使用modernizr來支持HTML5 和 CSS3。

3、瀏覽器插件

下面是一些JavaScript插件，能夠彌補一些瀏覽器對HTML5的支持問題。

1. VideoJS

VideoJS是一個HTML5的視頻播放器，能夠在全部瀏覽器中使用，包括IE6和移動設備。對於不支持HTML5的瀏覽器則自動使用Flash播放器來播放。

2. AudioJS

HTML音頻播放器。用來讓HTML5 的 <audio> 標籤能夠在各類瀏覽器上使用，包括移動設備。

3. HTML5Widget

HTML5的表單模塊，包括日曆，調色板，滑動部件，客戶端驗證等。

4. Webforms2

HTML5 表單屬性的支持，例如pattern、required和autofocus。

5. LimeJS

LimeJS是HTML5的遊戲框架，用於爲現代觸摸設備和桌面瀏覽器建立快速、本地化的遊戲。

6. FlexieJS

支持CSS3彈性盒子模型（Flexible Box Model）。

4、在線工具

此外，還有一些在線工具，能夠幫助開發者加快HTML5項目的開發。

1. HTML5 Boilerplate

HTML5Boilerplate 是一個HTML / CSS /JS模板，是實現跨瀏覽器正常化、性能優化、穩定的可選功能如跨域Ajax和Flash的最佳實踐。開發者稱之爲技巧集合，目的是知足你開發一個跨瀏覽器，而且面向將來的網站的需求。

2. Switch to HTML5

很是有用的在線工具，能夠根據你的喜愛生成HTML5文檔結構。

3. Initializr

Initializr是一個HTML5模板生成器，以幫助你開始HTML5項目的開發 。它創建在HTML5 Boilerplate之上。

4. HTML5 Visual 速查表

5. HTML5 Canvas 速查表

原文下載：http://wenku.it168.com/d_000259653.shtml