推荐使用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。
立即学习“前端免费学习笔记（深入）”；
特点：配置灵活，可自定义端口，适合不想装太多插件的用户。
4. 使用 VSCode 内置的 Markdown 预览（仅限部分场景）
虽然 VSCode 原生不支持 HTML 预览，但如果你只是写一些简单的 HTML 片段，可以借助 Markdown 文件嵌入 HTML 来预览。
- 新建 .md 文件
- 在其中写入 HTML 代码（部分标签有效）
- 使用 Ctrl+Shift+V 快捷键预览 Markdown 效果
局限性：不支持完整 HTML 功能，仅作辅助参考。
基本上就这些主流方式。对于日常开发，强烈建议安装 Live Server，它能极大提升前端调试效率，真正实现“边写边看”的实时体验。