标签是语义化主题分隔符，仅用于内容主题切换（如章节更替、视角转换），不可作视觉装饰；滥用会破坏可访问性与结构逻辑，样式须用CSS控制，禁止嵌套在内。
hr 标签不是画线工具，而是表示内容主题切换的语义分隔符。用错地方，屏幕阅读器会误报“分隔”，布局逻辑也会变混乱。
什么时候该用 hr？看内容是否真有主题断点
它只在两个区块之间存在明确语义断裂时才适用，比如话题转向、视角切换、章节更替。不是“两段文字之间需要空隙”就该加。
- ✅ 合理：
<p>上一节讲安装步骤</p> <hr> <p>本节讲配置参数</p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>—— 安装和配置是不同主题 - ❌ 错误：
<button>提交</button><hr> <button>取消</button>—— 按钮组无主题变化，纯视觉分隔 - ⚠️ 模糊：表单中“用户信息”和“收货地址”两个
<fieldset></fieldset>之间 —— 若二者逻辑独立，hr可接受；若只是视觉分组，用margin-bottom更准
hr 的样式必须用 CSS 控制，HTML 属性已废弃
别写 <hr size="2" color="#333">，这些属性在 HTML5 中无效，现代浏览器直接忽略。所有外观控制必须走 CSS。
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 改颜色：用
border-color或background-color（先清掉默认border） - 调粗细：设
height+border: none+background-color，比依赖border-width更可控 - 响应式适配高 DPR 屏幕：1px 边框在 iPhone 上易发虚，建议用
height: 2px; transform: scaleY(0.5) - 注意
box-sizing差异：Chrome 默认border-box，Firefox 是content-box，统一写box-sizing: border-box避免高度不一致
为什么不能把 hr 塞进 <p></p> 里？
这是常见手误：<p>文字</p>
<hr>
<p>文字</p> 是对的，但 <p>文字</p>
<hr>文字
hr 是块级、段落级语义元素，不允许嵌套在 p 中。
- 浏览器会自动闭合前面的
p，导致 DOM 结构意外展开 - 可访问性 API 可能无法正确识别分隔意图
- 某些 SSR 框架或静态生成器会报解析警告
- 修复方式很简单：确保
hr独立成行，前后都是块级容器（如div、section、p）
真正难的不是写出一条线，而是判断这条线背后有没有值得表达的主题断裂。一旦把它当装饰用，后续可访问性、SEO、维护成本全都会悄悄变重。
