双击打开index.html显示文字需三行基础代码且确保文件名正确、utf-8编码、无富文本格式；fetch报错是因file://协议禁止本地资源加载，须改用http服务如live server或python -m http.server。
能双击打开并显示文字的 index.html，三行代码就够了；卡住的从来不是语法，而是文件保存方式、编码或路径里的隐藏陷阱。
用记事本保存 index.html 为什么总是打不开？
根本原因就三个：文件名实际是 index.html.txt、编码不是 UTF-8、或者用了 Word/WPS 这类富文本编辑器。
- 在记事本「另存为」时，「保存类型」必须选
所有文件（不是默认的文本文档 (*.txt)） - 「文件名」栏里手动输入完整名称：
index.html（不能带引号，也不能漏掉.html） - 编码选
UTF-8（Windows 记事本里叫“UTF-8”即可，不用刻意找“无 BOM”——2026 年主流浏览器已兼容 BOM） - 别用 WPS 或 Word 直接存 HTML：它们会插入不可见的格式控制符，浏览器一读就白屏或报错
Unexpected token
!DOCTYPE html 和
不能省。少任何一个，浏览器可能进怪异模式（Quirks Mode），导致样式错乱、fetch() 失败，甚至整页空白。
-
!DOCTYPE html必须顶格写在第一行，前面不能有空格、注释或空行 -
是根容器，所有内容必须包在里面；以外的内容（比如直接写<p>Hello</p>）不会渲染 - 最简但可运行的结构就是：
!DOCTYPE html<p>OK</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML"><img src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="overflowclass">Doc To HTML</a> <p class="overflowclass">使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p> </div> <a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>
双击打开 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:///.../index.html，而不是你上次从服务器打开留下的http://... - 小技巧：每次改完，在
里加个临时数字，比如<p>v2</p>，一眼看出是否生效
真正拦住新手的，从来不是标签怎么写，而是文件系统和浏览器协议之间的那层薄薄但关键的隔膜——file:// 下连本地 JSON 都读不了，这种限制不亲手试一次，光看文档根本意识不到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
