PHP小码农

Appearance

hr 分隔线 ​

<hr> 标签用于在内容中创建一条主题分隔线（Horizontal Rule）。在 HTML5 中，<hr> 被赋予了明确的语义——表示段落级别的主题转换，而不仅仅是视觉上的分隔线。

前置知识

阅读本节前，建议先了解：p 段落

基础概念 ​

<hr> 是 "Horizontal Rule"（水平线）的缩写。在 HTML4 和 XHTML 中，<hr> 主要被用作视觉装饰元素来分隔内容。而在 HTML5 中，<hr> 获得了更丰富的语义——它表示文本内容中主题的转换，类似于书籍中章节之间的分隔线。

<hr> 是一个空元素（void element），不需要结束标签。它是块级元素，会在页面上独占一行显示。

语法 ​

<hr> 标签的语法非常简洁，它是一个自闭合标签：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>hr 分隔线示例</title>
</head>
<body>
  <h1>章节一</h1>
  <p>这是第一章的内容，讲述基础概念。</p>

  <hr>  <!-- 主题转换的分隔线 -->

  <h2>章节二</h2>
  <p>这是第二章的内容，讨论进阶技巧。</p>

  <hr>  <!-- 另一处主题转换 -->

  <h2>章节三</h2>
  <p>这是第三章的内容，介绍高级用法。</p>
</body>
</html>

详细说明 ​

hr 的 HTML5 语义 ​

HTML5 规范明确指出，<hr> 元素表示一个段落级别的主题转换。以下是典型的使用场景：

场景说明
场景转换在故事中从一个场景切换到另一个场景
话题转换文章中从一个话题切换到另一个话题
内容分隔在散文或评论中分隔不同的部分
章节过渡长文章中章节之间的过渡
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>主题转换示例</title>
</head>
<body>
  <article>
    <h1>旅行的意义</h1>
    <p>旅行是认识世界、拓展视野的重要方式。每一次出发都是对未知的探索，每一次归来都是对生活的重新审视。</p>

    <hr>  <!-- 场景转换：从总体叙述切换到具体经历 -->

    <p>去年夏天，我独自前往了西藏。在那片离天空最近的土地上，我感受到了前所未有的宁静和自由。布达拉宫的庄严、纳木错的纯净、藏民的淳朴，都深深地印在了我的记忆中。</p>

    <hr>  <!-- 场景转换：切换到另一段旅行经历 -->

    <p>今年春天，我又踏上了前往云南的旅程。大理的苍山洱海、丽江的古城小巷、香格里拉的雪山草甸，每一处都让人流连忘返。</p>
  </article>
</body>
</html>

hr 的默认样式 ​

浏览器为 <hr> 提供了以下默认样式：

属性默认值（Chrome）说明
displayblock块级元素
margin8px 0（0.5em）上下外边距
bordernone 0无边框
border-top1px solid rgb(204, 204, 204)顶部有灰色实线

兼容性说明

不同浏览器对 <hr> 的默认样式略有差异。Firefox 使用 border-top: 1px solid #d2d2d2，Safari 使用 border-top: 1px solid #e5e5e5。如果需要一致的样式，建议通过 CSS 自定义。

自定义 hr 样式 ​

通过 CSS 可以完全自定义 <hr> 的外观：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>自定义 hr 样式</title>
  <style>
    body {
      max-width: 680px;
      margin: 0 auto;
      padding: 2rem 1rem;
      font-family: sans-serif;
      line-height: 1.6;
    }

    /* 基础样式 */
    .hr-basic {
      border: none;
      border-top: 2px solid #333;
      margin: 2rem 0;
    }

    /* 渐变色分隔线 */
    .hr-gradient {
      border: none;
      height: 2px;
      background: linear-gradient(to right, transparent, #666, transparent);
      margin: 2rem 0;
    }

    /* 虚线样式 */
    .hr-dashed {
      border: none;
      border-top: 2px dashed #999;
      margin: 2rem 0;
    }

    /* 点线样式 */
    .hr-dotted {
      border: none;
      border-top: 2px dotted #999;
      margin: 2rem 0;
    }

    /* 带文字的分隔线 */
    .hr-text {
      border: none;
      border-top: 1px solid #ddd;
      margin: 2rem 0;
      text-align: center;
      height: 0;
      overflow: visible;
    }
    .hr-text::after {
      content: "--- 主题转换 ---";
      display: inline-block;
      background: white;
      padding: 0 1rem;
      color: #999;
      font-size: 0.875rem;
      position: relative;
      top: -0.75rem;
    }

    /* 装饰性分隔线 */
    .hr-fancy {
      border: none;
      height: 20px;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20'%3E%3Ccircle cx='10' cy='10' r='3' fill='%23ccc'/%3E%3Ccircle cx='30' cy='10' r='2' fill='%23ddd'/%3E%3Ccircle cx='50' cy='10' r='3' fill='%23ccc'/%3E%3Ccircle cx='70' cy='10' r='2' fill='%23ddd'/%3E%3Ccircle cx='90' cy='10' r='3' fill='%23ccc'/%3E%3C/svg%3E") repeat-x center;
      margin: 2rem 0;
    }
  </style>
</head>
<body>
  <h1>自定义分隔线样式</h1>

  <p>基础实线分隔线：</p>
  <hr class="hr-basic">

  <p>渐变色分隔线：</p>
  <hr class="hr-gradient">

  <p>虚线分隔线：</p>
  <hr class="hr-dashed">

  <p>点线分隔线：</p>
  <hr class="hr-dotted">

  <p>带文字的分隔线：</p>
  <hr class="hr-text">

  <p>装饰性分隔线：</p>
  <hr class="hr-fancy">
</body>
</html>

装饰性 vs 语义性 hr ​

<hr> 的使用应该基于语义而非视觉效果。如果只需要视觉分隔而不涉及主题转换，应考虑使用 CSS 边框或伪元素来实现。

html
<!-- 语义性使用：表示主题转换 -->
<article>
  <p>关于项目背景的介绍内容。</p>
  <hr>  <!-- 语义正确：话题从背景介绍转换到实施方案 -->
  <p>关于实施方案的讨论。</p>
</article>
html
<!-- 不推荐：仅用于视觉装饰的分隔 -->
<div class="card">
  <div class="card-header">标题</div>
  <hr>  <!-- 不推荐：这里只是装饰性分隔 -->
  <div class="card-body">内容</div>
</div>
css
/* 推荐的做法：使用 CSS 边框代替装饰性 hr */
.card-header {
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e0e0e0;  /* 用 CSS 边框实现视觉分隔 */
}

hr 的属性 ​

<hr> 在 HTML5 中是一个语义元素，不再支持 HTML4 的以下表现属性：

HTML4 属性状态替代方案
align已废弃使用 CSS margin 控制对齐
noshade已废弃使用 CSS border-style 控制
size已废弃使用 CSS height 或 border-width 控制
width已废弃使用 CSS width 控制
color已废弃使用 CSS border-color 或 background 控制
html
<!-- 不推荐：使用已废弃的 HTML 属性 -->
<hr noshade size="2" width="50%" align="center" color="red">

<!-- 正确：使用 CSS 样式 -->
<hr style="border: none; height: 2px; width: 50%; margin: 1rem auto; background-color: red;">

实战示例 ​

文章中的场景转换 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>故事中的场景转换</title>
  <style>
    body {
      font-family: "Georgia", serif;
      max-width: 680px;
      margin: 0 auto;
      padding: 2rem 1rem;
      line-height: 1.8;
      color: #333;
    }
    hr {
      border: none;
      text-align: center;
      height: auto;
      margin: 3rem 0;
      overflow: visible;
    }
    hr::before {
      content: "* * *";
      display: block;
      font-size: 1.5rem;
      letter-spacing: 1rem;
      color: #999;
    }
  </style>
</head>
<body>
  <h1>远方的灯塔</h1>

  <p>夕阳西下，余晖洒在宁静的海面上，将海水染成了一片金红。老渔民收拾着渔网，哼着不知名的小调，脚步声在沙滩上留下深深的印记。</p>

  <hr>

  <p>与此同时，在城市的另一端，年轻的画家正站在画室窗前，凝视着远方。画布上只有寥寥几笔——一座灯塔的轮廓，在海天之间孤独地矗立着。他迟迟无法下笔，因为他心中还没有找到那座灯塔的灵魂。</p>

  <hr>

  <p>很多年以后，画家终于完成了那幅作品。画中的灯塔不再是冰冷的建筑，而是在暴风雨中散发光芒的生命。每一道光都像是在诉说着一个故事，每一个故事都通向同一个远方。</p>
</body>
</html>

FAQ 页面中的分隔 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>FAQ 分隔线</title>
  <style>
    body {
      max-width: 680px;
      margin: 0 auto;
      padding: 2rem 1rem;
      font-family: sans-serif;
    }
    .faq-section hr {
      border: none;
      border-top: 1px solid #eee;
      margin: 2rem 0;
    }
  </style>
</head>
<body>
  <h1>常见问题</h1>

  <div class="faq-section">
    <h2>关于产品</h2>
    <p>这里回答关于产品的基本问题，包括功能介绍、适用场景等。</p>
    <p>更多的产品说明可以在文档中找到。</p>

    <hr>  <!-- 主题从产品相关问题切换到技术相关问题 -->

    <h2>技术支持</h2>
    <p>这里回答技术相关的问题，包括安装配置、故障排除等。</p>
    <p>如果遇到技术问题，可以联系技术支持团队。</p>

    <hr>  <!-- 主题从技术问题切换到购买相关问题 -->

    <h2>购买与价格</h2>
    <p>这里回答购买流程、价格方案、发票开具等问题。</p>
    <p>我们提供灵活的定价方案，满足不同规模团队的需求。</p>
  </div>
</body>
</html>

注意事项 ​

hr 与其他分隔方式的对比 ​

方式语义适用场景推荐程度
<hr>主题转换文章中的场景/话题切换推荐（有语义需求时）
CSS border纯视觉卡片头部与内容的分隔推荐（纯装饰时）
<br> 多次使用无不应使用不推荐
空的 <div>无不应使用不推荐

不要用 hr 代替 margin ​

html
<!-- 不推荐：用 hr 创建间距 -->
<p>段落一</p>
<hr>  <!-- 仅用于创建间距，没有主题转换的语义 -->
<p>段落二</p>

<!-- 正确：用 CSS margin 创建间距 -->
<p>段落一</p>
<p style="margin-top: 2rem;">段落二</p>

当使用语义化标签时，<hr> 通常不是必需的，因为 <section> 等标签本身就暗示了内容的分组：

html
<!-- 使用 hr 分隔主题 -->
<article>
  <h2>第一部分</h2>
  <p>内容...</p>
  <hr>
  <h2>第二部分</h2>
  <p>内容...</p>
</article>

<!-- 使用 section 代替（更推荐） -->
<article>
  <section>
    <h2>第一部分</h2>
    <p>内容...</p>
  </section>
  <section>
    <h2>第二部分</h2>
    <p>内容...</p>
  </section>
</article>

最佳实践 ​

  1. 基于语义使用：只在有主题转换的场景下使用 <hr>，不要仅仅为了视觉效果而使用
  2. 用 CSS 自定义样式：不要使用已废弃的 HTML 属性（size、width、color 等），改用 CSS
  3. 优先使用 section 标签：在可以使用 <section> 等语义标签进行内容分组时，优先使用语义标签
  4. 保持简洁：<hr> 不需要结束标签，写法就是 <hr> 或 <hr/>
  5. 避免过度使用：一篇文章中不宜出现过多的 <hr>，否则会打断阅读节奏

下一节

继续学习：blockquote 引用块

参考链接 ​