仅允许嵌套内联级元素（如、、），禁止块级元素（如、）；必须作为或的直接子元素；只允许元数据元素（如、）；须用SVG元素，自定义元素需符合其继承的内容模型。
HTML 元素嵌套没有“绝对标准写法”，只有符合 W3C 内容模型（content model）的合法嵌套才被解析器接受。非法嵌套不会报错，但会导致 DOM 结构异常、样式失效或可访问性问题。
哪些元素不能作为子元素出现在
是“短语级”（phrasing）内容容器，只允许嵌套内联级元素，比如 、、、、
- —— 浏览器会自动闭合前面的
，再开一个新（或丢弃）、—— 同样触发隐式闭合，结构断裂立即学习“前端免费学习笔记（深入）”；
xxx立即学习“前端免费学习笔记（深入）”；
必须直接放在不是独立可渲染元素，它的语义依赖于父列表容器。单独写- item
Element “li” not allowed as child of element “body”。- ✅ 正确：
- one
- two
- ❌ 错误：
- standalone
不能是的子元素）- ⚠️ 注意：
内部（即多层列表）里只能放元数据类元素的内容模型严格限定为“文档元数据”，浏览器只允许特定标签：如、、、（带defer或type="module"更稳妥）、- ❌ 、
、中会被浏览器移到开头（即使你没写标签）- ❌
在中执行时，DOM 尚未构建，若操作document.body会报Cannot read property 'xxx' of null- ✅ 若需运行脚本，用
DOMContentLoaded监听，或加defer属性自定义元素和 SVG 嵌套要守规则
原生 HTML 规则不自动适用于
或自定义元素（-
内部必须用 SVG 命名空间元素，比如- 自定义元素若继承
HTMLUnknownElement，浏览器不校验其子元素；但若扩展内置元素（如extends: "button"），则仍受原生按钮的内容模型限制（例如不能塞）- 用
customElements.define()注册前，确保模板中嵌套符合预期语义，否则辅助技术（如屏幕阅读器）可能无法正确识别最常被忽略的是：W3C 验证器（validator.w3.org）能立刻暴露嵌套错误，但开发者常依赖“看起来正常”就认为没问题 —— 实际上 DOM 树已变形，JS 查询、CSS 选择器、无障碍树都可能出偏差。
- 自定义元素若继承
- ❌
