最稳方式是双击HTML文件用默认浏览器打开（file://协议），适合静态页；需AJAX等时应使用Live Server插件或python3 -m http.server/npx serve起HTTP服务，避免CORS和404问题。
直接在浏览器里打开 HTML 文件
VS Code 本身不是浏览器，它不渲染 HTML 页面，只是编辑器。想“打开”一个 HTML 文件并看到效果，本质是让系统默认浏览器加载这个文件。
最稳、最快的方式就是右键文件 → 在文件管理器中显示（或打开所在文件夹），然后双击 index.html（或其他 .html 文件）——系统会用默认浏览器打开，地址栏显示的是 file:/// 开头的本地路径。
- 适合静态页面、无 AJAX、不依赖服务器接口的场景
- 注意：如果页面用了
fetch请求本地 JSON、或引入了相对路径的 JS/CSS 但结构不对，可能报CORS错误或 404 —— 因为file://协议下浏览器限制严格 - 不要依赖 VS Code 内置预览插件（如 “Open in Browser”）来判断真实行为，它们有时会伪造服务器环境，掩盖路径问题
用 Live Server 插件起一个本地 HTTP 服务
当页面需要 fetch、WebSocket、Service Worker，或者用了 Webpack/Vite 的开发模式逻辑，就必须走 http:// 协议。这时候得启动一个最小本地服务器。
VS Code 插件 Live Server（作者 Ritwick Dey）是目前最轻量可靠的选择，装完右键 HTML 文件就能点 Open with Live Server。
立即学习“前端免费学习笔记（深入）”；
- 它默认监听
localhost:5500，自动刷新，支持 HTTPS 配置（需额外设liveServer.settings.https） - 注意：它只服务当前文件所在文件夹及子目录，不能跨根目录访问；比如你在
/project/a/index.html启动，就无法从 URL 访问/project/b/data.json - 如果端口被占，它会顺延到
5501，但不会主动提示——遇到打不开，先看终端输出的 actual URL，别硬刷:5500
命令行用 Python 或 npx 起服务（不用插件）
不想装插件、或需要更可控的环境时，终端起服务更透明，也方便后续加代理、HTTPS 或自定义 header。
两个最常用的一行命令：
python3 -m http.server 8000
或（需 Node.js）：
npx serve -s
-
python3 -m http.server是 Python 自带模块，无需安装，但不支持 SPA 的 history fallback（即 React Router 刷新 404） -
npx serve -s默认开启单页应用支持，且自动把当前目录设为根；加-p 3000可指定端口 - 二者都要求你在 HTML 所在目录运行命令，不是 VS Code 工作区根目录——容易 cd 错位置，导致 404
为什么不能直接按 F5 或 Ctrl+Shift+P 运行 HTML？
VS Code 的调试功能（F5）默认面向 Node.js、Python、C# 等可执行语言，HTML 不是运行时目标。即使你装了 Debugger for Chrome 插件，它也只是“连上已打开的 Chrome 实例”，不是“运行 HTML”。
常见误解：
- 以为配置
launch.json就能让 HTML 像脚本一样跑起来 —— 实际上它只是告诉 VS Code 去哪个 URL 加载页面，底层还是靠浏览器 - 在没有启动任何服务的情况下点 “Start Debugging”，会打开空白页或报
Unable to launch browser - 如果项目有
package.json和start脚本，那F5才可能触发 npm run start，但这属于框架层行为，和 HTML 文件本身无关
真正卡住人的地方往往不是“怎么打开”，而是打开后 JS 报错、资源 404、或者 fetch 失败却没意识到是协议限制——这些不会在 VS Code 编辑器里体现，得盯紧浏览器的 DevTools Console 和 Network 面板。
