HTML规范禁止包含块级元素，因此...会被浏览器强制修正为...，导致DOM结构崩坏、样式失效、选择器失配。
标签里直接套 <a></a> 本身合法，但一旦 <a></a> 里再塞块级元素（比如 <div>、<code><p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill10246" title="HTML Text Extract"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20dee630206.jpg" alt="HTML Text Extract" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill10246" title="HTML Text Extract">HTML Text Extract</a>
<p>从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。</p>
</div>
<a href="/xiazai/skill10246" title="HTML Text Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>、<h2></h2>），浏览器立刻终止 <p></p> 解析——排版错乱不是样式问题，是 DOM 结构当场被重写。
为什么 <p><a><div>...</div></a></p> 会失效
HTML 规范明确禁止 <p></p> 包含块级元素。<a></a> 在 HTML5 中虽允许包裹块级内容，但 <p></p> 的“内容模型”没变：它只接受短语内容（phrasing content），<div> 不在此列。浏览器解析到 <code><div> 开始时，会立即闭合前面所有未闭合的 <code><p></p>，结果变成：<p></p>
<a><div>...</div></a>。p > a > div 这类选择器全部失配，padding/margin 也全不生效。
常见错误写法与对应现象
以下写法看着“能显示”，实则结构已崩：
-
<p><a href="#"><div class="card">标题</div></a></p>→ 卡片脱离<p></p>，上下 margin 消失，点击区域只剩文字部分 -
<p><a href="#"><h3>标题</h3></a></p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>→<h3></h3>被踢出，<p></p>自动闭合，页面出现空段落+孤立标题 -
<p><a href="#">文字</a>和<a href="#">更多</a></p>→ 合法，但若中间加了换行或空格，可能触发意外的空白折叠
正确替代方案（按场景选）
核心原则：别让 <p></p> 承担布局职责。
- 整块卡片可点击 → 改用
<div> + <code>role="link"+tabindex="0"，再用 JS 绑定click和Enter/Space事件 - 需要语义化链接但含图文 → 把
<p></p>拆成<div>，用 <code><a></a>包裹内联内容，标题用<span></span>或<strong></strong> - 仅文字链接需强调 → 留
<p></p>，但链接只包纯文本或<span></span>，禁用任何块级标签 - 服务端模板（如 Django / EJS）中动态生成 → 必须确保每个分支都产出合法嵌套，不能靠“反正浏览器会修”
- 在 Chrome DevTools 的 Elements 面板中右键最外层容器 → “Edit as HTML”，删一个空格再回车：如果子节点位置跳动，说明原始结构仍非法
- 运行
document.querySelector('p > a > div')，返回null就对了；如果返回元素，说明还没修干净 - 粘贴代码到 W3C Validator，重点看 “Element div not allowed as child of element p” 类报错
怎么快速验证是否已修复
别信肉眼渲染，看真实 DOM：
真正难的不是改一行代码，而是意识到：排版异常往往不是 CSS 没写对，而是你写的 HTML 根本没进到浏览器的 DOM 里——它在解析阶段就被悄悄替换了。
