必须用<p>表示独立语义段落,如逻辑完整的文本块;只能用<br>实现同一段落内的纯视觉换行,如地址、诗歌等。混用会破坏可访问性、样式控制与响应式布局。

用 <p> 表达一个完整语义段落,用 <br> 仅在需要强制换行但不构成新段落时插入——二者语义和用途完全不同,不能互换。
什么时候必须用 <p>?
当内容是一个有独立意义的文本块(比如一句话、几句话组成的逻辑单元),且后续可能被 CSS 控制间距、缩进或响应式断行时,必须用 <p>。浏览器默认会给 <p> 添加上下外边距,这是语义化排版的基础。
-
搜索引擎和屏幕阅读器靠
<p>理解内容结构,<br>完全无语义 - 用 CSS 调整段落间距时,
margin对<p>有效,对<br>无效 - 在富文本编辑器或 CMS 中,回车通常生成
<p>,而非<br>
什么时候只能用 <br>?
<br> 是纯表现标签,只表示“此处换行”,不产生新段落、不带任何语义。它唯一合理用途是:在同一段落内需要视觉换行,但逻辑上仍属同一语义单元。
- 地址、诗歌、歌词等需保留特定换行格式的内容:
<p>北京市朝阳区建国路87号<br>中国尊大厦B座12层</p>
- 表单提示文字中嵌入换行(如
<label>内) - 绝对避免用多个
<br><br>模拟段落间距——这是最常见误用
为什么混用或滥用会出问题?
用 <br> 替代 <p> 会导致样式失控和可访问性缺陷;反过来,在诗歌里硬套 <p> 又会破坏原有分行意图。
立即学习“前端免费学习笔记(深入)”;
- CSS 的
text-align、line-height等属性对<p>和其子元素行为不同,<br>不参与盒模型计算 - 移动端响应式设计中,
<p>可通过margin或display调整布局,<br>无法响应 - 使用
aria-label或语音朗读时,<br>被忽略,而<p>被当作停顿节点处理
真正难的不是记住哪个标签怎么写,而是每次敲下回车前,先问一句:这里是要开始一个新段落,还是只是想在这行末尾换行?











