p标签内不能嵌套article，因为p只允许内联元素，浏览器会自动闭合p并将article移出，导致dom与html不一致；应改用article直接包裹或section+article组合。
为什么 p 里不能放 article
浏览器会自动“修复”这个结构，导致 DOM 和你写的 HTML 不一致。p 是短语级（phrasing）内容容器，只允许内联元素（如 span、a、strong），而 article 是块级流内容元素，W3C 明确禁止它作为 p 的子节点。实际渲染时，浏览器遇到 <p><article>...</article></p> 会立刻闭合 p，把 article 移到外面——你写的结构被悄悄改了。
常见错误现象和检测方式
页面样式错乱、CSS 选择器失效（比如 p > article 永远不匹配）、JavaScript 获取不到预期的父节点。用浏览器开发者工具查看 Elements 面板，会发现 p 标签被截断了：原本的 <p><article>...</article></p> 变成 <p></p>
<article>...</article>。控制台不会报错，但 DOM 树已不是你写的那样。
正确替换方案与使用场景
根据语义和布局需求选替代结构：
- 如果想表达「一段文字 + 一篇独立文章」，直接去掉
p，用article包裹全部内容，或用section+article组合 - 如果只是需要视觉上的段落间距，给
article加 CSS：margin-top/margin-bottom，而不是套个无意义的p - 如果必须保留段落语义（比如文章导语），用
div替代p包裹article，但注意div无语义，仅作布局时才用
示例对比：
<!-- 错误 --> <p><article><h2>标题</h2> <p>正文</p></article></p> <p><!-- 正确（推荐语义化）--> <article><h2>标题</h2> <p>正文</p> </article></p><p><!-- 或需外层容器时 --> <section><p>这是导语段落</p> <article><h2>嵌套文章</h2></article></section></p>
自动化检查和构建时拦截
靠肉眼容易漏，建议接入验证环节：
- 用
html-validate配置规则"no-inline-element-with-block-content"，它能捕获这类嵌套 - VS Code 安装插件
HTMLHint，启用attr-value-not-empty等基础规则的同时，自定义校验逻辑（需配合 .htmlhintrc） - CI 流程中加
tidy -errors或nu-html-checker扫描，它们会明确报出 “Element article not allowed as child of element p”
真正难处理的不是改一行代码，而是团队协作中有人习惯性“套个 p 看起来整齐”，结果在 SSR 或服务端渲染时引发不可见的结构偏移——得从提交前的 lint 和 PR 检查卡住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
