语义化标签嵌套错误虽不报错，但会强制修改DOM结构：<p>内禁放<div>等块级元素，因它仅允许行内容；<header>/<footer>禁止嵌套<nav>等无关标签；<ul>必须直接包裹<li>；void元素如<img>写成<img/>会被解析为两个标签，引发结构偏移。
语义化标签嵌套错误不会报错，但会悄悄改写 DOM 结构——你写的和浏览器实际渲染的，根本不是一回事。
为什么 <p> 里不能放 <div>、<ul> 或 <h2>
<p> 是短语级容器，W3C 明确规定它只能包含文本、<span>、<em>、<strong>、<img> 这类行内容（phrasing content）。一旦塞进 <div> 或 <ul>，浏览器立刻关闭当前 <p>，把后续内容扔到外面。
常见现象包括：
- 写的是
<p><div>文字</div></p>，Elements 面板里却看到<p></p><div>文字</div> - CSS 中
p > div选择器完全不生效 - JS 执行
document.querySelector('p').children返回空列表
想包裹多块内容？用 <section> 或 <article> 替代 <p>；想加标题或列表？先关掉 <p>，再在父容器里放 <h2> 和 <ul>。
立即学习“前端免费学习笔记（深入）”；
<header> 和 <footer> 里哪些标签绝对不能嵌套
<header> 不是“页面顶部大横条”，而是“某个区块的页眉”。它语义上只容许与该区块直接相关的元信息：比如 <h1>～<h6>、<logo>（自定义）、<p>（说明性文字），但禁止嵌套 <nav>、<aside>、<main> 或另一个 <header>。
同理，<footer> 只能承载当前上下文的尾部信息（版权、联系方式、相关链接），不能塞进 <nav>、<form> 或 <section>。
错误示例：
<header> <nav><ul><li>首页</li></ul></nav> </header>
正确做法：把 <nav> 提一级，和 <header> 并列，或放在 <body> 直接子级；若需导航+页眉组合，用 <section> 包裹二者，再各自语义化。
<ul> 和 <ol> 只能直接包 <li>
<ul> 的 content model 是 “zero or more <li> elements”，意味着中间不能插 <div>、<p>、<span>，哪怕只是用来加 class 或控制样式。
典型错误写法：
<ul class="menu"> <div class="item"><a href="#">首页</a></div> <div class="item"><a href="#">关于</a></div> </ul>
浏览器会自动拆解：先闭合 <ul>，再把两个 <div> 当作独立节点插入，导致 DOM 结构断裂、CSS 伪类（如 ul li:last-child）失效、无障碍阅读器无法识别为列表。
修复方式只有两种：
- 把
<div class="item">换成<li class="item"> - 如果真需要额外容器（比如做动画组），用
<li><div class="item">...</div></li>，确保<li>是<ul>的直接子元素
自闭合标签写成 <img /> 或 <input></input> 会怎样
HTML5 中 <img>、<input>、<br>、<hr> 是 void 元素，**禁止闭合**。写成 <img src="x" /> 或 <input type="text"></input>，浏览器会当作两个标签处理：第一个被忽略，第二个被当成普通开放标签，导致后续所有元素整体右移一级。
后果很隐蔽：
- 页面右侧莫名出现空白或错位
- 某些区域点击无响应（事件委托目标错乱）
-
document.body.children.length比预期多出一个空节点
检查方法：打开 DevTools → Elements，逐个点开顶层节点，看有没有意外的空 <input> 或 <img> 标签卡在中间；更准的是用 W3C Validator，它会直接报 Void element input is not allowed to have an end tag。
记住：void 标签只写开始形式，属性全小写，不加斜杠，不加结束标签——<img src="x" alt=""> 就够了。
