HTML <hr> 标签


实例

当内容的主题发生变化时,使用 <hr> 标签进行分隔:

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

<p>HTML 是用于创建网页的标准标记语言。 HTML 描述了网页的结构,由一系列元素组成。 HTML 元素告诉浏览器如何显示内容。</p>

<hr>

<p>CSS 是一种描述 HTML 元素如何在屏幕、纸张或其他媒体上显示的语言。 CSS 省去了很多工作,因为它可以同时控制多个网页的布局。</p>

<hr>

<p>JavaScript 是 HTML 和 Web 的编程语言。 JavaScript 可以更改 HTML 内容和属性值。 JavaScript 可以改变 CSS。 JavaScript 可以隐藏和显示 HTML 元素,等等。</p>
亲自试一试 »

下面有更多实例。


定义和用法

<hr> 标签定义 HTML 页面中的主题变化(比如话题的转移),并显示为一条水平线。

<hr> 元素被用来分隔 HTML 页面中的内容(或者定义一个变化)。


浏览器支持

元素
<hr> Yes Yes Yes Yes Yes

全局属性

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


事件属性

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



更多实例

实例

对齐 <hr> 元素(使用 CSS):

<hr style="width:50%;text-align:left;margin-left:0">
亲自试一试 »

实例

无阴影的 <hr> (使用 CSS):

<hr style="height:2px;border-width:0;color:gray;background-color:gray">
亲自试一试 »

实例

设置 <hr> 元素的高度 (使用 CSS):

<hr style="height:30px">
亲自试一试 »

实例

设置 <hr> 元素的宽度 (使用 CSS):

<hr style="width:50%">
亲自试一试 »

相关页面

HTML DOM 参考手册: HR 对象


默认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;
}
亲自试一试 »