能双击打开并显示文字的index.html仅需三行基础代码；卡点在于文件扩展名（非index.html.txt）、utf-8编码、禁用富文本编辑器，且fetch报错源于file://协议限制，须改用http服务。
能双击打开并显示文字的 index.html，三行代码就够了；卡住的从来不是语法，而是文件保存方式、编码或路径里的隐藏陷阱。
用记事本保存 index.html 为什么打不开？
根本原因就三个：index.html.txt 实际扩展名错误、编码不是 UTF-8、用了 Word/WPS 这类富文本编辑器。
- 在记事本「另存为」时，「保存类型」必须选 所有文件（不是默认的“文本文档 (*.txt)”）
- 「文件名」栏里手动输入完整名称：
index.html（不能带引号，也不能漏掉.html） - 编码选
UTF-8（Windows 记事本里叫“UTF-8”即可，2026 年主流浏览器已兼容 BOM） - 绝对不要用 WPS 或 Word 直接存 HTML：它们会插入不可见的格式控制符，浏览器一读就白屏或报错
Unexpected token
!DOCTYPE html 和
不能省。少任何一个，浏览器可能进怪异模式（Quirks Mode），导致样式错乱、fetch() 失败，甚至整页空白。
-
!DOCTYPE html必须顶格写在第一行，前面不能有空格、注释或空行 -
是根容器，所有内容必须包在里面；以外的内容（比如直接写<p>Hello</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a> <p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p> </div> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>）不会渲染 - 最简但可运行的结构就是：
!DOCTYPE html<p>OK</p>
双击打开 index.html 为什么 fetch('./data.json') 报错？
因为双击走的是 file:// 协议，现代浏览器出于安全限制，会直接拒绝跨源请求——哪怕 JSON 就在同一文件夹下。
- 典型错误提示：
Failed to load resource: net::ERR_FILE_NOT_FOUND或Access to fetch at 'file:///data.json' from origin 'null' has been blocked - 这不是代码问题，是协议限制：只有 HTTP 协议下才允许相对路径资源加载
- 临时解决办法：VS Code 安装
Live Server插件，右键菜单点「Open with Live Server」，地址变成http://127.0.0.1:5500/，一切正常 - 命令行替代方案（推荐）：
python -m http.server 8000（Python 3 内置），然后访问http://localhost:8000
改了代码刷新还是旧页面？
浏览器缓存太“聪明”，尤其对 file:// 协议下的页面，有时 Ctrl+R 都不生效。
- 强制刷新快捷键：
Ctrl+F5（Windows/Linux）或Cmd+Shift+R（macOS） - 更彻底的办法：打开开发者工具（
F12），右键刷新按钮 → 「清空缓存并硬性重新加载」 - 务必检查地址栏：确认当前 URL 真的是
file:///C:/xxx/index.html，而不是data:text/html;charset=utf-8,,...（那是你把代码粘贴进了地址栏）
最容易被忽略的其实是文件路径里的中文和空格——某些系统或浏览器（尤其是旧版 Edge）对 file:// 协议下的中文路径支持不稳定，建议先放到 C:\test\ 这类纯英文路径下测试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
