首先保存文件为.html格式，再通过浏览器或Live Server插件打开预览；推荐安装Live Server实现本地服务器运行与实时刷新，提升开发体验。
在 VS Code 上运行 HTML 文件并不需要复杂的配置，只需几个简单步骤即可预览页面效果。VS Code 本身是一个代码编辑器，不直接运行 HTML，但可以通过浏览器或插件快速打开和查看。
1. 准备工作：安装 VS Code 和浏览器
确保你已经安装了：
- 最新版 Visual Studio Code
- 任意现代浏览器（如 Chrome、Edge、Firefox）
2. 创建并保存 HTML 文件
打开 VS Code，新建一个文件：
- 点击“文件” → “新建文件”
- 输入基础 HTML 代码，例如：
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>测试页面</title>
</head>
<body>
<h1>Hello, VS Code!</h1>
</body>
</html>
- 点击“文件” → “另存为”，将文件保存为 index.html（注意后缀必须是 .html）
3. 使用浏览器打开 HTML 文件
最简单的方法是直接用浏览器打开文件：
立即学习“前端免费学习笔记（深入）”；
- 在 VS Code 中右键编辑器空白处
- 选择“在浏览器中打开”（如果没有该选项，请看下一步）
- 或者手动进入文件所在文件夹，双击 .html 文件用默认浏览器打开
4. 安装 Live Server 插件（推荐）
Live Server 可以启动本地服务器并支持实时刷新，开发更方便。
- 在 VS Code 左侧点击扩展图标（四个方块）
- 搜索 Live Server，由 Ritwick Dey 开发的插件
- 点击“安装”
- 安装完成后，右下角会出现“Go Live”按钮
- 点击“Go Live”，浏览器会自动打开并显示你的 HTML 页面
- 修改代码保存后，页面会自动刷新
5. 关闭服务器
使用完后，可点击右下角“Port: 5500”旁的关闭图标，停止本地服务。
基本上就这些。只要保存为 .html 文件，再通过浏览器或 Live Server 打开，就能看到效果。不复杂但容易忽略的是文件后缀和插件的使用。开启 Live Server 后，开发体验会大幅提升。
