<p>标签内不能嵌套<div>、<section>、<main>、<article>等块级元素，因W3C规定其仅允许内联内容，否则浏览器会错误解析导致布局和JS异常。
哪些标签不能往 <p></p> 里塞
直接说结论：<div>、<code><ol></ol>、<ul></ul>、<section></section>、<header></header> —— 全都不行。浏览器会自动“修复”这种错误，但结果不可控：可能把 <p></p> 拆成两个，也可能把块级内容挤到外面，导致样式错位、JS 获取内容异常。
原因很简单：<p></p> 是语义明确的“段落”，W3C 规定它只能包含内联内容（文本、<strong></strong>、<em></em>、<a></a> 等），不能承载结构型区块。
- 错误写法：
<p><div>内容</div></p>→ 浏览器实际解析为<p></p><div>内容</div><p></p> - 替代方案：用
<div> 或 <code><section></section>包裹段落，而不是反过来 - 例外：
<a></a>在 HTML5 中允许包裹块级元素（如<div>），但 <code><p></p>不在此列<li>里面能放什么，边界在哪<li>是少数几个“宽松”的块级容器：它允许嵌套<p></p>、<div>、<code><ul></ul>、甚至多层<ol></ol>，只要不破坏列表整体结构。但宽松不等于随意——关键约束是：子内容必须完整闭合在
<li>内部，且不能出现交叉嵌套。
Article To Html下载文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 合法：
<li><p>说明文字</p><ul><li>子项</li></ul></li> - 非法：
<li><p>文字</li></p>（交叉闭合，解析失败） - 注意：
<li>本身不能脱离<ul></ul>或<ol></ol>单独存在，否则语义断裂，辅助技术无法识别
<main></main>和<section></section>谁包谁，为什么不能颠倒<main></main>必须是顶层容器，绝不能被<section></section>、<article></article>、<header></header>或任何其他语义标签包裹。这是 W3C 明确规定的硬性限制。根本原因在于语义唯一性：
<main></main>表示整页中“唯一可独立分发的核心内容”，一旦被嵌套，就失去了“主干”身份，变成普通区块。- 错误：
<section><main>正文</main></section>→ 屏幕阅读器忽略<main></main>的快捷导航，SEO 工具降权 - 正确：
<main><section>第一章</section><section>第二章</section></main> - 混淆点：
<section></section>可以无限嵌套，但<main></main>只能出现一次，且必须直属于
嵌套超过三层时，该删
<div> 还是换标签 <p>三层嵌套不是技术红线，而是语义警戒线。如果某一层 <code><div> 既没 class、也没 id、也不参与 JS 逻辑，只用来撑样式或对齐，那它大概率该删。 <p>真正要做的，是看这一层是否承担可描述的角色：</p> <ul> <li>是“页眉”？→ 换 <code><header></header> - 合法：
- 是“导航区”？→ 换
<nav></nav> - 是“卡片内容区”？→ 换
<article></article>或<section></section>，而非<div class="card-body"> <li>纯样式用途？→ 直接用 CSS Grid / Flex 布局控制，不靠嵌套</li> <p>最容易被忽略的是：浏览器渲染正常 ≠ 结构合法。自动化测试、读屏器、SEO 工具全靠标签语义工作，嵌套错一层，它们就“看不懂”整块内容。</p> </div>
