<hr />标签是HTML5中表示主题分隔的语义化空元素，专用于标识内容逻辑断点（如章节更替、视角转换），而非视觉装饰；其样式须由CSS控制，禁止内联属性与嵌套于<p>内。
hr 标签不是画线工具，而是内容主题切换的语义标记。它在 HTML5 中已彻底脱离“视觉装饰”角色，专用于表达段落、章节或叙述视角之间的实质性断裂——比如从安装说明跳到配置指南，或从人物A的独白转为人物B的回忆。
理解 hr 的语义本质
HTML5 规范明确定义 <hr> 表示“主题分隔”（thematic break），即内容逻辑上的断点，而非视觉空隙。浏览器默认渲染为横线，只是辅助呈现；真正起作用的是其结构含义：
- 屏幕阅读器会播报“分隔”或“主题分隔”，帮助视障用户感知内容转向
- 搜索引擎据此识别文档结构层次，提升内容理解准确度
- 移除所有内联样式属性（如
width、noshade），样式必须交由 CSS 控制
什么时候该用 hr？看内容是否真有主题断点
判断标准只有一个：前后区块是否存在明确的主题转换。不是“看起来要分开”，而是“逻辑上已切换”。
- ✅ 合理：
<p>上一节讲解前端开发环境搭建</p><hr><p>本节介绍后端 API 接口规范</p>—— 前后属于不同技术领域 - ❌ 错误：
<h3>用户信息</h3><form>...</form><hr><h3>支付方式</h3><form>...</form>—— 若二者同属一个注册流程，应使用<section>+ CSS 间距 - ⚠️ 边界情况：博客文章末尾的“相关推荐”区块 —— 若推荐内容与正文无直接主题关联（如技术文后推旅行攻略），
<hr>可接受；若仍是同类技术延伸，则用margin-top更合适
如何配合 CSS 实现语义与样式的分离
HTML5 禁止用属性控制 <hr> 外观，但可通过 class 精准定制，兼顾语义与设计需求：
立即学习“前端免费学习笔记（深入）”；
- 给需要强调的分隔加类名：
<hr class="major-break"> - 在 CSS 中定义样式：
.major-break { border: none; height: 2px; background: #333; margin: 2rem 0; } - 避免嵌套在
<p>内——<hr>是块级空元素，必须独立于段落之外 - 不建议用
<hr>替代列表项分隔、卡片边框或按钮组间隙，那些场景用border-bottom或gap更准确
替代方案：何时该选别的标签
如果内容没有主题断裂，只是需要视觉区隔，优先考虑更贴切的语义化方式：
- 章节级内容划分 → 用
<section>包裹，并配<h2>标题 - 同一主题下的子模块 → 用
<div>或<article>，辅以 CSSmargin或border-bottom - 导航栏项之间 → 用
nav ul li结构，通过::after伪元素添加分隔符 - 纯装饰性线条（如页眉下划线）→ 直接用
header { border-bottom: 1px solid #eee; }
