是语义分隔符，表示段落级主题的实质性转变，如场景切换或话题转折；错误用于菜单分隔等纯视觉场景，应改用CSS边框，滥用会干扰屏幕阅读器逻辑流。
hr 标签不是视觉分隔线，而是语义分隔符
它表示段落级内容主题的**实质性转变**，比如场景切换、话题转折或叙事断点，不是用来“画一条线”或“增加空白”的。浏览器默认渲染为横线，但那只是 UA stylesheet 的 fallback，不能当作设计工具用。
- 正确场景：
<hr>出现在两个独立故事之间、访谈中换人发言前、文档里章节过渡处 - 错误场景：菜单项之间、卡片底部、表单字段分组线——这些该用
border或margin - 滥用
<hr>会干扰屏幕阅读器逻辑流，AT 可能朗读 “section break” 并暂停，打断连续阅读
hr 的 aria 和 role 处理容易出错
默认 <hr> 已有 role="separator"，无需手动加；若强行加 aria-hidden="true" 或 role="presentation"，反而破坏语义——它本就该被 AT 感知为结构分隔。
- 不要写：
<hr aria-hidden="true">（隐藏后失去语义价值） - 不要包裹在
<div role="presentation"><hr></div>（双重否定，语义被覆盖） - 如需静默视觉线，改用
<div aria-hidden="true" class="divider"></div>+ CSS
hr 在不同浏览器中的默认 margin 不一致
Chrome 给 <hr> 上下各 1em，Firefox 是 .5em，Safari 更小。不重置会导致布局抖动，尤其在响应式卡片网格中。
- 推荐统一重置：
hr { margin: 1.5rem auto; }（数值按设计系统定，但必须显式声明） - 避免只设
margin-top，否则在 flex / grid 容器中可能被压缩或忽略 - 如果父容器用了
display: contents，<hr>的 margin 可能失效，此时需用height+background模拟
用 CSS 自定义 hr 时别破坏语义
可以改颜色、粗细、样式，但不能用 transform: scale(0) 或 opacity: 0 隐藏它——这会让 AT 仍感知到分隔符，但用户看不到，造成认知断层。
立即学习“前端免费学习笔记（深入）”；
- 安全定制方式：
hr { border: none; height: 2px; background: #e0e0e0; } - 禁用默认边框后，必须保留可见的视觉线索，否则等于删除了语义锚点
- 动画慎用：CSS
transition在<hr>上触发重排风险低，但animation若含 opacity 变化，仍可能误导辅助技术
<hr> 当作“免费装饰线”塞进任何需要留白的地方——它承担的是文档结构职责，一旦位置错了，HTML outline 就乱了，后续用 document.querySelectorAll("hr") 做内容分析时拿到的全是噪音。 
