应优先用p标签表示语义段落，br仅用于同一语义块内的强制换行；p具备结构意义，影响seo、无障碍访问和css控制，而br无语义且维护困难。
br 是纯换行，p 是语义段落
两者都能让文字跳到下一行，但 br 不表示任何结构或含义，它只是告诉浏览器“现在换行”，连空格都不算；而 p 是一个完整的语义容器，代表“这是一个逻辑独立的文字段落”。搜索引擎靠它识别内容单元，屏幕阅读器靠它分段朗读，CSS 靠它统一控制缩进、行高和响应式断行。
什么时候该用 br，什么时候必须用 p
用 br 的场景极窄，且必须满足：同一语义块内需保留固定换行位置
- 地址：
<p>北京市朝阳区建国路87号<br>中国尊大厦B座12层</p> - 诗歌或歌词：
<p>天青色等烟雨<br>而我在等你</p> -
label内部短提示换行（但更推荐用display: flex或div）
必须用 p 的场景包括：
- 正文、协议条款、产品描述等需要被 SEO 和辅助技术识别为独立内容的文字
- 需要统一设置
text-indent、line-height或媒体查询中调整段距 - 用户可能用键盘“段落跳转”（如 NVDA 的 P 键）或语音朗读时自然停顿
连续写多个 br 是典型反模式
现象：<p>第一行</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML"><img
src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="overflowclass">Doc To HTML</a>
<p class="overflowclass">使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p>
</div>
<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<br><br><br><p>第二行</p> —— 看似制造了段落间距，实则破坏结构
- 屏幕阅读器无法识别这是两个段落，会把中间空白当噪音忽略
- CSS 无法单独控制某个
br的上下距，只能靠前后元素的line-height间接影响，极易误伤其他文本 - 后期维护时想调间距，得手动数
br个数，一不小心就漏掉或重复 - 富文本编辑器导出 HTML 常把回车转成
br，需服务端清洗或 JS 后处理包裹为p
p 的闭合和嵌套规则容易被忽略
br 是自闭合标签，<br> 或 <br> 都合法；p 必须严格成对书写
- 漏写
时，浏览器会自动补全，但补全位置可能错乱 —— 比如<p>A</p> <p>B</p> <p>C</p>实际被解析为三个独立p，DOM 结构已偏离预期 -
p可以包含br，但禁止嵌套另一个p（HTML5 明确报错） - 在
table、pre、li中br行为稳定；但把p塞进span或button里，可能触发重排或验证警告
br，后者必须用 p。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
