Live Server插件是VSCode中运行HTML的首选方案，因其启动http://本地服务器（如127.0.0.1:5500）绕过file://协议限制，支持fetch、ES模块导入和相对路径；必须打开.html文件后右键选择“Open with Live Server”或点击状态栏“Go Live”按钮。
VSCode 本身不“运行” HTML，它只编辑文件；真正渲染 HTML 的是浏览器。你实际要解决的，是「怎么让浏览器快速、正确地加载并执行你写的 HTML」——关键在协议（file:// 还是 http://）和加载方式。
Live Server 插件：适合开发调试，绕过 file:// 限制
这是绝大多数前端开发者默认选择，不是因为它“高级”，而是它解决了真实问题：JS 的 fetch、ES 模块导入、相对路径资源加载，在 file:// 下全会失败，报错类似 net::ERR_FILE_PROTOCOL 或 CORS error。
- 必须先在编辑器中打开一个
.html文件，右键才有Open with Live Server选项（在资源管理器里右键无效） - 默认端口是
5500，被占用时会自动换端口，但建议提前在设置里搜liveServer.settings.port固定为3000或8080，避免后续调试工具（如launch.json）地址不匹配 - 如果项目结构是
src/index.html，但你想以/为根访问，需设liveServer.settings.root为"./src" - 状态栏右下角的
Go Live按钮，只对当前激活的 HTML 编辑器生效，切到其他标签页就变灰
直接用系统浏览器打开：适合纯静态页面快速验证
不用装插件、不启服务、不配端口，双击或右键“用 Chrome 打开”就行。但它本质走的是 file:// 协议，所有浏览器沙箱规则照常生效。
- 路径含中文或空格时，某些旧版浏览器（尤其是 Edge 默认配置）可能静默禁用 JS，换成 Chrome 或 Firefox 更稳
- 修改代码后必须手动刷新，且容易因缓存看不到更新——可按
Ctrl+F5强制重载，或在 DevTools 的 Network 面板勾选 “Disable cache” - 如果用
fetch("./data.json")加载同目录 JSON，必然失败；改用http://地址（比如 Live Server 启的）才能跑通 - 别信“右键 → Open in Default Browser”——这个功能需要额外插件（如 Open in Browser），VSCode 原生不支持
真正容易被忽略的点是：你以为在“运行 HTML”，其实是在选择加载上下文。Live Server 给你一个最小可用的 HTTP 环境；双击打开只是让浏览器读本地文件——两者能力边界非常清晰，混用就会卡在莫名其妙的报错里。
立即学习“前端免费学习笔记（深入）”；
