HTML5被看做是Web開發(fā)者創(chuàng)建流行Web應(yīng)用的利器，增加了對視頻和Canvas 2D的支持。HTML5的誕生還讓人們重新審視瀏覽器專用多媒體插件的未來，如Adobe的Flash和微軟的Silverlight，HTML5為實(shí)現(xiàn)這些插件的功能提供了一種標(biāo)準(zhǔn)化的方式。

HTML5 發(fā)展如火如荼，隨著各大瀏覽器對 HTML5 技術(shù)支持的不斷完善以及 HTML5 技術(shù)的不斷成熟，未來 HTML5 必將改變我們創(chuàng)建 Web 應(yīng)用程序的方式。今天這篇文章向大家推薦10款優(yōu)秀的HTML5開發(fā)工具，幫助你更高效的編寫 HTML5 應(yīng)用。

　　雖然HTML5標(biāo)準(zhǔn)尚未開發(fā)完成，但是隨著開發(fā)者對HTML5的興趣日漸濃厚，開發(fā)工具提供商也開始跟進(jìn)。以下介紹的9款應(yīng)用工具已經(jīng)能夠幫助開發(fā)者在程序中集成HTML5功能。

　　一、Adobe Edge

　　目前還處于預(yù)覽階段的Adobe Edge是用HTML5、CSS、JavaScript開發(fā)動(dòng)態(tài)互動(dòng)內(nèi)容的設(shè)計(jì)工具。內(nèi)容可以同時(shí)兼容移動(dòng)設(shè)備和桌面電腦。Edge的一個(gè)重要功能是Web工具包界面，方便確保頁面在不同瀏覽器中的架構(gòu)一致性，此外Edge還將整合TypeKit這樣的字體服務(wù)。

　　動(dòng)畫和圖形可以添加到HTML元素中，程序也能通過Edge自身的代碼片段庫或者JavaScript代碼進(jìn)行擴(kuò)展。動(dòng)畫可以在獨(dú)立的時(shí)間線上進(jìn)行嵌套，還能實(shí)現(xiàn)互動(dòng)功能。符合可以服用并通過API和代碼片段控制。通過Edge設(shè)計(jì)的內(nèi)容可以兼容iOS和Android設(shè)備，也可以運(yùn)行在火狐、Chrome、Safari和IE9等主流瀏覽器。

　　二、Adobe Dreamweaver CS6

　　Adobe Dreamweaver CS6作為一個(gè)Web設(shè)計(jì)軟件，提供了對HTML網(wǎng)站和移動(dòng)程序的可視化編輯界面。其Fluid Grid排版系統(tǒng)整合CSS樣式表功能，提供自適應(yīng)版面的跨平臺(tái)兼容性。開發(fā)者可以完全實(shí)現(xiàn)Web設(shè)計(jì)的可視化操作，無需為代碼所困。

　　用戶不但還能在Live View中預(yù)覽，還提供多屏幕預(yù)覽功能。開發(fā)者可以通過MultiScreen預(yù)覽面板查看HTML5內(nèi)容的渲染效果。Live View通過WebKit渲染引擎支持HTML5。

　　三、Adobe ColdFusion 10

　　ColdFusion是用來開發(fā)企業(yè)Web程序的服務(wù)器端技術(shù)，通過Websockets、互動(dòng)表單、視頻和地理標(biāo)簽等HTML5技術(shù)創(chuàng)建富媒體用戶體驗(yàn)。

　　四、Sencha Architect 2

　　在開發(fā)移動(dòng)和桌面應(yīng)用的工具中，Sencha的定位是HTML5可視化應(yīng)用開發(fā)。開發(fā)團(tuán)隊(duì)可以在一個(gè)單一集成的環(huán)境中完成應(yīng)用的設(shè)計(jì)、開發(fā)和部署。開發(fā)者還可以開發(fā)Sencha Touch2和Ext JS4 JavaScript應(yīng)用，并實(shí)時(shí)預(yù)覽。

在開發(fā)移動(dòng)和桌面應(yīng)用的工具中，Sencha的定位是HTML5可視化應(yīng)用開發(fā)。開發(fā)團(tuán)隊(duì)可以在一個(gè)單一集成的環(huán)境中完成應(yīng)用的設(shè)計(jì)、開發(fā)和部署。開發(fā)者還可以開發(fā)Sencha Touch2和Ext JS4 JavaScript應(yīng)用，并實(shí)時(shí)預(yù)覽。

　　五、Sencha Touch 2

　　Sencha Touch2是移動(dòng)應(yīng)用框架，也被看作是Sencha的HTML5平臺(tái)。開發(fā)者可以用它開發(fā)面向iOS、Android和Blackberry、Kindle Fire等多種平臺(tái)的移動(dòng)應(yīng)用。

　　六、Dojo Foundation Maqetta

　　來自于IBM的一個(gè)項(xiàng)目，Dojo Foundation Maqetta是為桌面和移動(dòng)設(shè)備開發(fā)HTML5應(yīng)用的開源工具，支持在瀏覽器中查看HTML5界面。用戶體驗(yàn)設(shè)計(jì)師可以通過拖放組裝UI樣板。

　　七、微軟Visual Studio 2010 ServicePack 1

　　雖然一開始并不支持HTML5，但微軟在2011年三月發(fā)布的Visual Studio 2010 SP1中提供了IntelliSense，追加了針對HTML5的一些元素。

　　八、JetBrains WebStorm 4.0

　　作為擁有HTML編輯器的JavaScript集成開發(fā)環(huán)境，WebStorm4.0提供了開發(fā)web應(yīng)用的HTML5樣板。開發(fā)者可以在創(chuàng)建HTML文檔時(shí)可獲得對HTML5文件的支持。例如砍伐者鍵入。開發(fā)者還可以在chrome瀏覽器中實(shí)時(shí)預(yù)覽HTML文檔。

WebStorm 是jetbrains公司旗下一款JavaScript 開發(fā)工具。被廣大中國JS開發(fā)者譽(yù)為“Web前端開發(fā)神器”、“最強(qiáng)大的HTML5編輯器”、“最智能的JavaSscript IDE”等。與IntelliJ IDEA同源，繼承了IntelliJ IDEA強(qiáng)大的JS部分的功能。

　　九、Google Web Toolkit

　　該開發(fā)工具用于開發(fā)瀏覽器應(yīng)用，但庫中支持很多HTML5功能。包括對客戶端或web存儲(chǔ)的支持。其他HTML5功能還包括支持Canvas可視化，以及音頻和視頻widget。

　　十. DevExtreme

DevExtreme Complete Subscription是性能最優(yōu)的HTML5,CSS和JavaScript移動(dòng)開發(fā)框架，可以直接在Visual Studio集成開發(fā)環(huán)境，構(gòu)建iOS，Android，Tizen和Windows Phone 8應(yīng)用程序。DevExtreme包含 PhoneJS 和 ChartJS 兩個(gè)原生UI組件，并且提供源代碼。目前，DevExtreme支持VS2010/2012/2013集成開發(fā)環(huán)境，兼容Android 4+、iOS5+、Windows 8、Window Phone 8、Tizen五大移動(dòng)平臺(tái)，是Visual Studio開發(fā)人員開發(fā)跨平臺(tái)移動(dòng)產(chǎn)品的首選工具。

　　十一. HBuilder

HBuilder是專注于HTML、js、css的IDE。

就是說HBuilder是有HTML、js、css的語法解析引擎的，它認(rèn)識(shí)你寫的代碼，知道該提示什么、知道轉(zhuǎn)到定義去哪里，你寫的每個(gè)變量、每個(gè)函數(shù)都會(huì)動(dòng)態(tài)計(jì)算類型和返回值，這個(gè)是很有難度的事情，全世界js的AST語法樹處理最好的3個(gè)工具就是HBuilder、VS、webstorm。

而sublime是文本編輯器，它并不認(rèn)識(shí)你var的變量是一個(gè)div的element還是什么其他東西，它只是混沌的提示你寫過的詞。

如果說純前端開發(fā)，還是HBuilder好用。

開發(fā)速度、出錯(cuò)概率都好于sublime。

• 開發(fā)工具
• HTML5