html5開發(fā)工具有：Dreamweaver、DevExtreme、WebStorm、Vscode、HTML5demos、HTML5 Tracker、Switch To HTML5、HTML5 Test、Lime JS等等。

本教程操作環(huán)境：windows7系統(tǒng)、HTML5版、Dell G3電腦。

Adobe Dreamweaver

Dreamweaver 是世界頂級軟件廠商 Adobe 推出的一套擁有可視化編輯界面，用于制作并編輯網(wǎng)站和移動應(yīng)用程序的網(wǎng)頁設(shè)計軟件。Dreamweaver 是集網(wǎng)頁制作和管理網(wǎng)站于一身的所見即所得的網(wǎng)頁代碼編輯器，借助其經(jīng)過簡化的智能編碼引擎，視覺輔助功能減少錯誤并提高網(wǎng)站開發(fā)速度，輕松創(chuàng)建、編碼和管理動態(tài)網(wǎng)站。還能夠通過訪問代碼提示，快速了解 HTML 、CSS 以及其他 Web 標準。（注：根據(jù)自身需求選擇版本）

優(yōu)點：

• 制作效率。

• 操控能力強。

• 網(wǎng)站管理迅速簡單。

• 全面的 CSS 支持。

• 學習資源多，如 DW 社區(qū)。

缺點：

• 效果難以精確達到與瀏覽器一致的顯示效果。

• 不便監(jiān)控生成干凈準確的 HTML 代碼。

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

DevExtreme

DevExtreme 是高性能的HTML5,CSS和Java移動開發(fā)框架，可以直接在Visual Studio集成開發(fā)環(huán)境，構(gòu)建移動應(yīng)用程序。從 Angular 和 React 到 ASP.NET MVC 或 Vue ，DevExtreme 包括一系列高性能和響應(yīng)式 UI 小部件，用于傳統(tǒng)的Web和下一代移動應(yīng)用程序。目前，DevExtreme V19.1.6 全新發(fā)布，是Visual Studio開發(fā)人員開發(fā)跨平臺移動產(chǎn)品的首選工具。（注：根據(jù)自身需求選擇版本）

官方地址鏈接：https://js.devexpress.com/

JetBrains WebStorm

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

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

優(yōu)點：

• 智能的代碼補全，支持不同瀏覽器的提示。

• 代碼格式化，規(guī)則自定義。

• HTML 智能提示。

• 聯(lián)想查詢，查找高亮。

• 代碼重構(gòu)。

• 代碼檢查，快速修復。

• 代碼調(diào)試。

• 代碼結(jié)構(gòu)快速瀏覽和定位。

• 代碼折疊。

• 自動提示代碼包裹或去除包裹。

官方地址鏈接：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

Visual Studio Code

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

優(yōu)點：

• 免費

• 借助IntelliSense超越了語法突出顯示和自動完成功能。

• 直接從編輯器調(diào)試代碼。

• 內(nèi)置 Git 命令。

• 可擴展和可定制。

• 以 Microsoft Azure 輕松部署和托管網(wǎng)站。

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

Sencha Architect

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

優(yōu)點：

• 拖拽組件

• 支持模型——視圖——控制器模式。

• 支持 Sencha Touch 和 Ext JS 4 構(gòu)建移動和桌面 Web 應(yīng)用。

• 內(nèi)置針對 IOS 與 Android 一鍵式原生打包功能。

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

HTML5demos

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

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

HTML5 Tracker

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

HTML5 visual cheat sheet

想要快速超找一個標簽或者屬性嗎？看看這個非?？岬乃俨槭謨园?，每個Web開發(fā)人員的必備。

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

Switch To HTML5

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

HTML5 Test

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

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

Lime JS

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

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