首先安装VS Code并创建或打开.html文件，接着编写HTML代码，推荐安装Live Server插件，右键选择“Open with Live Server”即可在浏览器中实时预览，修改后自动刷新，若不使用插件可手动在资源管理器中双击文件用默认浏览器打开。
在 Visual Studio Code（简称 VS Code）中运行 HTML 文件非常简单，只需几个步骤即可快速预览网页效果。以下是详细操作指南：
1. 安装 Visual Studio Code
如果还未安装，请先前往官网 code.visualstudio.com 下载并安装 VS Code。
2. 创建或打开 HTML 文件
启动 VS Code 后，执行以下任一操作：
- 点击“文件” → “打开文件”或“打开文件夹”，选择已有 HTML 项目
- 新建一个文件，保存为 index.html 或其他以 .html 结尾的名称
3. 编写简单的 HTML 代码（可选）
在文件中输入基础 HTML 结构，例如：
立即学习“前端免费学习笔记（深入）”；
Hello, Visual Studio Code!
4. 安装 Live Server 插件（推荐）
手动刷新太麻烦？使用 Live Server 可实现自动刷新预览：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 点击左侧扩展图标（方块形状）
- 搜索 “Live Server”
- 找到由 Ritwick Dey 开发的插件，点击“安装”
5. 使用 Live Server 运行 HTML
安装完成后：
- 右键点击编辑器中的 HTML 文件
- 选择 “Open with Live Server”
- 浏览器将自动打开，显示你的网页内容
此后，每次修改代码并保存，浏览器会自动刷新，实时查看效果。
6. 手动打开 HTML（无插件方法）
如果不安装插件，也可以：
- 在 VS Code 中右键 HTML 文件
- 选择“在资源管理器中显示”
- 找到该文件，双击用默认浏览器打开
但这种方式不会自动刷新，需手动重新加载页面。
基本上就这些。配置一次 Live Server，之后写前端代码会轻松很多。不复杂但容易忽略细节，比如文件后缀和插件启用状态。确保文件保存为 .html 格式，并确认插件已启用。基本上就这些。
