p标签内可安全嵌入strong、em、span、a、img（带alt）、code、kbd、time、button、input、select、textarea等短语内容元素，br仅限必要换行且不可替代语义结构。
标签里嵌内联元素本身没问题，只要不越界——语义完整的关键不是“能不能放”，而是“放了之后浏览器还认不认你写的结构”。
哪些内联元素能直接塞进 p 且不触发 DOM 修复
HTML 规范明确允许 p 包含 phrasing content（短语内容），这类元素天然适配段落语义，浏览器不会动它：
-
strong、em、span、a—— 安全，语义清晰 -
img（带alt）—— 合法，但注意：若图片是装饰性或布局用途，应改用 CSS 背景 -
code、kbd、time、button—— 全部合法，kbd尤其适合组合键标注，如<kbd>Ctrl</kbd><kbd>S</kbd> -
input、select、textarea—— 可以放，但语义上表示“段落中嵌入可交互控件”，需确保上下文合理（比如“请输入您的<input type="email">”）
为什么 br 能用但别滥用
br 是唯一被允许用于强制换行的内联元素，但它不是语义分段工具。常见误用：
- 用多个
br模拟段落间距 → 实际该用margin或拆成多个p - 在
p末尾加br试图“留空行” → 浏览器会渲染一个不可见换行符，但语义仍是同一段落，无障碍阅读器不会停顿 -
br不能替代标题或列表 → 比如用<p>第一章<br>第二章</p>，这违背段落定义，应改用h2+p
嵌套时容易被忽略的语义断裂点
即使所有子元素都合法，结构仍可能“失效”，因为语义完整性还取决于上下文意图：
立即学习“前端免费学习笔记（深入）”；
-
img没写alt→ 屏幕阅读器跳过，搜索引擎无法理解图像作用，等于丢了一块语义拼图 -
a缺少href或仅用javascript:void(0)→ 失去链接语义，键盘用户无法聚焦，爬虫不视为可导航节点 -
button放在p里却没包裹操作说明文字 → “点击此处”这种模糊文案让语义弱化，应写成<p>确认提交？<button type="submit">确定</button></p> - 用
span套大段文本再加style="display:block"→ 样式层掩盖不了语义层问题：span仍是内联，不能承载段落级结构，JS 查询p > span会命中，但p > div永远为空
验证结构是否真的完整
别信代码编辑器高亮，也别只看页面渲染效果。真实 DOM 结构必须用浏览器 DevTools 的 Elements 面板验证：
- 右键
p节点 → “Edit as HTML”，手动输入<p>test<div>boom</div></p>→ 立刻看到浏览器自动拆成两个空p和独立div - 运行
document.querySelectorAll('p')，对比你写的数量和实际返回数量 - 检查
p的children属性：若预期有img却返回空集合，大概率是前面有非法闭合或自闭合标签干扰 - 用屏幕阅读器朗读测试段落边界：如果两段文字被连读、无停顿，说明
p被意外合并或缺失
最常被绕过的细节是：语义完整 ≠ 标签不报错，而在于浏览器解析后是否保留你设定的父子关系、无障碍工具能否准确识别、以及未来维护者能否从结构反推原始意图。一旦开始用 div 套 p 或反过来，就不是“怎么嵌套”的问题，而是“该不该用 p”的问题了。
