HTML结构合法性是页面正确加载、解析与交互的第一道关卡：DOCTYPE缺失或错误触发怪异模式，嵌套超6层导致DOM截断，script未加defer/async阻塞解析。
因为浏览器解析、搜索引擎索引、辅助技术读取，全依赖HTML结构是否合法、语义是否清晰、嵌套是否合理——它不是“写完能显示就行”，而是决定页面能否被正确加载、理解、交互的第一道关卡。
DOCTYPE缺失或错误导致渲染模式错乱
没有<!DOCTYPE html>，或者写成<!doctype HTML>（大小写混用）、<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">（过时DTD），浏览器大概率进入怪异模式（Quirks Mode）。此时CSS盒模型、getBoundingClientRect()返回值、甚至document.body.scrollTop行为都会和标准模式不一致。
- 现象：同一段CSS在Chrome里正常，在IE或旧版Safari里布局塌陷、字体错位
- 验证方式：打开DevTools → Console执行
document.compatMode，返回"BackCompat"即为怪异模式 - 修复：第一行必须是严格小写的
<!DOCTYPE html>，且前面不能有任何字符（包括空格、BOM）
嵌套过深直接触发DOM截断
浏览器流式解析HTML时，每层嵌套都要分配节点内存并做样式继承计算。实测表明，当任意路径上标签嵌套超过6层（如<div><section><article><header><nav><ul><li>），在低端安卓机或弱网环境下，解析器可能提前终止，后续内容根本不会进DOM树。
- 典型高危结构：
<table><tr><td><div><div><div><p>——<td>本身已是一层容器，再叠3层<div>极易踩线 - 替代方案：用
<section>、<article>、<aside>等语义标签替代纯<div>堆叠，它们本身不增加嵌套深度，但能表达层级意图 - 检查方法：Elements面板右键任意节点 →
Show DOM properties→ 查nodeType和parentNode链长度
script位置不当阻塞HTML解析
<script>默认同步阻塞：浏览器遇到它就暂停HTML解析，先下载、编译、执行脚本，再继续往下扫。如果脚本放在<head>里且没加defer或async，首屏内容可能等几秒才出现——哪怕JS本身只有一行console.log("hello")。
立即学习“前端免费学习笔记（深入）”；
- 危险写法：
<head><script src="bundle.js"></script></head> - 安全写法：
<script defer src="bundle.js"></script>（保证执行顺序，不阻塞解析）或<script async src="analytics.js"></script>（独立加载，不保序） - 更优实践：把
<script>移至</body>前，天然实现“解析完再执行”，兼容性最好
真正难调试的从来不是某一行JS报错，而是结构层面的决策：比如<main>里嵌了个<table>，而<table>内部又用了<div>布局；或者为了视觉对齐强行把<h2>改成<h4>却破坏了语义层级。这些不会让控制台报错，但会在SEO、无障碍、首屏渲染三个维度同时失效——而且问题往往要等上线后才暴露。
