推荐使用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。

Browse website - Crawls sites automatically and mounts pages as markdown files you can grep, diff, cat, and explore with standard Unix commands — over SSH or HTTP

将任意网站转换为文件系统，自动抓取网站并将页面挂载为 Markdown 文件，可使用 grep、diff、cat 等标准 Unix 命令进行搜索、比较、读取和浏览。

下载

立即学习“前端免费学习笔记（深入）”；

• 安装该扩展后，右键 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 效果

局限性：不支持完整 HTML 功能，仅作辅助参考。

基本上就这些主流方式。对于日常开发，强烈建议安装 Live Server，它能极大提升前端调试效率，真正实现“边写边看”的实时体验。