hr 在 HTML5 中表示段落级内容的主题实质性转折，适用于叙事切换、逻辑跃迁、文体转换等场景；应语义优先，禁用内容与闭合标签，通过 CSS 定制样式但不破坏语义，兼顾辅助技术可访问性。
hr 标签在 HTML5 中已不再是单纯的“水平线”装饰元素，而是被赋予了明确的语义含义：表示段落级内容主题的**实质性转折**。正确使用它，能让长文章既在视觉上清晰分隔，在逻辑结构上也更易被阅读器、搜索引擎和开发者理解。
语义优先：确认是否真属于“主题转折”
不是所有分隔都需要 hr。它适用于以下情况：
- 叙事场景切换（如从回忆切回现实、从城市描写转入人物内心独白）
- 论证逻辑跃迁（如从问题陈述转向解决方案、从现象分析转向数据支撑）
- 文体或视角转换（如正文结束，插入一段引文、读者来信或编者按）
- 章节内部小节之间的非编号式过渡（避免滥用 h2/h3 时的层级混乱）
若只是强调空行、分隔列表项或装饰性线条，应改用 CSS 边距（margin）或伪元素（::after），而非 hr。
HTML5 写法：简洁且无需闭合
HTML5 中 hr 是自闭合标签，不接受内容，也不需要 ：
不要写成：
（XHTML 风格）、
（错误）或添加文字内容（如
——分隔线——）。语义在于它的存在本身，而非所含内容。
样式定制：强化视觉提示，但不破坏语义
默认 hr 样式简陋，可通过 CSS 增强其表现力，同时保持语义不变：
- 用 border 控制粗细、颜色与虚实（如 border: 2px dashed #999）
- 用 margin 调整上下间距，避免紧贴前后段落（如 margin: 1.5em auto）
- 可配合 width 或 max-width 控制长度，营造呼吸感（如 width: 80%）
- 慎用背景图或复杂渐变——重点仍是“转折”，不是“装饰焦点”
示例 CSS：
hr {border: none;
border-top: 1px dotted #ccc;
margin: 2em auto;
width: 60%;
}
辅助技术友好性：别依赖视觉，但要支持逻辑感知
屏幕阅读器（如 NVDA、VoiceOver）默认会将 hr 读作“分隔线”或“水平规则”，部分还会提示“主题变更”。为提升可访问性：
- 确保前后段落本身有清晰的主题句，让转折逻辑自明
- 避免连续多个 hr 堆叠（易造成混淆）
- 如需额外说明（极少数场景），可用 aria-label 补充，例如：
（仅当上下文不足以传达转折性质时使用）
不推荐用 title 属性——多数阅读器忽略它，且不符合 ARIA 最佳实践。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
