<p>只能包含短语内容（如文本、<strong>、<a>、<img>、<span>等），禁止嵌套块级元素（如<div>、<ul>、<h2>），否则浏览器会自动修正DOM结构，导致样式、JS和无障碍失效。
直接用 <p> 包裹纯文本、行内元素即可，不需要额外包装，也不允许塞块级标签——这是浏览器解析器强制执行的规则，不是样式问题。
哪些内容能放心塞进 <p>
只要属于“短语内容（phrasing content）”，就合法：
• 纯文本，比如 "欢迎注册我们的服务"
• <strong>、<em>、<small>、<mark>
• <a>（哪怕里面套了 <img> 或 <span>）
• <img>、<button>、<time>、<code>、<sub>
• <span>（即使 CSS 设成 display: block，语义仍是行内，不会触发解析错误）
哪些嵌套一看就错，且浏览器会偷偷改 DOM
写进去看似没问题，实际会被解析器当场“切开”：
• <div>、<ul>、<ol>、<h2>～<h6>、<section>、<article>、<table>、<form>
• 连续两个 <p>：<p>第一段<p>第二段</p></p> → 浏览器自动变成 <p></p><p>第二段</p>
• 错误示例：<p>说明文字<div class="tip">小贴士</div></p> → 实际 DOM 是 <p></p><div class="tip">小贴士</div><p></p>
后果：CSS 选择器 p > div 永远不匹配；JS 查不到 document.querySelector('p').children 里的 div；屏幕阅读器跳过中间内容。
想包图文混排或结构化内容，该换什么标签
别硬塞，按语义选容器：
• 需要标题 + 段落 + 按钮？用 <section> 或 <article>，把 <p> 当子元素，其他块级元素作同级兄弟
• 只是想加间距？给 <p> 加 margin-bottom，或给后续块级元素加 margin-top
• 富文本编辑器导出含块级标签？后端或构建时用正则/AST 清洗，比如把 <p><div>...</div></p> 替换为 <div><p>...</p></div>
• 必须保留视觉层级但不想改语义？考虑 display: contents（注意 Safari 15.4+ 支持），让父容器不参与渲染流，只起逻辑分组作用
最常被忽略的一点：浏览器不会报错，但 document.querySelector('p > *') 返回空数组时，往往不是 JS 写错了，而是你写的 HTML 从一开始就没进到 DOM 里。
