VS Code中HTML文件只显示源码是因为其本质是文本编辑器，不内置浏览器渲染功能；正确做法是保存后使用Live Server插件启动本地HTTP服务（如http://127.0.0.1:5500），或通过python3 -m http.server临时起服务，以规避file://协议导致的跨域、模块加载失败等问题。
VSCode 里直接打开 HTML 文件为什么只显示源码？
因为 VSCode 默认用编辑器打开 .html 文件，不是用浏览器运行。你双击或右键“Open with Code”看到的只是文本内容，没触发渲染——这不是 bug，是设计如此。
- 正确做法是：先保存文件（
Cmd + S），再用浏览器手动打开，或借助插件/命令自动唤起浏览器 - 别依赖“右键 → Open With → Default Browser”，macOS 下这个选项默认不出现，需额外配置或安装插件
- 如果文件路径含中文或空格，部分老版本 Live Server 插件会启动失败，建议路径全用英文、无空格
推荐用 Live Server 插件一键预览
这是 macOS 上最稳、最省心的方式，本质是启动一个本地 HTTP 服务（http://127.0.0.1:5500/xxx.html），解决 file:// 协议下 AJAX、ES Module 等被浏览器拦截的问题。
- 在 VSCode 扩展市场搜
Live Server（作者：Ritwick Dey），安装并重启 - 打开任意
.html文件，右下角状态栏会出现Go Live按钮，点它即可自动用默认浏览器打开 - 改完代码保存（
Cmd + S），页面自动刷新——不用手动切窗口、按 F5 - 如端口被占，它会自动换到
5501、5502… 不用手动改配置
不想装插件？终端里用 Python 快速起服务
macOS 自带 Python 3（python3），适合临时调试，尤其当你怀疑插件冲突或想验证纯环境行为时。
- 确保终端当前目录是 HTML 文件所在文件夹：
cd /path/to/your/project - 执行：
python3 -m http.server 8000（端口可任选，避开已占用的就行） - 浏览器访问
http://localhost:8000/your-file.html—— 注意必须带文件名，不能只输http://localhost:8000（除非有index.html） - 该服务不支持热重载，改完要手动刷新；且 Python 2 的
python -m SimpleHTTPServer在 macOS 12+ 已不可用，务必用python3
常见报错和绕过方法
遇到 ERR_CONNECTION_REFUSED 或空白页，大概率是协议或路径问题，不是代码写错了。
立即学习“前端免费学习笔记（深入）”；
-
Not allowed to load local resource：说明你双击了 HTML 文件，走了file://协议。立刻关掉，改用 Live Server 或http.server - Live Server 启动后浏览器打不开：检查 macOS 隐私设置 → “安全性与隐私” → “防火墙”是否关闭；或临时禁用杀毒软件
- 页面样式丢失、JS 报
CORS：确认所有资源（CSS/JS/img）路径是相对路径（如./style.css），别用绝对路径/css/style.css（它会从根目录找，而本地服务根是项目文件夹）
