标签在html5中专用于段落级主题分隔，表示内容逻辑断点（如章节更替、视角转换），而非纯视觉装饰；其语义由周围结构决定，样式须用css控制，禁止内联属性与嵌套于内。
<hr> 本身不支持“主题级分割”这种语义表达，它只是个纯视觉分隔符，浏览器默认渲染为一条水平线，没有任何章节、层级或语义含义。
为什么 <hr> 不能表达主题级分割
HTML 规范明确将 <hr> 定义为“段落级别的主题转换”，注意是“段落级”，不是“章节级”。它不参与文档大纲（<h1></h1>–<h6></h6> 构建的层级），也不影响 <section></section>、<article></article> 等语义容器的边界。用它代替 <section></section> 或标题切换，会导致：
- 屏幕阅读器无法识别内容结构变化
- SEO 工具无法提取逻辑章节
- CSS 选择器无法基于主题层级精准定位（如
section:nth-of-type(2) hr并不表示“第二章开头”）
真正实现主题级分割的替代方案
要让浏览器和辅助技术理解“主题切换”，必须靠语义化标签组合，而不是依赖 <hr> 的视觉效果：
- 用
<section></section>包裹每个主题块，并配以对应层级的标题（如<h2>用户管理</h2>） - 在
<section></section>之间插入<hr>仅作视觉强化，而非结构依据 - 若需样式统一控制，给
<section></section>加 class（如class="theme-section"），再通过 CSS 设置.theme-section + .theme-section { margin-top: 2rem; }
<hr> 还能用吗？怎么用才不翻车
可以保留，但必须降级为“装饰性分隔”，且满足以下条件：
- 只出现在两个已明确语义边界的块之间（例如
<hr> <section></section>，而非<p>...</p> <hr> <p>...</p>） - 移除所有试图赋予它语义的 aria 属性（如
aria-label、role="separator"—— 这些反而会误导 AT） - 用 CSS 控制外观时，避免用
border模拟，直接用hr { height: 0; border: none; border-top: 1px solid #ccc; }，确保可访问性（部分屏幕阅读器仍会 announce “horizontal rule”）
真正难的不是画一条线，而是让这条线出现在语义正确的位置——<hr> 永远不会告诉你它分隔的是什么，只有周围标签才能。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
