<hr>-水平分隔线

<hr> 是 HTML 中用于创建水平分隔线的标签，它能在页面中插入一条横线，常用于视觉上分隔不同内容区块。下面详细探讨它的用法、属性和实际应用场景。

<hr> 的基本用法

<hr> 是一个空标签，不需要闭合标签。最简单的用法是直接在 HTML 中插入：

<p>这是第一段内容。</p>
<hr>
<p>这是第二段内容。</p>

渲染效果如下：

这是第一段内容。

<hr>

这是第二段内容。

<hr> 的样式控制

默认情况下，<hr> 的样式由浏览器决定，通常是一条灰色的实线。但可以通过 CSS 自定义其外观：

<hr style="border: 2px dashed red; height: 5px; background: blue;">

效果：

<hr style="border: 2px dashed red; height: 5px; background: blue;">

常用 CSS 属性

• border: 控制边框样式（如 solid, dotted, dashed）
• height: 控制线条粗细
• color: 控制颜色（需配合 border-color 使用）
• width: 控制线条宽度（如 50% 或 200px）

示例：创建一个渐变色的分隔线

<hr style="height: 3px; border: none; background: linear-gradient(90deg, red, yellow);">

<hr style="height: 3px; border: none; background: linear-gradient(90deg, red, yellow);">

语义化与可访问性

虽然 <hr> 是视觉分隔线，但在 HTML5 中它被赋予语义化含义——表示“主题分隔”。屏幕阅读器会将其识别为内容分界，因此不应滥用。例如：

<article>
  <h2>第一章</h2>
  <p>内容...</p>
  <hr aria-hidden="true">
  <h2>第二章</h2>
  <p>内容...</p>
</article>

通过 aria-hidden="true" 可对辅助技术隐藏不必要的分隔线。

替代方案与进阶技巧

用 CSS 伪元素实现复杂分隔线

当需要更复杂的设计时，可以用 ::before 或 ::after 替代：

<style>
  .fancy-divider {
    position: relative;
    text-align: center;
    margin: 20px 0;
  }
  .fancy-divider::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: black;
    z-index: -1;
  }
  .fancy-divider span {
    background: white;
    padding: 0 10px;
  }
</style>

<div class="fancy-divider">
  <span>或</span>
</div>

效果：

<div class="fancy-divider" style="position: relative; text-align: center; margin: 20px 0;"> <span style="background: white; padding: 0 10px;">或</span> </div> <script> document.querySelector('.fancy-divider').style.setProperty('--before-content', '""'); document.querySelector('.fancy-divider').style.setProperty('--before-position', 'absolute'); document.querySelector('.fancy-divider').style.setProperty('--before-top', '50%'); document.querySelector('.fancy-divider').style.setProperty('--before-left', '0'); document.querySelector('.fancy-divider').style.setProperty('--before-right', '0'); document.querySelector('.fancy-divider').style.setProperty('--before-height', '1px'); document.querySelector('.fancy-divider').style.setProperty('--before-background', 'black'); document.querySelector('.fancy-divider').style.setProperty('--before-z-index', '-1'); </script>

响应式分隔线

结合媒体查询实现不同设备上的显示差异：

hr {
  margin: 10px 0;
  border: 1px solid #ccc;
}

@media (min-width: 768px) {
  hr {
    margin: 20px 10%;
    border-width: 2px;
  }
}

实际应用场景

场景一：评论区层级分隔

<div class="comment">
  <p>用户A：这个功能很好用！</p>
  <hr class="comment-divider">
  <p>用户B：感谢反馈！</p>
</div>

场景二：表单分组

<form>
  <label>用户名：<input type="text"></label>
  <hr>
  <label>密码：<input type="password"></label>
</form>

场景三：文章章节过渡

<article>
  <section>
    <h3>引言</h3>
    <p>...</p>
  </section>
  <hr class="section-divider">
  <section>
    <h3>正文</h3>
    <p>...</p>
  </section>
</article>

浏览器兼容性注意事项

所有现代浏览器均支持 <hr>，但需注意：

• 旧版 IE 中部分 CSS 属性（如 border-radius）可能不生效
• 移动端浏览器默认样式差异较大，建议重置样式：

hr {
  border: 0;
  height: 1px;
  background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
}

创意用法示例

动态交互分隔线

结合 CSS 动画：

<style>
  .animated-hr {
    height: 4px;
    border: none;
    background: linear-gradient(90deg, red, orange, yellow);
    background-size: 200% auto;
    animation: gradient 2s linear infinite;
  }
  @keyframes gradient {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
  }
</style>

<hr class="animated-hr">

<hr class="animated-hr" style="height: 4px; border: none; background: linear-gradient(90deg, red, orange, yellow); background-size: 200% auto; animation: gradient 2s linear infinite;">

图标分隔线

使用 Font Awesome 图标：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
  .icon-hr {
    text-align: center;
    border: none;
    height: auto;
  }
  .icon-hr::after {
    content: "\f005";
    font-family: "Font Awesome 6 Free";
    font-size: 24px;
    color: gold;
  }
</style>

<hr class="icon-hr">