推荐使用Live Server扩展实现HTML实时预览，安装后右键HTML文件选择Open with Live Server即可启动本地服务器并自动刷新浏览器，支持热重载；也可直接双击HTML文件在浏览器中打开，但需手动刷新；还可选用Preview on Web Server等轻量插件或通过Markdown预览简单HTML片段，其中Live Server最适合日常开发。
VSCode 本身是一个代码编辑器，不能直接运行 HTML 文件来显示页面效果，但可以通过多种方式快速查看 HTML 的运行效果，尤其是实现实时预览。以下是几种常用且高效的方法。
1. 使用 Live Server 扩展（推荐）
Live Server 是 VSCode 中最流行的插件之一，能启动一个本地开发服务器，并支持浏览器自动刷新，实现实时预览效果。
使用步骤：- 打开 VSCode，进入扩展商店（快捷键 Ctrl+Shift+X）
- 搜索 Live Server，由 Ritwick Dey 开发，点击安装
- 安装完成后，打开一个 HTML 文件
- 右键点击编辑区，选择 Open with Live Server
- 浏览器会自动打开并显示页面，修改代码后页面自动刷新
2. 直接在浏览器中打开 HTML 文件
这是最简单的方式，适合快速查看静态页面效果。
操作方法：- 在 VSCode 中右键 HTML 文件
- 选择 Reveal in File Explorer 找到文件位置
- 双击 HTML 文件，用默认浏览器打开
- 或拖拽文件到浏览器标签页中
3. 使用内置的 Preview on Web Server 扩展
除了 Live Server，还有其他轻量级服务器类插件，如 Preview on Web Server。
立即学习“前端免费学习笔记（深入）”；
- 安装该扩展后，右键 HTML 文件
- 选择 Preview on Web Server
- 浏览器打开本地端口（如 http://127.0.0.1:8080）预览
4. 使用 VSCode 内置的 Markdown 预览（仅限部分场景）
虽然 VSCode 原生不支持 HTML 预览，但如果你只是写一些简单的 HTML 片段，可以借助 Markdown 文件嵌入 HTML 来预览。
- 新建 .md 文件
- 在其中写入 HTML 代码（部分标签有效）
- 使用 Ctrl+Shift+V 快捷键预览 Markdown 效果
基本上就这些主流方式。对于日常开发，强烈建议安装 Live Server，它能极大提升前端调试效率，真正实现“边写边看”的实时体验。
