直接双击html文件用浏览器打开最简单，但file://协议有安全限制导致资源加载失败；应使用python内置服务器或vs code的live server插件启动本地http服务来调试。
用浏览器直接打开 HTML 文件最简单
本地写好的 index.html 或类似文件，双击它，系统默认会用你设置的默认浏览器（chrome、edge、safari 等）打开——这是绝大多数情况下的正确做法。
常见错误现象：file:///Users/xxx/index.html 打开后页面空白、CSS 不生效、图片加载失败、fetch 报 CORS Error。这不是 HTML 写错了，而是浏览器出于安全限制，对本地 file:// 协议做了严格管控。
- 静态资源（如
style.css、data.json）路径必须是相对路径，且文件确实放在对应位置 - 不要在
file://下测试涉及fetch、XMLHttpRequest、Service Worker 的功能 - Mac 上右键“显示简介”里如果看到“已损坏”，不是真损坏，是 Gatekeeper 拦截，需在“系统设置 > 隐私与安全性”里手动允许
需要本地服务器时用 python -m http.server
只要终端里有 Python（3.6+），进到 HTML 文件所在目录，运行：
python -m http.server 8000然后访问 http://localhost:8000 就行。这个命令起的是一个最小 HTTP 服务，绕过了 file:// 的限制。
使用场景：调试含 ajax、es6 modules、import、PWA 功能的页面；团队快速共享原型；CI 构建后预览 dist 目录。
立即学习“前端免费学习笔记（深入）”；
- 端口可换，比如
8000被占了就改用8080 - windows 用户若提示
'python' 不是内部或外部命令，说明没加进 PATH，或者该用py -m http.server - 这个服务器不支持 https、不处理
.htaccess、不代理 API，只是临时用，别当生产环境使
VS Code 里点「Live Server」插件更省事
装好官方推荐的 Live Server 插件（作者：ritwickdey），右键 HTML 文件 → “Open with Live Server”，自动启动服务并打开浏览器，还会监听文件变化，保存即刷新。
为什么这样做：比手敲命令快，自带热重载，支持自定义端口和根路径，适合日常开发。但它底层还是调用了类似 http.server 的逻辑，不是魔法。
- 如果右键没出现该选项，确认插件已启用，并且当前文件后缀确实是
.html - 默认端口是
5500，冲突时会在输出栏提示新端口，比如5501 - 插件不会自动处理跨域，后端 API 仍需单独配代理或 CORS 头
别用记事本或 word 直接“另存为 HTML”
这类工具生成的 HTML 常含冗余标签、乱码 meta、内联样式、非标准字符（比如中文引号、全角空格），浏览器解析容易出错，开发者工具里能看到大量 Uncaught SyntaxError 或渲染错位。
真实使用场景里，HTML 是代码产物，不是文档产物。哪怕只写一行 <h1>Hello</h1>，也该用 VS Code、Sublime、webstorm 这类纯文本编辑器保存为 UTF-8 编码的 .html 文件。
- 检查文件编码：VS Code 右下角看是不是
UTF-8，不是就点它 → “Save with Encoding” → 选UTF-8 - 避免用 Windows 自带的“记事本”，它默认保存为 ANSI，中文会变问号
- 网页中写中文，务必在
里加上<meta charset="utf-8">，否则即使文件是 UTF-8，浏览器也可能猜错
真正麻烦的从来不是“怎么打开”，而是打开之后发现样式没加载、接口 404、控制台一堆红字——这时候得回头确认协议、路径、编码、CORS 这四样东西有没有漏掉哪一环。