如何使用VSCode设置HTML项目

要在实践中探索 HTML 并开始构建 HTML 网站，我们需要使用文本编辑器设置一个新项目。 本教程系列使用 Visual Studio Code，一个可用于 Mac、Windows 或 Linux 的免费代码编辑器，但您可以使用您喜欢的任何代码编辑器。

打开您喜欢的文本编辑器后，打开一个新的项目文件夹并将其命名为 html-practice。 我们将使用此文件夹来存储我们在本教程系列课程中创建的所有文件和文件夹。

要在 Visual Studio Code 中创建新的项目文件夹，请导航到顶部菜单中的“文件”菜单项，然后选择“将文件夹添加到工作区”。 在新窗口中，单击“新建文件夹”按钮并创建一个名为 html-practice 的新文件夹，如下图所示：

接下来，在 html-practice 文件夹中创建一个名为 index.html 的新文件。 我们将在教程系列中使用这个文件来试验 HTML。 如果您使用 Visual Studio Code，您可以在 html-practice 文件夹中使用 Right Click（在 Windows 上）或 CTRL + Left Click（在 Mac 上）创建一个新文件，选择“New文件”，然后创建文件 index.html，如下 gif 所示：

您现在有一个项目文件夹和文件用于探索 HTML。 我们将在前面的教程中回到这个文件。

CSS 和 HTML 的调试和故障排除

在开始我们的 HTML 练习之前，请注意在编写 HTML 时精度很重要。 即使是额外的空格或输入错误的字符也会使您的代码无法按预期工作。

如果您的 HTML 代码未按预期在浏览器中呈现，请确保您已准确编写代码。 要解决错误，请检查多余或缺失的空格、缺失或拼写错误的标签以及缺失或不正确的标点或字符。 每次更改代码时，请务必先保存文件，然后再将其重新加载到浏览器中以检查结果。

关于自动 HTML 支持功能的快速说明

一些代码编辑器（例如我们在本系列中使用的 Visual Studio Code 编辑器）为编写 HTML 代码提供自动支持。 对于 Visual Studio Code，支持的 包括智能建议和自动完成 。 虽然这种支持通常很有用，但请注意，如果您不习惯使用这些支持功能，您可能会生成额外的代码，这些代码会产生错误。 如果您发现这些功能让人分心，您可以在代码编辑器的首选项中将其关闭。

我们现在准备开始学习 CSS 语言的工作原理。 在下一个教程中，我们将开始探索如何使用 CSS 规则来控制网页上 HTML 内容的样式和布局。