HTML白屏主因是DOM树未建立，应先查Network面板中index.html状态码（404/403）和Content-Type（非text/html会导致下载而非渲染），再验证HTML解析、script执行、路径配置及协议差异问题。
HTML文件根本没被加载或解析
页面完全空白，连 <body> 都没出来，不是 JS 报错导致的“内容消失”，而是整个文档树压根没建起来。这时候别查 JS，先看网络层：
- 打开开发者工具（F12），切到
Network面板，刷新页面，看index.html（或你访问的 HTML 文件）状态码是不是404或403——路径写错、大小写不一致、服务器没配 MIME 类型都会卡在这步 - 右键空白页 → “查看页面源代码”，如果看到原始 HTML 文本（比如有
<html><head>），说明文件加载了但没被当成 HTML 解析；此时重点查响应头里的Content-Type是否为text/html，不是就强制改（如 Express 中加res.set('Content-Type', 'text/html')） - 如果源代码里啥都看不到（一片空），说明服务器返回了空响应或重定向到了一个不存在的地址，用
curl -v http://localhost:3000/index.html看真实响应
HTML语法错误导致解析中断
浏览器遇到严重语法错误（比如未闭合的 <script>、嵌套错乱的 <table>）会尝试容错，但某些情况下直接放弃后续解析，后面所有内容都不显示。典型表现：页面只显示前半部分，或从某一行开始彻底空白。
- 用 W3C Markup Validation Service 粘贴源码验证，重点关注
Unclosed element、Stray end tag类报错 - 常见坑：
<script src="app.js"></script>里面又写了内联 JS（不允许）；<pre>里用了未转义的<导致标签被误解析；<textarea>内容含</textarea>字符串却没做转义 - 临时排查法：把 HTML 从底部往上删，每次删一段刷新，直到页面恢复，就能定位出问题区块
DOM 就绪时机不对或元素获取失败
JS 脚本试图操作还没生成的 DOM 元素，执行时 document.getElementById() 返回 null，后续赋值直接报错并中断，但页面可能已渲染了一部分——这种“半截白屏”容易误判为 HTML 问题。
- 脚本放在
<head>里必须包裹在DOMContentLoaded事件中，否则document.getElementById('xxx')一定返回null - 检查目标元素是否存在且 ID 拼写一致（大小写敏感），例如
getElementById('p1')对应的是<p id="p1">，不是<p id="P1"> - 不要依赖
<p id="p1">Player1</p>的初始文本判断是否生效——它会掩盖p1.innerText = firstname.value的实际效果；建议初始化为空：<p id="p1"></p>，再加.trim()防空格干扰
外部资源路径错误或加载阻塞
CSS/JS 文件 404 不仅影响样式和交互，还可能让浏览器卡住（尤其是同步 <script> 放在 <head> 里），导致后续 HTML 渲染延迟甚至中断。
立即学习“前端免费学习笔记（深入）”；
- 在
Network面板里找红色 404 请求，点开看是哪个src或href路径错了——相对路径层级不对、大小写不一致、扩展名拼错（style.cssvsstyles.css）都很常见 - 本地双击打开时，
file://协议下部分浏览器会拒绝加载某些跨域资源（如某些 CDN 的字体或脚本），换成本地服务器（npx serve或 VS Code Live Server）更可靠 -
<link rel="stylesheet">和<script>的位置会影响渲染流：CSS 放<head>是安全的；JS 同步加载建议放<body>底部，或加defer属性
最常被忽略的其实是路径和编码：中文路径、空格、全角符号、从网页复制带格式的代码，这些看似无关的细节往往直接让 HTML 停在第一步。先确保文件是 UTF-8 编码、后缀是 .html、路径全是英文小写、所有引号用半角，再谈结构和逻辑。
