HTML 的开发工具有很多，比如 VSCode、Sublime Text、Atom 等。对于刚接触 HTML 的小伙伴来说，我们推荐使用 VSCode。
VSCode 是现在非常热门的一款主流开发编辑器，它的功能也是非常强大，可以用于前端开发、后端开发、C/C++ 开发等。在现在的前端开发中，VSCode 可以说是最常用的开发工具了，没有之一。
想要使用 VSCode 来进行 HTML 开发，我们需要进行以下 3 步。
- 安装 VSCode。
- 安装插件。
- 运行代码。
VSCode 下载与安装
不管是 Windows 系统还是 Mac 系统，VSCode 的下载和安装都是一样的，我们只需要简单的 2 步就可以了。
① 下载 VSCode：我们打开 VSCode 官网，在首页找到 【Download for XXX】这个按钮，点击就可以自动下载了，如下图所示。
② 安装 VSCode：VSCode 的安装非常简单，只需要像普通软件那样安装就可以了。不过我们并不建议把 VSCode 安装在 C 盘，而是推荐安装到其他盘中。安装完成之后，打开 VSCode，界面如下图所示。
VSCode 安装插件
VSCode 是一个非常自由的开发工具，所以默认情况下它是非常简洁的，并不会额外安装太多的功能。但它的可定制化非常高，我们可以根据自己的需要来安装一些插件。
如果想要使用 VSCode 更好地编写 HTML 代码，我们推荐至少安装以下插件。
- Chinese (Simplified) Language：简体中文包。
- HTML Snippets：提供了常用的 HTML 代码片段。
- HTML CSS Support：为 HTML 文件提供 CSS 的支持。
- Live Server：用于运行 HTML 代码。
- Auto Rename Tag：当重命名一个开始标签或结束标签时，它会自动修改对应的结束标签或开始标签。
- IntelliSense for CSS class names in HTML：如果你在项目中使用了 CSS 框架或有多个 CSS 文件，这个插件能根据你的 CSS 文件为 HTML 中的 class 属性提供智能提示。
- Prettier - Code formatter：虽然这不是专门针对 HTML 的插件，但它可以帮助格式化你的代码（包括 HTML、CSS、JavaScript 等），使代码更加整洁易读。
在 VSCode 中，所有插件的安装都是一样的步骤。首先点击 “扩展（extension）”（即插件商店），然后搜索你想要的插件名（一般是英文名），最后点击 “install（安装）” 就可以安装成功了。
按照下图所示的步骤，我们把必备的插件都安装好了。需要注意的是，如果插件不生效，我们一定要记得重启一下 VSCode。
除了上面这些插件，小伙伴们可以搜索一些关于 HTML 有用的插件，然后自行安装一下即可。
VSCode 运行 HTML 代码
我们接下来给小伙伴们介绍一下如何在 VSCode 中编写和运行 HTML 代码，也是需要简单的几步就可以了。
① 创建项目：首先我们随便在一个系统盘（比如 D 盘）创建一个名为 “web-test” 的文件夹，在 VSCode 左上角依次选择【文件】→【打开文件夹】，然后打开刚刚创建的 “web-test”，如下图 1 所示。一个文件夹就相当于一个项目，就这么简单。
② 创建文件：接着我们将鼠标移到左栏空白处，点击鼠标右键选择【新建文件】，并且输入一个 “test.html” 的文件名。其中 “.html” 是 HTML 文件的后缀名。如下图所示。
③ 编写代码：接下来我们尝试在 test.html 中编写一段 HTML 代码，如下图所示。编写完代码之后，一定要记得保存，一定要记得保存，一定要记得保存（重要的事情说 3 遍）。很多初学者就是没有保存代码，才会导致一堆乱七八糟的问题。
④ 运行代码：由于前面装了一个 Live Server 插件，因此在 VSCode 右下角菜单栏可以找到一个【Go Live】按钮（如下图所示），单击该按钮就会自动打开浏览器查看页面效果了。
在后面的 HTML 学习中，我们都是在 test.html 文件中编写代码，然后来查看页面效果。
