br用于文本内强制换行且每行具独立语义时，如地址、诗歌；hr用于主题逻辑分隔；禁用br替代段落结构。

br 和 hr 不是装饰工具，它们各自承担明确的语义职责：前者是文本流中的强制断点，后者是内容主题的逻辑分隔。

什么时候该用 br，而不是 p 或 CSS？

当换行本身构成内容结构的一部分时，br 才是正确选择。比如地址、诗歌、签名落款——这些场景中每一行都具有独立语义，不是靠段落或 margin 推出来的视觉效果。

• 错误用法：<p>第一行<br>第二行</p> 用来制造“两段”效果（应该用两个 p）
• 正确用法：

  <p>北京市朝阳区<br>建国路8号<br>SOHO现代城A座1201室</p><div class="aritcle_card flexRow artxards">
  											<div class="artcardd flexRow">
  												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf"><img
  														src="https://img.php.cn/upload/skill/000/000/081/178956546773641.jpg" alt="html-ppt-to-pdf" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
  												<div class="aritcle_card_info flexColumn">
  													<a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="overflowclass">html-ppt-to-pdf</a>
  													<p class="overflowclass">将使用 `<section class="slide">` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。</p>
  												</div>
  												<a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
  												</a>
  											</div>
  										</div>

• 注意：br 不影响盒模型，所以 margin-top/margin-bottom 对它无效；若需控制换行后间距，应给包裹它的父元素（如 p）设 margin，而非试图修饰 br

hr 的语义比视觉更重要

hr 渲染为横线只是默认表现，它的本质是“主题变更”的信号。屏幕阅读器会将其读作“分隔线”，搜索引擎也据此理解内容区块边界。

• 别用 hr 来画装饰性线条——改用 div + border-bottom
• 别在 section 或 article 内部滥用 hr：如果两个段落属于同一逻辑单元，就该保持连贯，不用分隔
• 可配合 ARIA 属性增强语义，例如：<hr aria-label="章节分隔">（尤其当样式被禁用时）

span 看似简单，但 display 行为常被误判

span 天生是 inline 元素，这意味着它不响应 width、height、margin-top、margin-bottom —— 这些属性在默认状态下会被浏览器忽略。

• 想让它撑开尺寸？必须显式设置 display: inline-block 或 display: inline-flex
• 想让它垂直居中对齐文字？仅靠 vertical-align 不够，要确认父容器行高和基线位置
• 别把它当 div 用：嵌套过深的 span 会削弱语义，尤其是当内部包含完整句子或交互控件时

真正难的不是记住每个标签怎么写，而是判断哪一段内容“值得被单独标记”。语义错位比样式错位更难调试——它不会报错，但会让辅助技术失效、SEO 降权、协作成本上升。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！