<p> 标签内严禁嵌套块级元素（如 <div>、<h2>、<ul>、<section>）及交互式容器，因其内容模型限定为 phrasing content；浏览器会自动截断解析，破坏语义与可访问性。
HTML 嵌套不是“能闭上就行”，很多看似合法的结构会在语义、可访问性或浏览器解析中出问题。关键判断标准是：是否符合 HTML 规范定义的 content model（内容模型），而不是能否被浏览器“勉强渲染出来”。
哪些标签根本不能嵌套在 <p> 里？
<p> 的内容模型是 phrasing content，它明确排除了块级元素和交互式容器。常见误用：
-
<div>、<h2>、<ul>、<section>—— 浏览器会自动截断<p>，比如<p>abc<div>def</div></p>实际解析为<p>abc</p><div>def</div> -
<button>、<select>、<textarea>—— 虽然属于 phrasing content，但部分旧版 Safari/IE 会降级处理或触发 ARIA 检查警告 - 正确替代：用
<span>包文本，用<address>或<aside>替代语义不符的<p>套结构
<li> 只能直接子元素是文本或 phrasing content？错
这是最常被误解的一条。<li> 的内容模型其实是 flow content（比 <p> 宽松得多），所以它允许嵌套：<div>、<h3>、<ul>（形成多层列表）、甚至 <article>。但注意两个硬限制：
- 不能把
<li>直接丢在<body>或<div>里 —— 必须包裹在<ul>、<ol>或<menu>中，否则会被浏览器“踢出”父容器 -
<li>内部若嵌套<ul>，必须紧贴在<li>结束前，不能隔空行或注释 —— 否则某些解析器会视为<li>已结束，新<ul>成为兄弟节点 - 示例合法结构：
<li>标题<ul><li>子项</li></ul></li>
为什么 <a> 套 <button> 会触发 Lighthouse 报错？
这不是样式问题，而是规范层面的禁止行为。<a> 和 <button> 都是 interactive content，HTML 明确规定：interactive content 不得嵌套在另一个 interactive content 中。后果包括：
立即学习“前端免费学习笔记（深入）”；
- 键盘焦点逻辑混乱：Tab 键可能跳过内层
<button>，或触发两次 click - 屏幕阅读器无法准确 announce 嵌套关系，可能读作“链接，包含按钮”，造成操作歧义
- Lighthouse 和 axe-core 会直接标记为 WCAG 4.1.2 违规
- 修复方式：统一用
<button type="button">+ JS 跳转，或用<a>+ CSS 伪类模拟按钮外观，但绝不混用
<table> 的嵌套容错率低到反直觉
浏览器对 <table> 结构异常敏感，轻微嵌套错误就会引发整表重排甚至 DOM 树断裂：
-
<tr>只能作为<table>、<thead>、<tbody>、<tfoot>的直接子元素；放在<div>里等于“扔掉” -
<td>或<th>内部不能再放<tr>—— 常见于想“跨行控制样式”的误操作，实际应使用rowspan/colspan -
<caption>必须是<table>的第一个或最后一个子元素，中间插个注释都会让部分辅助技术忽略它 - 验证建议：用 W3C Markup Validator 检查，别依赖浏览器渲染结果
真正容易被忽略的，是那些“浏览器没报错、页面看起来正常、但自动化测试全挂”的嵌套——它们往往卡在规范边缘，只影响可访问性、SEO 或未来浏览器版本的兼容性。每次写结构前，花 10 秒查下 MDN 上对应标签的 Permitted content 就能避开 80% 的坑。
