双击index.html显示源码是因为浏览器未将其识别为HTML文件。常见原因包括：文件实际为index.html.txt（扩展名被隐藏）、关联程序错误、缺少DOCTYPE声明、存在BOM或标签未闭合，以及file://协议下浏览器解析机制限制；应检查文件真实扩展名、正确关联浏览器、确保HTML结构合法，并优先使用Live Server等本地服务器调试。
双击 index.html 显示源码，基本可以断定：浏览器压根没把它当 HTML 解析，而是当纯文本读取了——不是代码写错了，是系统或路径层面没“认对人”。
文件扩展名被偷偷加了 .txt
这是新手最常踩的坑。用记事本编辑后另存为时，即使你输入的是 index.html，如果“另存为类型”选的是“文本文档（*.txt）”，系统会强制保存成 index.html.txt。资源管理器默认隐藏扩展名，你看着是 index.html，实际却是带 .txt 的文本文件。
- 打开“文件资源管理器选项” → 取消勾选“隐藏已知文件类型的扩展名”
- 确认文件名结尾确实是
.html，不是.html.txt或.htm - 右键 → “属性”，看“类型”一栏是否显示为
HTML Document，不是Text Document - 用 VS Code、Sublime 等编辑器保存时，务必在编码选择里选
UTF-8 without BOM，BOM 会导致某些浏览器拒绝解析
系统默认用文本编辑器打开 .html 文件
Windows 常把 .html 关联到了记事本、Notepad++ 或 VS Code 的纯文本模式，双击就直接弹出编辑器——你以为是浏览器打开了，其实根本没进浏览器。
- 右键
index.html→ “打开方式” → “选择其他应用” → 勾选“始终使用此应用打开 .html 文件” → 选 Chrome / Edge / Firefox - 别信“推荐的应用”，手动滚动到底部点“更多应用”，再选浏览器
- 验证是否生效：改个简单内容（比如加一句
<p>test</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill10246" title="HTML Text Extract"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20dee630206.jpg" alt="HTML Text Extract" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill10246" title="HTML Text Extract">HTML Text Extract</a> <p>从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。</p> </div> <a href="/xiazai/skill10246" title="HTML Text Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>），保存后双击，看是否渲染出 test 文字
浏览器地址栏显示 file:/// 却仍显示源码
如果已确认是真实 .html 文件、也用浏览器打开了，但地址栏是 file:///C:/... 且页面全是代码，大概率是 HTML 结构不合法，导致浏览器放弃解析，退化为纯文本展示。
- 检查是否有未闭合的
<script></script>或<style></style>标签（尤其注意多行注释或模板字符串里的） - 确认开头有标准声明：
，且它必须是文件第一行，前面不能有任何空格或 BOM 字符 - 打开浏览器开发者工具（F12）→ Console 标签页，看是否有
Parse error或Unexpected token 类错误 - 临时删掉所有 JS 和外部引用，只留最简结构：
<h1>OK</h1>，再试
为什么 Live Server 就没问题？
因为 Live Server 启动的是 http://localhost:5500/，浏览器按 HTTP 协议解析响应头中的 Content-Type: text/html，严格走 HTML 渲染流程；而 file:// 下浏览器不发请求、不读响应头，全靠文件扩展名和内容特征猜测类型——一旦特征不明显（比如缺 DOCTYPE、含非法字符），就 fallback 到文本模式。
真正需要调试交互逻辑、加载本地 JSON、用 import 模块或 fetch('./data.json') 时，file:// 是不可靠的。别纠结“为什么双击不行”，直接用 Live Server 或 python -m http.server——这不是妥协，是绕过浏览器沙箱限制的唯一合理路径。
