随着前端开发的迅猛发展，越来越多的开发者开始使用 Visual Studio Code（VSCode）这款轻量级的代码编辑器。无论是新手还是经验丰富的开发者，VSCode 因其丰富的插件生态、强大的功能和良好的用户体验，成为了众多开发者的首选工具。在本篇文章中，我们将介绍如何在 VSCode 中运行 HTML 代码，帮助你更高效地进行前端开发。
首先我们需要下载并安装 VSCode。如果你还没有安装，可以访问 VSCode 官方网站，选择适合自己操作系统的安装版本进行下载。安装完成后打开 VSCode，你将看到一个简洁的界面。为方便后续操作，我们建议你创建一个新的工作文件夹，用于存放你的 HTML 文件。
接下来在工作文件夹中创建一个新的 HTML 文件。点击左侧资源管理器中的“新建文件”按钮，命名为 index.html。这样你就创建了一个 HTML 文件。在 index.html 文件中，输入以下基本的 HTML 结构：
<!DOCTYPE html> <html lang=zh> <head> <meta charset=UTF8> <meta name=viewport content=width=devicewidth, initialscale=1.0> <title>我的第一个 HTML 页面</title> </head> <body> <h1>欢迎来到我的第一个网页！</h1> <p>这是一个使用 VSCode 编写的 HTML 示例。</p> </body> </html> 完成基本结构后，保存文件。此时你可以直接在 VSCode 中查看 HTML 文件的代码，但如何运行它呢？这里有几种简单的方法。
第一种：使用 Live Server 插件。Live Server 是一个非常流行的扩展，可以使你在 VSCode 中轻松启动一个本地开发服务。安装 Live Server 插件非常简单。首先点击左侧边栏中的扩展图标（四个方块的图标），在搜索框中输入“Live Server”。找到目标插件后，点击“安装”按钮。
安装完成后重新加载 VSCode。打开你的 index.html 文件，在编辑器中右键单击，然后选择 “Open with Live Server”。这时浏览器将自动打开，并显示你的 HTML 页面。每当你修改代码并保存时，浏览器会自动刷新，方便你实时查看效果。
第二种：使用直接打开方式。你也可以直接在文件管理器中找到你的 index.html 文件，双击打开。这种方法不需要安装任何插件，但相较于使用 Live Server，当你修改代码后需要手动刷新浏览器来查看更新内容。
除了以上两种方法，VSCode 还支持通过终端运行 HTML 代码。虽然这种方法没有图形化界面那么直观，但如果你熟悉命令行操作，这也是一个不错的选择。打开 VSCode 内置终端，输入命令：
start index.html 按下回车键你的默认浏览器将会打开 index.html 文件。但这种方法在某些操作系统中可能会略有不同，请依据你所使用的操作系统调整命令。
总之无论是使用 Live Server 插件，还是直接打开文件，VSCode 都为我们提供了多种方法来运行 HTML 代码，这使得前端开发变得更加高效。通过合理利用这些工具和插件，你可以专注于代码的编写与优化，而不必为环境设置而烦恼。
最后希望每位通过 VSCode 学习 HTML 的开发者，都能在这个过程中找到乐趣，并进一步深入前端开发的广阔世界。如果你有更多的兴趣，可以继续探索 CSS 和 JavaScript 的使用，将你的网页打造成更加精彩的作品!
