開(kāi)發(fā)工具：1、HBuilder；2、Notepad++；3、Dreamweaver；4、Sublime Text3；5、Eclipse；6、EditPlus；7、WebStorm；8、UEStudio；9、FirHtml網(wǎng)頁(yè)編輯器等等。

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

1、HBuilder

hbuilder是DCloud推出的一款支持HTML5的Web開(kāi)發(fā)IDE?？?，是HBuilder的最大優(yōu)勢(shì)，通過(guò)完整的語(yǔ)法提示和代碼輸入法、代碼塊等，大幅提升HTML、js、css的開(kāi)發(fā)效率。同時(shí)，它還包括最全面的語(yǔ)法庫(kù)和瀏覽器兼容性數(shù)據(jù)。

2、Notepad++

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

3、Dreamweaver

Dreamweaver "夢(mèng)想編織者"，是世界頂級(jí)軟件廠商Adobe推出的一套擁有可視化編輯界面，用于制作并編輯網(wǎng)站和移動(dòng)應(yīng)用程序的網(wǎng)頁(yè)設(shè)計(jì)軟件。

由于它支持代碼、拆分、設(shè)計(jì)、實(shí)時(shí)視圖等多種方式來(lái)創(chuàng)作、編寫(xiě)和修改網(wǎng)頁(yè)，對(duì)于初級(jí)人員，你可以無(wú)需編寫(xiě)任何代碼就能快速創(chuàng)建Web頁(yè)面。其成熟的代碼編輯工具更適用于Web開(kāi)發(fā)高級(jí)人員的創(chuàng)作！

4、Sublime Text 3

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

5、Eclipse

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

6、EditPlus

EditPlus是一款為Internet準(zhǔn)備的、運(yùn)行于Windows 下的32位文本、html編輯器, 同時(shí)也是程序員們非常喜愛(ài)的編輯器。你完全可以用它代替Windows筆記本, 它也為許多網(wǎng)頁(yè)高手和程序員提供便利！

7、WebStorm

WebStorm是一款強(qiáng)大的HTML5/JavaScript Web前端開(kāi)發(fā)工具，被廣大JS開(kāi)發(fā)者譽(yù)為“Web前端開(kāi)發(fā)神器”。WebStorm 8全新特性中包括對(duì)AngularJS的支持，能夠高效準(zhǔn)確地智能感知Angular語(yǔ)法、指令。WebStorm還完美支持Spy-js，合并了這款JavaScript調(diào)試?yán)鳎蟠筇岣吡碎_(kāi)發(fā)者們的工作效率。

8、UEStudio

程序員使用的編輯器或代碼編輯器是一款強(qiáng)大 IDE 的重要組成部分。它是任何 IDE 的核心基礎(chǔ)。UEStudio 基于著名的 UltraEdit 進(jìn)行構(gòu)建。同樣，程序的主干非常成熟和穩(wěn)定，并且已經(jīng)被證實(shí)成為文本和程序編輯器的事實(shí)標(biāo)準(zhǔn)。

9、FirHtml網(wǎng)頁(yè)編輯器

FirHtml網(wǎng)頁(yè)編輯器一個(gè)簡(jiǎn)潔，小巧的網(wǎng)頁(yè)編輯器。 我們通過(guò)上一代，開(kāi)發(fā)出全新的網(wǎng)頁(yè)編輯器，幫助您高效地設(shè)計(jì)出精美的網(wǎng)頁(yè)！新版增加了添加文件域功能。

10、Vim

Vim是Linux上的著名的文本編輯器，他是早年的Vi編輯器的加強(qiáng)版。這個(gè)gVim是windows版的，并且有了標(biāo)準(zhǔn)的windows風(fēng)格的圖形界面，所以叫g(shù)(graphical)Vim。這是一個(gè)國(guó)際版本，會(huì)根據(jù)安裝的平臺(tái)自動(dòng)選擇相應(yīng)語(yǔ)言包，支持中文及其各種編碼，連界面也是中文的，請(qǐng)放心使用。這個(gè)極具Unix特色和風(fēng)格(simple is the best)的編輯器相信會(huì)給您帶來(lái)不同的感受。

11、Visual Studio Code

Visual Studio Code（簡(jiǎn)稱(chēng)“VS Code”）是Microsoft在2015年4月30日Build開(kāi)發(fā)者大會(huì)上正式宣布一個(gè)運(yùn)行于 Mac OS X、Windows和 Linux 之上的，針對(duì)于編寫(xiě)現(xiàn)代Web和云應(yīng)用的跨平臺(tái)源代碼編輯器， [2] 可在桌面上運(yùn)行，并且可用于Windows，macOS和Linux。它具有對(duì)JavaScript，TypeScript和Node.js的內(nèi)置支持，并具有豐富的其他語(yǔ)言（例如C++，C＃，Java，Python，PHP，Go）和運(yùn)行時(shí)（例如.NET和Unity）擴(kuò)展的生態(tài)系統(tǒng).

推薦學(xué)習(xí)：《vscode教程》