双击HTML文件显示源码的根本原因是用file://协议直接打开或被纯文本编辑器打开，而非通过HTTP协议由浏览器解析渲染；应使用Chrome等浏览器右键打开或VS Code的Live Server插件启动本地服务器。

双击打开 HTML 文件却显示源码？不是浏览器问题，是协议搞错了

HTML 文件双击后在浏览器里显示的是原始代码而非渲染后的页面，根本原因不是浏览器坏了，而是系统用 file:// 协议直接加载了文件，而某些编辑器或环境（尤其是 VS Code 内置预览、部分 IDE 插件、或误配的默认程序）会跳过 HTML 解析，直接以纯文本方式展示。更常见的情况是：你右键用「记事本」或「TextEdit」这类纯文本编辑器打开了它——它们根本不解析 HTML，只读取并显示字符。

怎么确认是不是真被当网页打开了？看地址栏和渲染效果

真正以网页形式打开时，浏览器地址栏应显示类似 file:///D:/demo/index.html 或 http://localhost:8080/ 这样的路径，且页面元素（如

• Windows 上右键 → 「打开方式」→ 选 Chrome / Edge / Firefox，**不要选「记事本」或「VS Code（无 Live Server）」**
• macOS 上右键 → 「打开方式」→ 选 Safari / Chrome，避开「文本编辑」
• 检查浏览器标签页标题：如果是「index.html」但页面空白或全是代码，大概率没触发 HTML 解析引擎

VS Code 里点「Open with Live Server」才真正跑起来

VS Code 自带的「Open with Live Server」扩展（或官方推荐插件）会启动一个本地 HTTP 服务（如 http://127.0.0.1:5500/index.html），这时浏览器通过 http:// 协议请求资源，能正确加载 CSS、JS、相对路径图片等；而直接右键「Reveal in Explorer」再双击打开，走的仍是 file:// 协议，很多现代特性（如 fetch() 读取本地 JSON、模块化 import）会被浏览器策略阻止。

npm install -g http-server
http-server ./my-project  # 启动后访问 http://localhost:8080

• file:// 协议下：fetch('./data.json') 会报 net::ERR_FILE_NOT_FOUND 或跨域错误
• http:// 协议下：同源策略生效，静态资源可正常加载
• 即使最简单的页面，含 也必须走 HTTP 协议，否则直接报错

Mac 上用 Safari 打开 HTML 显示源码？关掉「显示网页源代码」快捷键

Safari 默认按 Cmd + U 是「显示网页源代码」，如果你不小心按了，就会覆盖当前页面、只显示 HTML 文本。这不是文件问题，是浏览器当前视图模式被切换了。关掉只需再按一次 Cmd + U，或点击菜单栏「显示」→ 「网页检查器」→ 关闭「源代码」标签页。

• Chrome / Edge：按 Ctrl+U（Win）或 Cmd+U（Mac）也会进入源码查看模式，退出同样再按一次
• 确认是否真“打开失败”：试试新建空白 HTML 文件，写

  test

  ，保存为 test.html，再用 Chrome 右键「在浏览器中打开」——如果仍显示源码，说明默认打开方式绑定错了
• Windows 修改默认打开方式：设置 → 应用 → 默认应用 → 按文件类型指定默认应用 → .html → 选 Microsoft Edge

文件本身没问题，问题永远出在「谁在打开它」和「用什么协议打开」。哪怕是最小的 hi，只要没被浏览器以 HTML 模式解析，就只是字符串。