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
支持 支持 支持 支持 支持