答案是文件扩展名非.html或编码非utf-8导致浏览器无法解析。需确认文件名为index.html（非index.html.txt），用vs code等编辑器检查右下角编码为utf-8而非gbk/ansi，保存时选“所有文件”类型并手动输入.html后缀，避免记事本默认ansi乱码。
文件扩展名和编码格式不对，浏览器根本不会当HTML解析
双击打开后一片空白，或者看到的是原始代码而不是渲染后的页面，大概率是文件没保存成 .html，或编码不是 UTF-8。Windows 记事本默认用 ANSI 保存，中文会变乱码，甚至让 <meta charset="UTF-8"> 失效。
检查方法很简单：右键文件 → “属性” → 看“名称”栏是否真为 index.html（不是 index.html.txt）；用 VS Code 或 Sublime 打开，右下角确认编码显示为 UTF-8，不是 GBK 或 ISO-8859-1。
- 保存时在记事本里选“另存为”，文件类型选“所有文件”，后缀手动敲
.html - VS Code 中按
Ctrl+Shift+P→ 输入 “Save with Encoding” → 选UTF-8 - 路径里别含中文或空格，比如
D:\my site\page.html容易出问题，换成D:\mysite\page.html
HTML结构残缺，浏览器直接放弃解析后续内容
没有 、漏了 <code>、<script></script> 标签没闭合——这些错误不会报红，但可能导致从某一行开始后面所有内容都不显示。典型现象是页面只渲染前两行，后面全黑。
最稳的验证方式：新建一个最小可运行页，内容仅三行：
<p>test</p>
如果这个能显示，说明环境没问题，再逐步把原代码拷进去定位断点。
-
<script src="a.js"></script>里面不能再写 JS 语句，否则解析器卡死 -
<pre class="brush:php;toolbar:false;"></pre>或<textarea></textarea>里的必须写成 <code><，否则被当成新标签解析 - 用 W3C HTML Validator 粘贴源码，重点看
Unclosed element和Stray end tag报错
资源路径错误或 file:// 协议限制导致功能失效
图片不显示、CSS 不生效、JS 报 net::ERR_FILE_NOT_FOUND，多数是路径写错；而 fetch()、XMLHttpRequest 在本地双击打开时直接被浏览器拦截，控制台报 CORS 错误——这不是你代码错，是 file:// 协议的安全策略。
比如 <img src="img/logo.png">，实际文件在 ./images/logo.png，就必然 404；又比如 JS 里写了 fetch("data.json")，双击打开时永远失败。
- 路径优先用相对路径，且以
./开头显式声明当前目录，避免歧义 - 静态资源（图片/CSS/JS）全部放进同一文件夹测试，先去掉层级干扰
- 需要 AJAX 或本地服务器功能时，必须起服务：VS Code 装
Live Server插件，或终端执行python -m http.server 8000，然后访问http://localhost:8000
浏览器缓存或开发者工具没开全，误判为“没显示”
改完代码刷新还是旧页面？可能是缓存；右键“查看网页源代码”发现内容是对的，但页面空白？那问题不在 HTML 结构，而在 CSS 隐藏、JS 报错或字体加载失败。
务必打开开发者工具（F12），分三步看：
- Network 面板：找
index.html的状态码，404是路径错，200但预览为空，看 Response 是否真有内容 - Console 面板：JS 报错会阻塞后续执行，哪怕只有一行
undefined is not a function也可能让整个页面白屏 - Elements 面板：展开
，看内容节点是否存在，若存在但不可见，再查 CSS 的display: none、visibility: hidden或opacity: 0
真正难排查的，往往是 HTML 结构看似完整，但某个嵌套错位（比如 <div>
<p></p>
<div></div>）触发了浏览器容错机制，导致 DOM 树重建异常——这时候删减法比猜更可靠。 </div>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
