開發工具：1、HBuilder；2、Notepad++；3、Dreamweaver；4、Sublime Text3；5、Eclipse；6、EditPlus；7、WebStorm；8、UEStudio；9、FirHtml網頁編輯器等等。

本教程操作環境：windows7系統、HTML5版、Dell G3電腦。

1、HBuilder

hbuilder是DCloud推出的一款支持HTML5的Web開發IDE。快，是HBuilder的最大優勢，通過完整的語法提示和代碼輸入法、代碼塊等，大幅提升HTML、js、css的開發效率。同時，它還包括最全面的語法庫和瀏覽器兼容性數據。

2、Notepad++

Notepad++ 程序員必備的文本編輯器，軟件小巧高效，支持27種編程語言，通吃C,C++ ,Java ,C#, XML, HTML, PHP,JS 等，推薦各位下載使用。Notepad++ 可完美地取代微軟的記事本。

3、Dreamweaver

Dreamweaver "夢想編織者"，是世界頂級軟件廠商Adobe推出的一套擁有可視化編輯界面，用于制作并編輯網站和移動應用程序的網頁設計軟件。

由于它支持代碼、拆分、設計、實時視圖等多種方式來創作、編寫和修改網頁，對于初級人員，你可以無需編寫任何代碼就能快速創建Web頁面。其成熟的代碼編輯工具更適用于Web開發高級人員的創作！

4、Sublime Text 3

Sublime Text 很贊的代碼編輯器，界面設置非常人性化，左邊是代碼縮略圖，右邊是代碼區域，你可以在左邊的代碼縮略圖區域輕松定位程序代碼的位置，高亮色彩功能非常方便編程工作。

5、Eclipse

Eclipse的本身只是一個框架平臺，但是眾多插件的支持使得Eclipse擁有其他功能相對固定的IDE軟件很難具有的靈活性。許多軟件開發商以Eclipse為框架開發自己的IDE。Eclipse最初是由IBM公司開發的替代商業軟件Visual Age for Java的下一代ide開發環境，2001年11月貢獻給開源社區，現在它由非營利軟件供應商聯盟Eclipse基金會（Eclipse Foundation）管理。

6、EditPlus

EditPlus是一款為Internet準備的、運行于Windows 下的32位文本、html編輯器, 同時也是程序員們非常喜愛的編輯器。你完全可以用它代替Windows筆記本, 它也為許多網頁高手和程序員提供便利！

7、WebStorm

WebStorm是一款強大的HTML5/JavaScript Web前端開發工具，被廣大JS開發者譽為“Web前端開發神器”。WebStorm 8全新特性中包括對AngularJS的支持，能夠高效準確地智能感知Angular語法、指令。WebStorm還完美支持Spy-js，合并了這款JavaScript調試利器，大大提高了開發者們的工作效率。

8、UEStudio

程序員使用的編輯器或代碼編輯器是一款強大 IDE 的重要組成部分。它是任何 IDE 的核心基礎。UEStudio 基于著名的 UltraEdit 進行構建。同樣，程序的主干非常成熟和穩定，并且已經被證實成為文本和程序編輯器的事實標準。

9、FirHtml網頁編輯器

FirHtml網頁編輯器一個簡潔，小巧的網頁編輯器。 我們通過上一代，開發出全新的網頁編輯器，幫助您高效地設計出精美的網頁！新版增加了添加文件域功能。

10、Vim

Vim是Linux上的著名的文本編輯器，他是早年的Vi編輯器的加強版。這個gVim是windows版的，并且有了標準的windows風格的圖形界面，所以叫g(graphical)Vim。這是一個國際版本，會根據安裝的平臺自動選擇相應語言包，支持中文及其各種編碼，連界面也是中文的，請放心使用。這個極具Unix特色和風格(simple is the best)的編輯器相信會給您帶來不同的感受。

11、Visual Studio Code

Visual Studio Code（簡稱“VS Code”）是Microsoft在2015年4月30日Build開發者大會上正式宣布一個運行于 Mac OS X、Windows和 Linux 之上的，針對于編寫現代Web和云應用的跨平臺源代碼編輯器， [2] 可在桌面上運行，并且可用于Windows，macOS和Linux。它具有對JavaScript，TypeScript和Node.js的內置支持，并具有豐富的其他語言（例如C++，C＃，Java，Python，PHP，Go）和運行時（例如.NET和Unity）擴展的生態系統.

推薦學習：《vscode教程》