工具/原料AdobeDreamweaverCS6

AdobeEdge

DevExtreme

JetBrainsWebStorm

SenchaArchitect

Initializr

HTML5demos

HTML5Tracker

HTML5visualcheatsheet

SwitchToHTML5

HTML5Test

LimeJS

12款程序員必備的HTML5開發工具方法/步驟1:1.AdobeDreamweaverCS6

DreamweaverCS6是世界頂級軟件廠商Adobe推出的一套擁有可視化編輯界面，用于制作并編輯網站和移動應用程序的網頁設計軟件。由于Dreamweaver支持代碼、拆分、設計、實時視圖等多種方式來創作、編寫和修改網頁，對于初級人員，你可以無需編寫任何代碼就能快速創建Web頁面。其成熟的代碼編輯工具更適用于Web開發高級人員的創作！

方法/步驟2:2.AdobeEdge

AdobeEdge是一個用HTML5、CSS、Java開發動態互動內容的設計工具。它的一個重要功能是web工具包界面，用于方便確保在不同瀏覽器中架構的一致性，此外，AdobeEdge還將整合TypeKit這樣的字體服務。通過Edge設計的內容可以兼容iOS和Android設備，也可以運行在火狐、Chrome、Safari和IE9等主流瀏覽器上。

方法/步驟3:3.DevExtreme

DevExtremeCompleteSubion是性能最優的HTML5,CSS和Java移動開發框架，可以直接在VisualStudio集成開發環境，構建iOS，Android，Tizen和WindowsPhone8應用程序。DevExtreme包含PhoneJS和ChartJS兩個原生UI組件，并且提供源代碼。目前，DevExtreme支持VS2010/2012/2013集成開發環境，兼容Android4+、iOS5+、Windows8、WindowPhone8、Tizen五大移動平臺，是VisualStudio開發人員開發跨平臺移動產品的首選工具。

方法/步驟4:4.JetBrainsWebStorm

WebStorm是jetbrains公司旗下一款JavaScript開發工具。被廣大中國JS開發者譽為“Web前端開發神器”、“最強大的HTML5編輯器”、“最智能的JavaSIDE”等。與IntelliJIDEA同源，繼承了IntelliJIDEA強大的JS部分的功能。

方法/步驟5:5.SenchaArchitect

在開發移動和桌面應用的工具中，Sencha的定位是HTML5可視化應用開發。開發團隊可以在一個單一集成的環境中完成應用的設計、開發和部署。開發者還可以開發SenchaTouch2和ExtJS4Java應用，并實時預覽。

方法/步驟6:6、Initializr

Initializr是制作HTML5網站最好的入門輔助開發工具，你可以使用提供的特色模板快速生成網站，也可以自定義，Initializr會為你生成代碼簡潔的可定制的網頁模板。

方法/步驟7:7、HTML5demos

想知道你的瀏覽器是否支持HTML5Canvas嗎？想知道Safari是否可以運行簡單的HTML5聊天客戶端嗎？HTML5demos會告訴你每一個HTML5特性在哪些瀏覽器中支持。

方法/步驟8:8、HTML5Tracker

想了解HTML5的最新動向嗎?使用HTML5Tracker吧，它可以跟蹤HTML5最新修訂信息。

方法/步驟9:9、HTML5visualcheatsheet

想要快速超找一個標簽或者屬性嗎？看看這個非常酷的速查手冊吧，每個Web開發人員的必備。

方法/步驟10:10、SwitchToHTML5

SwitchToHTML5是一個基礎而實用的模板生成工具。如果你開始一個新項目，可以到這里獲取免費的HTML5網站模板。

方法/步驟11:11、HTML5Test

你瀏覽器準備好迎接HTML5革命了嗎？HTML5Test將告訴你。這個網站會為你當前使用的瀏覽器生成一份對video、audio、canvas等等特性的支持情況的完整報告。

方法/步驟12:12、LimeJS

LimeJS是一個HTML5游戲開發框架，用于快速構建運行于觸屏設備和桌面瀏覽器的游戲。非常棒的HTML5開發工具，一定要用用試試。