Visual Studio Code（VSCode）是一个强大的代码编辑器，它支持多种编程语言和技术。对于前端开发者而言，使用VSCode创建HTML文件是一个非常基础而重要的技能。本文将为您详细介绍如何在VSCode中创建HTML文件及其基本操作。
安装与配置VSCode
在开始创建HTML文件之前，首先需要确保您已经安装了VSCode。可以从VSCode的官方网站下载并安装适合您操作系统的版本。
安装所需扩展
为了提升HTML开发的效率，您可以安装一些有用的扩展。以下是推荐的一些扩展：
HTML Snippets：提供了常用HTML代码的快速补全。
Live Server：能够实时预览修改后的HTML页面。
Prettier：可以帮助您格式化代码，提高代码的可读性。
在VSCode中打开扩展视图（侧边栏最下方的方块图标），搜索以上扩展并点击“安装”即可。
创建HTML文件
安装好VSCode和相关扩展后，我们可以开始创建HTML文件了。
新建文件
首先，打开VSCode，点击左上角的“文件”菜单，选择“新建文件”或者使用快捷键 Ctrl + N (Windows) 或 Cmd + N (Mac)。
保存文件
新建的文件需要保存为HTML格式。点击“文件”菜单，选择“保存”，或者使用快捷键 Ctrl + S (Windows) 或 Cmd + S (Mac)。在弹出的对话框中，选择保存位置并将文件命名为 index.html。确保文件扩展名为 .html，然后点击“保存”。
编写HTML代码
在创建好HTML文件后，您可以开始编写HTML代码了。HTML的基本结构如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网页</title>
</head>
<body>
<h1>欢迎来到我的网页</h1>
<p>这是我的第一个HTML页面。</p>
</body>
</html>
将上面的代码复制到您的 index.html 文件中。代码中包含了文档类型声明、HTML文档的基本结构以及一个标题和一段文字。
实时预览HTML页面
使用Live Server扩展，您可以实时预览您的HTML网页。确保您已经安装了Live Server扩展后，右键单击编辑器中的HTML文件，选择“Open with Live Server”。在您的浏览器中将打开您刚才创建的网页，您所做的任何修改都会实时反映在网页上。
总结与下一步
在这篇文章中，我们介绍了如何在VSCode中创建HTML文件、编写基础的HTML代码以及如何使用Live Server进行实时预览。通过这些步骤，您可以快速创建并修改HTML网页，进而深入学习其他前端技术，如CSS和JavaScript。在练习中，多尝试不同的HTML标签和属性，以便熟悉HTML的使用。
希望这篇文章能帮助您顺利开始HTML开发！