hr标签语义是主题分隔，用于表示时间跳跃、视角切换等剧情转折；应配合aria-label增强可访问性，样式需强化过渡感而非装饰性，避免在无主题中断时滥用。
hr 标签在 HTML5 中的语义是“主题分隔”（thematic break），不是装饰性线条，也不是单纯为了画一条横线。它表示内容中**前后段落属于不同主题、场景或叙事逻辑**——这恰好契合“剧情段落过渡”的需求。
用 hr 表达剧情转折而非视觉装饰
避免把 hr 当作 CSS 边框替代品。HTML5 规范明确指出：只有当前后内容存在**主题中断**（如时间跳跃、视角切换、场景转换、回忆插入）时，才应使用 hr。例如：
- 主角从现代办公室闪回童年夏日午后 → 适合用 hr
- 对话中突然插入一段环境描写，打破原有节奏 → 可用 hr
- 两封不同时空的信件之间 → 合理使用 hr
配合 ARIA 和结构化语义增强可访问性
屏幕阅读器默认会将 hr 读作“分隔线”，但你可以通过添加 aria-label 明确提示剧情变化：
<hr aria-label="场景切换：三年后，雨夜码头">
这样既保留语义清晰度，又让辅助技术用户感知到叙事断点。注意不要用 title 属性替代，因部分读屏工具不支持。
样式定制要尊重语义意图
可以美化 hr，但样式需强化“过渡感”，而非削弱其语义强度：
- 用渐变、虚线、图标嵌入（如小钟表、门、胶片条）暗示时间/空间转换
- 避免过粗、过亮或带阴影的纯色实线，以免沦为装饰元素
- 推荐搭配微动效：hover 时轻微缩放或淡入，强化“翻页”“切镜”隐喻
慎用场景：避免语义污染
以下情况请改用其他方式，不用 hr：
- 仅为了在两个段落间加空行 → 用 margin 或 div + CSS
- 列表项之间的分隔 → 用 border-bottom 或伪元素
- 章节标题下的装饰线 → 用 h2 后跟 span 或背景边框
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
