推荐使用Live Server扩展预览HTML页面，安装后右键选择“Open with Live Server”即可实现保存自动刷新；也可直接在文件资源管理器中双击HTML文件或通过终端命令打开浏览器预览；还可安装“Open in Browser”扩展快速启动默认浏览器查看，但无本地服务器支持；内置Markdown预览仅适用于简单结构的辅助查看。
在 VSCode 中预览 HTML 页面有多种方式，无需离开编辑器就能快速查看页面效果。下面介绍几种常用且实用的方法。
1. 使用“Live Server”扩展
Live Server 是 VSCode 中最流行的 HTML 预览工具之一，支持自动刷新、本地服务器环境和实时更新。
使用步骤：- 打开 VSCode，点击左侧的扩展图标（或按 Ctrl+Shift+X）
- 搜索 “Live Server” 并安装由 Ritwick Deb 开发的官方扩展
- 打开一个 HTML 文件，右键点击编辑器内容区域
- 选择 “Open with Live Server”，浏览器会自动打开并显示页面
保存代码后浏览器自动刷新，适合开发调试；支持静态服务器功能，可处理 AJAX 请求等需要 HTTP 环境的场景。
2. 直接在浏览器中打开 HTML 文件
适用于简单页面，不需要本地服务器的情况。
立即学习“前端免费学习笔记（深入）”；
操作方法：- 在 VSCode 资源管理器中右键点击 HTML 文件
- 选择 “Reveal in File Explorer” 找到文件位置
- 双击该 HTML 文件，系统默认浏览器将打开预览
在 VSCode 终端输入命令：start index.html（Windows）或 open index.html（macOS），即可用默认浏览器打开。
3. 使用内置的“Open in Browser”扩展
如果你希望直接从 VSCode 启动浏览器预览，可以安装 “Open in Browser” 扩展。
使用方式：- 安装 “Open in Browser” 扩展
- 右键点击 HTML 文件，选择 “Open in Default Browser”
- 页面将在默认浏览器中打开
此方式不启动本地服务器，某些依赖路径或脚本的功能可能无法正常运行。
4. 利用 VSCode 内置的 Markdown 预览逻辑（间接方式）
虽然 VSCode 不原生支持 HTML 内联预览，但可通过将 HTML 输出转换为 Markdown 预览来查看部分内容（仅限简单结构）。
不推荐用于完整页面预览，仅作辅助参考。基本上就这些。对于日常开发，推荐使用 Live Server，它稳定、功能全，能模拟真实运行环境。其他方式适合临时查看或轻量需求。选择合适的方法能大幅提升编码效率。
