是html中语义化表示内容分隔的标准标签，应独立于使用；其样式需通过border属性控制，替代方案更灵活但无语义；框架中须正确书写避免字符串转义问题。
用 <hr> 是最直接的办法
HTML 里没有“段落间加分割线”的专用语义标签，<hr> 就是干这个的——它代表主题或内容的分隔，浏览器默认渲染为一条水平线。
常见错误是把它塞进 <p></p> 里，比如：<p>文字</p>
<hr>文字
<hr> 出现在 <p></p> 内部，解析时会被自动闭合前一个 <p></p>，导致结构错乱。
正确写法就是让它独立成行，夹在两段之间：
立即学习“前端免费学习笔记（深入）”；
<p>第一段文字</p> <hr> <p>第二段文字</p>
<hr> 的样式控制比想象中更受限
很多人想改颜色、高度、去掉阴影，结果发现直接设 color 或 height 没反应——因为 <hr> 是替换元素（replaced element），默认样式由浏览器 UA 样式表用 border 实现，不是靠背景或宽高。
真正可控的是它的边框属性：
- 用
border-top控制线条粗细、颜色、样式（如1px solid #ccc） - 用
margin调整上下间距，避免贴得太紧 - 设
border: none再配background+height也能自定义，但需额外设overflow: hidden防止内容溢出
别碰 width：设成百分比容易受父容器 padding 影响，用 max-width + margin: auto 更稳。
替代方案：用 <div> + CSS 更灵活，但别滥用
<p>如果需要渐变线、图标分隔、响应式缩略线，<code><hr> 就力不从心了。这时用空 <div> 加类名更可控：
<pre class="brush:php;toolbar:false;"><p>上面一段</p>
<div class="divider"></div>
<p>下面一段</p></pre>
<p>对应 CSS 可以自由发挥：</p>
<pre class="brush:php;toolbar:false;">.divider {
height: 1px;
background: linear-gradient(90deg, #eee, #bbb, #eee);
margin: 1.5rem 0;
}</pre>
<p>注意点：</p>
<ul><li>语义上，<code><div> 不表达“分隔”含义，屏幕阅读器不会特殊处理，纯装饰性场景没问题；若内容逻辑确有章节切换，仍优先用 <code><hr>
<div class="divider"> 加 <code>role="separator" 试图模拟语义——多数情况下没必要，反而增加冗余
React/Vue 等框架里别忘了转义
在 JSX 或模板语法中，<hr> 写法不变，但容易栽在字符串插值里。比如 Vue 的 v-html 或 React 的 dangerouslySetInnerHTML，如果拼接的字符串里漏了 <hr> 的尖括号，或者被当作文本渲染了，就看不到线。
典型翻车现场：
- 写成
"<hr>"却没用v-html，结果页面显示的是字面量<hr> - JSX 中误写
{ "<hr>" }，React 会原样输出字符串，得写成<hr> - SSR 场景下，服务端返回的 HTML 若含未闭合的
<hr>（虽然合法），某些解析器可能报 warning
底线：只要不是动态生成 HTML 字符串，就老实用 <hr> 标签写法，别图省事拼字符串。
真正麻烦的从来不是画一条线，而是想让这条线在不同设备、不同字体大小、不同 zoom 缩放下都保持呼吸感——这时候你就得放弃像素值，改用 em 或 rem 控制 margin，再配合 border-image 做适配。但大多数项目，一条干净的 1px solid #eee 已经够用。
