html结构不完整导致页面空白，主因是文档骨架缺失：未声明、标签不成对或缺失，以及中漏掉，致使浏览器无法正确解析渲染。
HTML结构不完整导致页面空白
页面一打开就是白屏，连里那点文字都不见，大概率是文档骨架直接没搭起来。浏览器根本没认出这是个 HTML，自然不会渲染任何东西。
检查三件事：有没有；<code>、、三个标签是否成对存在；里有没有漏掉<meta charset="utf-8">——尤其用 VS Code 保存时默认可能带 BOM，会导致解析中断。
- 双击打开的
file://协议下，部分 JS/CSS 可能被浏览器静默拦截，建议用python3 -m http.server 8000启本地服务再测 - 右键“查看网页源代码”，如果一片空白，说明文件压根没加载成功，不是代码问题，是路径或服务器配置问题
-
<script></script>放在里又没加defer或async，一旦报错（比如Uncaught SyntaxError: Unexpected token '}'），整个 DOM 构建就卡住，后面内容全不出现
p 标签里嵌 div 导致结构被浏览器重写
写 <p></p>
<div>文字</div>
<div> 挤出 <code><p></p>，变成 <p></p>
<div>文字</div>。如果 CSS 把 <p></p> 设了 display: none 或 height: 0，而你只盯着 <div> 写样式，就会发现内容“消失”了。
<ul><li>MDN 明确规定：<code><p></p> 的“允许内容”只有内联级元素，<div> 是块级，非法嵌套
<li>类似陷阱还有：<code><ul></ul> 直接塞 <div>、<code><li> 里放 <section></section>、<a></a> 包整段 <article></article>
过度嵌套使 display: none 误伤全局
当 DOM 深度超过 6 层，Lighthouse 就会标红，但这还不是最要命的——真正让页面变白的，往往是某一层父容器被无意设了 display: none 或 visibility: hidden，结果整棵子树全不可见。尤其常见于用多个 <div class="wrapper"> 套出来的导航栏、卡片、表单区域。
<ul><li>在 Console 里执行 <code>document.body.innerHTML，如果返回空字符串，说明内容被清过屏（比如用了 document.write()）；如果返回一堆嵌套 <div> 但没文本，就去查哪层加了隐藏样式
<li>用 DevTools 的 Styles 面板逐层往上点选，看 <code>display、visibility、opacity、transform 是否有意外值
<nav></nav>、<main></main>、<section></section> 本身支持 display: flex 或 grid，没必要再包一层 <div class="nav-container"> —— 这类容器既无语义，又增加隐藏风险
<h3>iframe 嵌套过深引发跨域与加载失败</h3>
<p>三层以上的 <code><iframe></iframe> 嵌套（比如 A 页面嵌 B，B 嵌 C，C 嵌 D），不仅首屏延迟明显，更常因跨域限制或 onload 事件未监听导致内容“加载中”状态卡死，视觉上就是白屏。
- 检查 Network 面板，确认每个 iframe 的 Status 是 200，Type 是
document，而不是text/plain或empty - 同域下可用
iframe.contentWindow.location控制跳转，但跨域时只能靠postMessage；若父页没监听message事件，子页发的消息就石沉大海 - 用
loading="lazy"延迟非首屏 iframe 加载，同时提供 fallback 文本，避免加载失败时留白
深层嵌套本身不直接导致空白，但它放大了任意一层的错误——一个没闭合的标签、一处非法嵌套、一个被遗忘的 display: none，在扁平结构里容易暴露，在六层嵌套里会被掩盖得严严实实，直到你翻到第 5 层才看到那个多余的
