第02章 开发工具

2.1 开发工具

目前前端开发工具非常多，例如Dreamweaver、Sublime Text、Atom、HBuilder、Vscode等。对于有经验的开发者来说，使用哪一款工具都无所谓。不过对于完全没有基础的小伙伴，我还是比较推荐使用HBuilder。

这里有个现象有必要跟初学者说明一下。如果你选择了Dreamweaver作为开发工具，我们一定不要使用Dreamweaver那种传统的、使用界面操作的方式来开发网页。这种开发方式已经被摒弃很久了。我刚刚接触前端开发的时候，也是深受其害。当时跟着一个视频学，第一步点这里，第二步点那里……点点点，全部都是用鼠标来点，点到头都晕了。

大家不要觉得用鼠标“点点点”的方式来开发网页既简单又快速。等学了一段时间会发现，你学到的根本就不是知识，而只是操作步骤。还有，使用Dreamweaver鼠标操作的方式来开发，弊端极其之多！特别是冗余代码，一堆一堆的。这样开发出来的网站可读性和可维护性也非常差。可读性和可维护性，是Web开发中最重要的两个东西。相信我们学到后面，会有很深的理解。

当然，对于刚刚接触HTML的小伙伴来说，Dreamweaver还是一款挺不错的开发工具，这里并非反对大家使用Dreamweaver，而是反对大家使用Dreamweaver那种“鼠标点击”的界面操作方式来开发页面。我强烈建议大家一定要用“代码方式”去写页面，而不是用“鼠标点击”方式去写。

由于我也从事前端开发很多年了，对实际工作还是非常清楚的。在真正的开发中，现在很少有前端工程师会使用Dreamweaver作为开发工具，更多的是使用HBuilder、Sublime Text、Vscode等。对于初学者来说，推荐大家使用HBuilder，因为HBuilder上手最简单。后期的话，推荐Vscode或Sublime Text，因为这两个更能满足真正的前端开发需求。

2.2 使用HBuilder

不管你使用哪款开发工具，在开发的时候，我们都需要新建一个HTML页面，然后再在这个页面中编写代码。

HBuilder是专为前端打造的开发工具，易上手，也是初学者的首选。HBuilder的下载地址为：www.dcloud.io。这一节我们来介绍一下怎么在HBuilder中新建一个HTML页面。

① 新建Web项目：在HBuilder的左上方，依次点击“文件”→“新建”→“Web项目”，如图2-2所示。

② 选择文件路径以及命名文件夹：在对话框中，给文件夹填写一个名字，并且选择文件夹路径（也就是存放文件的位置），其中文件名以及文件路径都可以自己写。然后点击“完成”按钮，如图2-3所示。

③ 新建HTML文件：在HBuilder左侧的项目管理器中，右键单击test文件夹，然后在弹出菜单中依次选择“新建”→“HTML文件”，如图2-4所示。

④ 选择文件路径以及给HTML文件命名：在对话框中选择文件夹路径（也就是存放HTML文件的位置），并且给HTML文件填写一个名字（建议使用英文，不要用中文），然后单击“完成”按钮，如图2-5所示。

⑤ 预览页面：在HBuilder上方的工具栏中找到“预览按钮”，然后点击，就可以在浏览器中查看页面效果了，如图2-6所示。

最后，对于HBuilder的使用，还有两点要跟大家说明一下。

• 对于站点、文件、HTML页面等的命名，一定不要使用中文，而应该使用英文。
• 我们可以在HBuilder上方的工具栏中，依次选择“帮助”→“HBuilder入门”，查看详细的使用教程。当然，你还可以百度搜索更多的使用技巧。小伙伴们自行摸索一下，很简单。