推薦11款程序員必備的HTML5開發(fā)工具

如今，HTML5發(fā)展飛速，被看做是web開發(fā)者創(chuàng)建流行web應(yīng)用的利器。用HTML5開發(fā)的優(yōu)勢主要是這個(gè)技術(shù)可以進(jìn)行跨平臺(tái)進(jìn)行使用。例如你開發(fā)了一款HTML5的游戲，你可以很輕易地移植到UC的開放平臺(tái)、Opera的游戲中心、Facebook應(yīng)用平臺(tái)，甚至可以通過封裝的技術(shù)發(fā)放到App Store或Google Play上，所以它的跨平臺(tái)性非常強(qiáng)大，這也是大多數(shù)人對(duì)HTML5有興趣的主要原因。而且隨著各大瀏覽器對(duì)HTML5技術(shù)支持的不斷完善以及 HTML5技術(shù)的不斷成熟，未來 HTML5必將改變我們創(chuàng)建Web應(yīng)用程序的方式。下面就向大家推薦多款優(yōu)秀的HTML5開發(fā)工具，幫助你更高效的編寫HTML5應(yīng)用。

以下僅列出使用人群基數(shù)大、知名度高、易于查找和使用的開發(fā)工具。

1. Adobe Dreamweaver 

• 制作效率。                                
• 操控能力強(qiáng)。                  
• 網(wǎng)站管理迅速簡單。
• 全面的 CSS 支持。
• 學(xué)習(xí)資源多，如 DW 社區(qū)。

缺點(diǎn)：

• 效果難以精確達(dá)到與瀏覽器一致的顯示效果。
• 不便監(jiān)控生成干凈準(zhǔn)確的 HTML 代碼。

官網(wǎng)地址鏈接：https://www.adobe.com/cn/products/dreamweaver.html

2. DevExtreme

3. JetBrains WebStorm

（注：根據(jù)自身需求選擇版本）

優(yōu)點(diǎn)：

• 智能的代碼補(bǔ)全，支持不同瀏覽器的提示。
• 代碼格式化，規(guī)則自定義。
• HTML 智能提示。
• 聯(lián)想查詢，查找高亮。
• 代碼重構(gòu)。
• 代碼檢查，快速修復(fù)。
• 代碼調(diào)試。
• 代碼結(jié)構(gòu)快速瀏覽和定位。
• 代碼折疊。
• 自動(dòng)提示代碼包裹或去除包裹。

官方地址鏈接：https://www.jetbrains.com/zh-cn/webstorm/?utm_source=baidu&utm_medium=cpc&utm_campaign=cn-bai-br-core-ex-pc&utm_content=brand-webstorm&utm_term=jetbrains%20webstorm

4. Visual Studio Code

Vscode 是一款十分出色的 ide 開發(fā)工具，界面美觀大方，功能強(qiáng)勁實(shí)用，軟件支持中文，擁有豐富的插件，集成了所有一款現(xiàn)代編輯器所應(yīng)該具備的特性，包括語法高亮(syntax high lighting)，可定制的熱鍵綁定(customizable keyboard bindings)，括號(hào)匹配(bracket matching)以及代碼片段收集(snippets)。支持 Windows，OS X 和 Linux 。內(nèi)置 JavaScript、TypeScript 和 Node.js 支持。

優(yōu)點(diǎn)：

• 免費(fèi)
• 借助IntelliSense超越了語法突出顯示和自動(dòng)完成功能。
• 直接從編輯器調(diào)試代碼。
• 內(nèi)置 Git 命令。
• 可擴(kuò)展和可定制。
• 以 Microsoft Azure 輕松部署和托管網(wǎng)站。

官方鏈接地址：https://code.visualstudio.com/#built-in-git

5. Sencha Architect

Architect 在開發(fā)移動(dòng)和桌面應(yīng)用的工具中的定位是HTML5可視化應(yīng)用開發(fā)。開發(fā)團(tuán)隊(duì)可以使用拖放功能來構(gòu)建HTML5應(yīng)用程序，因此您可以減少在手動(dòng)編碼上的時(shí)間，并且可以對(duì)應(yīng)用程序代碼進(jìn)行優(yōu)化以實(shí)現(xiàn)高性能。Architect 消除了鍵入大多數(shù)樣板代碼的需要，從而節(jié)省了開發(fā)人員的時(shí)間。自動(dòng)代碼生成可加速桌面和移動(dòng)應(yīng)用程序的開發(fā)。只需在 WYSIWYG 窗口中更改任何 Ext JS UI 組件的屬性和配置，就可以消除手動(dòng)編碼時(shí)經(jīng)常發(fā)生的人為錯(cuò)誤。（注：根據(jù)自身需求選擇版本）

優(yōu)點(diǎn)：

• 拖拽組件
• 支持模型——視圖——控制器模式。
• 支持 Sencha Touch 和 Ext JS 4 構(gòu)建移動(dòng)和桌面 Web 應(yīng)用。
• 內(nèi)置針對(duì) IOS 與 Android 一鍵式原生打包功能。

官方地址鏈接：https://www.sencha.com/products/architect/

6. HTML5demos

想知道你的瀏覽器是否支持 HTML5 Canvas 嗎？想知道 Safari 是否可以運(yùn)行簡單的 HTML5 聊天客戶端嗎？HTML5demos 會(huì)告訴你每一個(gè)HTML5特性在哪些瀏覽器中支持。

官方鏈接地址：http://html5demos.com/

7. HTML5 Tracker

想了解 HTML5的最新動(dòng)向嗎? 使用 HTML5 Tracker 吧，它可以跟蹤 HTML5 最新修訂信息。

8. HTML5 visual cheat sheet

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

非官方鏈接地址：https://download.csdn.net/download/vick1217/4414181

9. Switch To HTML5

Switch To HTML5 是一個(gè)基礎(chǔ)而實(shí)用的模板生成工具。如果你開始一個(gè)新項(xiàng)目，可以到這里獲取免費(fèi)的 HTML5 網(wǎng)站模板。

10. HTML5 Test

你瀏覽器準(zhǔn)備好迎接 HTML5 革命了嗎？HTML5 Test 將告訴你。這個(gè)網(wǎng)站會(huì)為你當(dāng)前使用的瀏覽器生成一份對(duì)video、audio、canvas等等特性的支持情況的完整報(bào)告。

官方鏈接地址：http://html5test.com/

11. Lime JS

LimeJS 是一個(gè) HTML5 游戲開發(fā)框架，用于為所有現(xiàn)代觸摸屏和桌面瀏覽器構(gòu)建快速的本機(jī)體驗(yàn)游戲。

官方鏈接地址：http://www.limejs.com/