本文详解 html5 中元素间合法嵌套关系的官方依据与实用查阅方法，指出 w3c/whatwg 规范与 mdn 文档是唯一权威来源，并说明为何不存在“穷举式表格”，同时提供高效查询策略与常见错误示例。
HTML5 的元素嵌套规则并非基于简单“允许/禁止”的二维表格，而是由语义、上下文和内容模型（content model）共同决定的动态约束体系。例如，<tr> 元素只能作为 <tbody>、<thead>、<tfoot> 或 <table> 的子元素（当 <table> 直接包含 <tr> 时，浏览器会隐式补全 <tbody>），但绝不能嵌套在 <span>、<div> 或 <p> 等流式（flow）容器中——此类误用虽可能被浏览器“容错渲染”，却会导致 DOM 结构异常、无障碍访问失败及验证器报错。
✅ 权威查阅方式如下：
- WHATWG HTML Living Standard：进入 HTML Semantics section，逐个查看元素定义。每个元素条目下明确标注 Content categories、Contexts in which this element can be used（即允许的父元素）和 Content model（即允许的子元素）。例如 <tr> 的规范定义 明确指出其上下文为 "a table element that is not a child of a table element, or a tbody, thead, or tfoot element"。
- MDN Web Docs：搜索如 <tr> MDN 页面，在 “Permitted parents” 和 “Permitted content” 栏中获取清晰、本地化、带示例的总结。
⚠️ 重要提醒：
- 不存在“一键导出的完整父子关系矩阵表”，因为 HTML 是语义驱动而非纯语法驱动；同一元素在不同上下文（如 <li> 在 <ol> vs <ul> vs <menu>）中可能有细微差异；
- 自闭合标签（如 <img>、<input>）无子元素，但其父容器必须满足其所属内容模型（如 <img> 属于 phrasing content，可置于 <p> 内，但 <script> 属于 metadata content，不可直接放在 <p> 中）；
- 浏览器的“纠错解析”（error correction）不等于合法——<div><tr>...</tr></div> 会被重排为 <div></div><tr>...</tr>，破坏预期结构。
? 实践建议：
使用 W3C HTML Validator 实时校验文档结构；在 VS Code 中启用 Auto Close Tag 与 HTML Boilerplate 插件辅助编写；对复杂组件（如自定义表格、表单布局），优先参考规范而非经验直觉。
掌握嵌套规则的本质，是理解 HTML 语义化与可访问性的起点——它保障的不仅是页面能“显示”，更是内容能被正确解析、索引与交互。
立即学习“前端免费学习笔记（深入）”；
