HTML中表示自然段落必须用<p>标签，它语义明确、自带间距、支持无障碍和SEO；禁用<div>或<br>模拟段落，禁止嵌套块级元素，空段落应避免使用<p></p>。
用 <p> 标签写段落，不是用 <div> 或换行符
HTML 里表示一个自然段落，必须用 <p> 标签包裹文字，浏览器才把它当语义化的段落处理。很多人直接敲回车、或用 <div> 套文字，结果样式错乱、屏幕阅读器读不出段落结构、SEO 也弱。
常见错误现象：
– 文字挤成一坨，没上下间距
– 用 <br> 模拟段落，导致响应式下断行异常
– 在富文本编辑器里复制粘贴后，<p> 被自动转成 <div>，语义丢失
-
<p>是块级元素，默认带上下外边距（margin），不用额外写 CSS 就有段落呼吸感 - 不要嵌套
<p>：<p><p>内容</p></p>是无效 HTML，浏览器会自动截断内层 - 如果段落里要加链接、强调词，直接在
<p>里放<a>、<strong>即可，合法且推荐
空段落怎么写？别用 <p></p>
想空一行？别写空的 <p></p> —— 它仍会渲染出默认 margin，视觉上比预期高，而且语义上“空段落”本身就不合理。
使用场景：
– 邮件模板里需要留白位置
– CMS 输出时动态判断是否显示某段文字，但占位需一致
– 表单说明文字之间需要可控间距
立即学习“前端免费学习笔记（深入）”；
- 真要留空行，用
<div class="spacer"></div>+ CSS 控制高度更稳妥 - 若必须用语义化标签，
<p> </p>可触发渲染，但属于 hack，不推荐长期维护 - 现代方案：给
<p>加class，用 CSS 的:empty伪类隐藏，或用margin-bottom: 0覆盖
<p> 里面能放什么？这些内容会被自动忽略
<p> 是文本容器，只该放“流内容”（phrasing content）：文字、<span>、<em>、<a>、<img>（行内图）等。放块级元素会触发浏览器纠错机制，导致意外闭合。
典型错误：
– <p>文字<div>子容器</div>继续文字</p> → 浏览器实际解析为 <p>文字</p><div>子容器</div><p>继续文字</p>
– <p><h3>标题</h3></p> → <h3> 被踢到 <p> 外，<p> 提前关闭
- 图片放段落里可以，但记得加
alt，且避免纯装饰图塞进<p> -
<iframe>、<video>等嵌入式内容允许放在<p>中（HTML5 起），但要考虑可访问性 - 表格、列表、其他标题标签（
<h1>–<h6>）一律禁止嵌套在<p>内
移动端和无障碍要注意的细节
<p> 默认行为在手机上基本可靠，但某些老 Android WebView 或微信内置浏览器对 margin 压缩异常；而对视障用户来说，<p> 是屏幕阅读器识别段落边界的关键信号。
- 不要用
font-size: 0或visibility: hidden隐藏<p>，会同时抹掉语义；要用aria-hidden="true"+display: none组合 - 长段落建议控制每行字符数（CSS
max-width: 65ch），否则 iOS Safari 会撑宽 viewport - 避免给
<p>设固定height，容易截断文字，尤其中文字体 fallback 时行高突变
