HTML <hr> 标签

定义和用法

<hr> 标签定义 HTML 页面中的主题分隔（例如，话题的转变）。

<hr> 元素通常显示为水平线，用于在 HTML 页面中分隔内容，或定义内容上的变化。

另请参阅：

HTML DOM 参考手册：HR 对象

实例

例子 1

使用 <hr> 标签来定义内容中的主题变化：

<h1>Web 的主要语言</h1>

<p>HTML 是创建 Web 页面的标准标记语言。HTML 描述了 Web 页面的结构，由一系列元素组成......</p>
<hr>
<p>CSS 是一种描述 HTML 元素在屏幕、纸张或其他媒体上显示方式的语言......</p>
<hr>
<p>JavaScript 是 HTML 和 Web 的编程语言。JavaScript 可以更改 HTML 内容和属性值......</p>

亲自试一试

例子 2

对齐 <hr> 元素（使用 CSS）：

<hr style="width:50%;text-align:left;margin-left:0">

亲自试一试

例子 3

没有阴影的 <hr> （使用 CSS）：

<hr style="height:2px;border-width:0;color:gray;background-color:gray">

亲自试一试

例子 4

设置 <hr> 元素的高度（使用 CSS）：

<hr style="height:30px">

亲自试一试

例子 5

设置 <hr> 元素的宽度（使用 CSS）：

<hr style="width:50%">

亲自试一试

全局属性

<hr> 标签还支持 HTML 中的全局属性。

事件属性

<hr> 标签还支持 HTML 中的事件属性。

默认的 CSS 设置

大多数浏览器将使用以下默认值显示 <hr> 元素：

hr {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
}

亲自试一试

浏览器支持

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
支持 支持 支持 支持 支持