双击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/ 这样的路径，且页面元素（如 <h1>、<img>）已渲染成视觉内容；如果看到带缩进的标签、尖括号全裸露、无样式无图片，那基本就是被当文本打开了。
- 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://协议下：同源策略生效，静态资源可正常加载 - 即使最简单的页面，含
<script type="module">也必须走 HTTP 协议，否则直接报错
Mac 上用 Safari 打开 HTML 显示源码？关掉「显示网页源代码」快捷键
Safari 默认按 Cmd + U 是「显示网页源代码」，如果你不小心按了，就会覆盖当前页面、只显示 HTML 文本。这不是文件问题，是浏览器当前视图模式被切换了。关掉只需再按一次 Cmd + U，或点击菜单栏「显示」→ 「网页检查器」→ 关闭「源代码」标签页。
立即学习“前端免费学习笔记（深入）”；
- Chrome / Edge：按
Ctrl+U（Win）或Cmd+U（Mac）也会进入源码查看模式，退出同样再按一次 - 确认是否真“打开失败”：试试新建空白 HTML 文件，写
<h1>test</h1>，保存为test.html，再用 Chrome 右键「在浏览器中打开」——如果仍显示源码，说明默认打开方式绑定错了 - Windows 修改默认打开方式：
设置 → 应用 → 默认应用 → 按文件类型指定默认应用 → .html → 选 Microsoft Edge
文件本身没问题，问题永远出在「谁在打开它」和「用什么协议打开」。哪怕是最小的 <html><body>hi</body></html>，只要没被浏览器以 HTML 模式解析，就只是字符串。
