开发工具：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教程》
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
