HTML结构不完整导致页面空白，主因是文档骨架缺失：未声明<!DOCTYPE html>、<html><head><body>标签不成对或缺失，以及<head>中漏掉<meta charset="UTF-8">，致使浏览器无法正确解析渲染。
HTML结构不完整导致页面空白
页面一打开就是白屏，连<body>里那点文字都不见，大概率是文档骨架直接没搭起来。浏览器根本没认出这是个 HTML，自然不会渲染任何东西。
检查三件事：<!DOCTYPE html>有没有；<html>、<head>、<body>三个标签是否成对存在；<head>里有没有漏掉<meta charset="utf-8">——尤其用 VS Code 保存时默认可能带 BOM，会导致解析中断。
- 双击打开的
file://协议下，部分 JS/CSS 可能被浏览器静默拦截，建议用python3 -m http.server 8000启本地服务再测 - 右键“查看网页源代码”，如果一片空白，说明文件压根没加载成功，不是代码问题，是路径或服务器配置问题
-
<script>放在<head>里又没加defer或async，一旦报错（比如Uncaught SyntaxError: Unexpected token '}'），整个 DOM 构建就卡住，后面内容全不出现
p 标签里嵌 div 导致结构被浏览器重写
写 <p><div>文字</div></p> 看似只是多套一层，实际会触发浏览器的“纠错模式”：它会自动把 <div> 挤出 <p>，变成 <p></p><div>文字</div>。如果 CSS 把 <p> 设了 display: none 或 height: 0，而你只盯着 <div> 写样式，就会发现内容“消失”了。
- MDN 明确规定：
<p>的“允许内容”只有内联级元素，<div>是块级，非法嵌套 - 类似陷阱还有：
<ul>直接塞<div>、<li>里放<section>、<a>包整段<article> - 用 Chrome DevTools 的 Elements 面板看实际生成的 DOM 结构，别信编辑器里写的“看起来很整齐”的缩进
过度嵌套使 display: none 误伤全局
当 DOM 深度超过 6 层，Lighthouse 就会标红，但这还不是最要命的——真正让页面变白的，往往是某一层父容器被无意设了 display: none 或 visibility: hidden，结果整棵子树全不可见。尤其常见于用多个 <div class="wrapper"> 套出来的导航栏、卡片、表单区域。
立即学习“前端免费学习笔记（深入）”；
- 在 Console 里执行
document.body.innerHTML，如果返回空字符串，说明内容被清过屏（比如用了document.write()）；如果返回一堆嵌套<div>但没文本，就去查哪层加了隐藏样式 - 用 DevTools 的 Styles 面板逐层往上点选，看
display、visibility、opacity、transform是否有意外值 - 现代布局中，
<nav>、<main>、<section>本身支持display: flex或grid，没必要再包一层<div class="nav-container">—— 这类容器既无语义，又增加隐藏风险
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 层才看到那个多余的 </div>。
