双击打开显示源码而非渲染页面的根本原因是文件关联错误或扩展名/编码不规范。需确认文件类型为html document、扩展名为index.html（非index.html.txt）、保存时选择“所有文件”、用file:///路径或拖拽至浏览器打开，并确保doctype声明正确、无bom、标签闭合完整；file://协议下js功能受限，建议使用live server等本地服务器开发。
双击打开显示源码而不是渲染页面？检查文件扩展名和编码
根本原因通常是系统把 .html 文件错误关联到了文本编辑器（比如记事本、VS Code 默认用纯文本方式打开），或者文件实际保存成了 .txt 扩展名但被手动改成了 .html，导致浏览器没识别为 HTML 文档。
- 右键文件 → “属性”，确认“类型”一栏显示的是
HTML Document，不是Text Document - 在资源管理器中开启“文件扩展名”显示（设置 → 文件资源管理器选项 → 查看 → 取消勾选“隐藏已知文件类型的扩展名”），确认文件名确实是
index.html，而非index.html.txt - 用记事本另存为时，务必在“另存为类型”下拉菜单中选择
所有文件，否则会自动加.txt
用浏览器手动打开却仍是代码？试试拖拽或地址栏输入 file:// 路径
直接双击可能触发错误关联，而浏览器的“打开文件”菜单有时会跳过 MIME 类型检测，导致以纯文本模式加载。更可靠的方式是绕过系统关联，强制浏览器按 HTML 解析：
- 把
.html文件直接拖进已打开的 Chrome / Edge / Firefox 窗口 - 在浏览器地址栏输入完整本地路径，例如：
file:///C:/my-project/index.html（注意是三个斜杠） - 不要用
file://C:\my-project\index.html这种写法——反斜杠和缺少前缀会导致解析失败
页面打开后还是显示代码？检查是否漏写了 或标签闭合错误
即使扩展名正确、路径无误，浏览器也可能因语法严重错误降级为“文档模式：Quirks Mode”，部分旧版 IE 或严格解析器会直接输出原始内容（尤其当开头有 BOM 或非法字符时）：
- 确保文件第一行是
，且前面**不能有任何空格、BOM、注释或空行** - 用 VS Code 打开 → 右下角查看编码格式，选
UTF-8（不要用UTF-8 with BOM） - 检查是否有未闭合的
<script></script>或<style></style>标签，某些情况下会导致后续 HTML 不被解析
<!DOCTYPE html> <html> <head><title>Test</title></head> <body> <p>Hello World</p><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> </body> </html>
服务器环境下正常，本地 file:// 却不工作？警惕跨域和 API 限制
这不是“没渲染”，而是渲染了但 JS 报错或资源加载失败，导致页面空白或残留代码片段。Chrome 等浏览器对 file:// 协议有严格限制：
- AJAX 请求、
fetch()、localStorage在file://下默认被禁用，JS 报Access to script at 'file:///...' from origin 'null' is blocked - 图片、CSS、JS 路径若用相对路径（如
./style.css）通常没问题；但用/style.css（根路径）会指向磁盘根目录，404 - 开发阶段建议用轻量服务器，比如 VS Code 的 Live Server 插件，或命令行运行：
npx serve -s .
