html骨架标签必须严格嵌套，因为浏览器构建dom树时若发现或未被包裹、或顺序颠倒，会因引擎差异自动纠错，导致失效、被忽略、css加载失败、document.title读不到值、页面乱码、seo抓取失败；必须首行无前置字符，是唯一根元素，和须为其直接子元素且顺序固定。
HTML骨架标签为什么必须严格嵌套
浏览器解析HTML时，不是逐行读取文本，而是构建一棵DOM树。如果和没被包在里，或写在之后，浏览器会自动纠错——但纠错逻辑因引擎而异，可能导致<title></title>不生效、<meta>被忽略、甚至CSS加载失败。
常见错误现象：document.title读不到值；页面编码乱码；SEO抓取不到<meta name="description">。
必须位于第一行，且不能有任何字符（包括空格、BOM）前置-
是唯一根元素，所有其他标签必须是它的后代 -
和是的直接子元素，顺序不可颠倒
为什么<div>和<code><section></section>不能混用替代语义结构
视觉上它们都默认块级、无样式，但浏览器和辅助技术依赖标签名推断内容意图。<div>是纯容器，没有任何语义；<code><section></section>明确表示“一个主题独立的内容区块”，会影响屏幕阅读器导航、搜索引擎摘要生成、甚至打印样式划分。
使用场景差异：
- 用
<div>做布局包裹、JS操作容器、CSS样式隔离 <li>用<code><section></section>组织有标题的章节（如文章小节、产品功能模块），且必须配<h2></h2>~<h6></h6> - 误用
<div>替代<code><section></section>会导致Lighthouse可访问性评分下降，且无法被document.querySelector('section')精准定位<p></p>、<span></span>这些内联标签为何不能随便嵌套块级内容HTML规范明确定义了内容模型：
<p></p>只允许内联级内容（文字、<em></em>、<strong></strong>、<a></a>等），禁止直接包含<div>、<code><h3></h3>、<p></p>本身。浏览器遇到<p></p> <div>xxx</div>会自动闭合<p></p>，导致DOM结构意外断裂。典型后果：
- 后续CSS中
p > div选择器失效 - JavaScript遍历
parentNode时跳过预期层级 - 校验工具（如W3C Validator）报错
Element div not allowed as child of element p
正确做法：用
<div>或<code><section></section>包裹需要块级结构的内容，<p></p>只装纯文本或内联元素。<img>和<picture></picture>这类自闭合标签的属性缺失会怎样自闭合标签不靠结束标签维持结构，全靠属性驱动行为。
<img>缺src会显示破损图标，但更隐蔽的问题是缺alt——不仅影响无障碍访问，还会让搜索引擎无法理解图像含义；<picture></picture>缺<source></source>或<img>后备，可能在某些设备上完全不渲染。关键参数差异：
-
<img src="a.jpg" alt="描述文字">：必须同时存在src和alt，alt=""合法（空字符串表示装饰图） -
<picture></picture>内部必须至少一个<source></source>或一个<img>作为fallback - 所有自闭合标签（
<meta>、<link>、<input>）的属性缺失，都会导致对应功能静默失效，而非报错
结构支撑不是靠标签数量，而是靠每个标签是否在正确位置、携带必要属性、遵循内容模型约束。漏掉一个
alt或错放一个<div>，都可能让整个文档结构在机器眼里崩塌。</div> - 后续CSS中
