hr标签语义是标识主题变化，非视觉分隔线；html5已移除width等内联属性，必须用css控制样式；禁止嵌套在p中；仅当前后内容存在主题、时空或说话人断裂时才使用，并通过aria-label提升可访问性。
hr 标签现在不是画线工具，而是告诉浏览器“这里主题变了”——用错就破坏结构、干扰读屏、误导搜索引擎。
为什么不能直接写 <hr width="80%">？
HTML5 已彻底移除所有内联样式属性：width、size、noshade、align 全部无效。浏览器可能忽略，或触发怪异模式；XHTML 里更会直接报错。这些属性早在 HTML 4.01 就被标记为“不赞成”，到 HTML5 已正式删除。
- 必须写成纯净的
<hr>或<hr>（两者都合法） - 样式只能靠 CSS 控制，比如
hr { height: 2px; background: #eee; } - 嵌套在
<p></p>里是非法结构——<p></p> <hr>会触发自动闭合，实际解析成<p></p> <hr>
什么时候该用 <hr> 而不是 border-bottom？
判断标准只有一条：前后内容是否存在**主题断裂**，而非“看起来要空一行”。
- ✅ 合理：
<p>前端环境搭建完成</p> <hr> <p>后端接口规范如下</p>—— 技术领域切换 - ✅ 合理：
<p>他推开教室门</p> <hr aria-label="闪回:小学三年级的操场"> <p>蝉鸣声突然变得很响</p>—— 时间+视角双切换 - ❌ 错误：
<div class="card">...</div> <hr> <div class="card">...</div>—— 卡片间只是视觉分隔，无主题变化，该用margin-bottom - ⚠️ 模糊：表单中两个
<fieldset></fieldset>之间 —— 若语义独立（如“登录信息”vs“隐私偏好”），<hr>可接受；若只是 UI 分组，纯 CSS 更稳妥
怎么让 <hr> 真正支持可访问性？
默认情况下屏幕阅读器读作“分隔线”，但用户不知道断在哪、为什么断。加 aria-label 是最轻量也最有效的补救方式。
- 写成
<hr aria-label="章节结束：技术原理部分">，读屏会播报完整提示 - 不要用
title属性——多数读屏工具不读它 - 避免塞文字进
<hr>（如<hr>或者），这是非法写法，且语义崩坏 - 若需带文字的分隔（如“或”、“—— 以下是评论 ——”），改用
<div class="divider-text">或</div>，并配合适当 ARIA role
真正难的不是怎么画那条线，而是每次想加 <hr> 前，停下来问一句：前后两段，是不是真的换了主题、换了时空、换了说话人？答不上来，就别加。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
