是纯视觉换行指令，无语义；是语义化段落容器，自带间距与结构。前者用于地址、诗歌等同段内强制换行，后者用于逻辑完整的独立文本块，混用会损害可访问性、SEO和CSS控制力。
<br> 和 <p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11244" title="Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20d79f23518.jpg" alt="Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11244" title="Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转">Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转</a>
<p>实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。</p>
</div>
<a href="/xiazai/skill11244" title="Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div> 都能“换行”，但它们根本不是同一类东西——一个是视觉断点，一个是语义结构。用错会直接影响可访问性、SEO 和 CSS 控制力。
br 是纯换行指令，不带任何语义
<br> 是空标签，只做一件事：让光标立刻跳到下一行。它不表示新段落、不自带间距、不被屏幕阅读器当作内容分隔符。
- 适用场景很窄：诗歌每行、地址多行、歌词、表单内行内换行（如
<label>姓名<br><input></label>） - 连续写多个
<br><br><br>会堆出大片空白，但这不是设计意图，而是滥用信号 - 不能用 CSS 直接控制它的“高度”，只能靠前后元素的
line-height或外边距间接影响 - 在
<table>、<code><button></button>等替换元素内部，<br>可能被忽略或行为不一致p 是段落容器，自带语义和默认样式
<p></p>必须成对使用（<p>...</p>），它告诉浏览器：“这是一段完整、独立的文本内容”。浏览器默认会给它上下加margin（通常是约1em），形成视觉段落间距。- 搜索引擎和屏幕阅读器靠它识别内容结构；省略或乱套会导致语义断裂
- 可以用 CSS 精确控制：比如
p { margin: 0.5em 0; text-indent: 2em; } - 在响应式布局中，
<p></p>的块级特性让它天然适配宽度变化；而一堆<br>会让文字在小屏上挤成一团 - 不要为了“看起来没间距”就全写成
<p style="margin:0"></p>——那等于放弃语义，倒退回纯视觉排版
常见错误：把 br 当 p 用，或用 p 模拟 br 效果
典型现象：
<p>第一行</p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <p>第二行</p> <p>第三行</p>写地址，结果每行间距过大；或者反过来，在长段落里疯狂插<br>来“分段”，导致无法缩进、无法响应式折行、无法被语音朗读为一段。- 错误写法：
<p>上海市<br>浦东新区<br>张江路123号</p>—— 地址是单段内容，<br>合理；但整个包在<p></p>里是对的 - 错误写法：
<p>这是第一段。</p> <br><p>这是第二段。</p>——<br>在两个<p></p>之间完全多余，浏览器已用margin分隔 - 真正需要控制间距时，改 CSS，别靠堆标签：比如统一设
p { margin-bottom: 1rem; }，而不是每个<p></p>后手动加<br>
怎么选？看内容是否构成一个逻辑段落
问自己一句：这两行文字，删掉中间那个换行，还是一段意思完整的句子吗？
- 是 → 用
<p></p>包裹整段，别拆 - 否 → 比如“春眠不觉晓，
<br>处处闻啼鸟”，诗句分行是形式需要，不是语义分段 → 用<br> - 不确定 → 优先选
<p></p>。HTML5 强调语义优先，宁可多分段，别少结构
最易被忽略的一点：现代框架（如 React/Vue）里，
<br>常被当成“快速修复换行”的捷径，但它绕过了组件粒度和样式作用域。真要可控，应该用 CSS 的white-space或 flex/wrap 布局替代——<br>不该是排版的第一反应。
