<hr>:主題分隔(水平線)元素

Baseline 已廣泛支援

此特性已相當成熟,可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來,各瀏覽器均已提供此特性。

<hr> HTML 元素代表段落級元素之間的主題分隔:例如,故事中的場景轉換,或者一個部分內的話題轉移。

試一試

<p>§1: The first rule of Fight Club is: You do not talk about Fight Club.</p>

<hr />

<p>§2: The second rule of Fight Club is: Always bring cupcakes.</p>
hr {
  border: none;
  border-top: 3px double #333333;
  color: #333333;
  overflow: visible;
  text-align: center;
  height: 5px;
}

hr::after {
  background: white;
  content: "§";
  padding: 0 4px;
  position: relative;
  top: -13px;
}

歷史上,這被呈現為一條水平線或分隔線。雖然在視覺瀏覽器中它仍然可以顯示為一條水平線,但該元素現在是根據語義而不是表現來定義的,所以如果你想繪製一條水平線,你應該使用合適的 CSS 來實現。

屬性

此元素的屬性包括全域性屬性

align 已棄用 非標準

設定頁面上分隔線的對齊方式。如果未指定值,則預設值為 left

color 已棄用 非標準

透過顏色名稱或十六進位制值設定分隔線的顏色。

noshade 已棄用 非標準

設定分隔線不顯示陰影。

size 已棄用 非標準

設定分隔線的高度(以畫素為單位)。

width 已棄用 非標準

透過畫素值或百分比值設定頁面上分隔線的長度。

示例

HTML

html
<p>
  This is the first paragraph of text. This is the first paragraph of text. This
  is the first paragraph of text. This is the first paragraph of text.
</p>

<hr />

<p>
  This is the second paragraph of text. This is the second paragraph of text.
  This is the second paragraph of text. This is the second paragraph of text.
</p>

結果

技術摘要

內容類別 流內容.
允許內容 無;它是一個空元素
標籤省略 必須有起始標籤,且不能有結束標籤。
允許父級
隱式 ARIA 角色 separator
允許的 ARIA 角色 presentationnone
DOM 介面 HTMLHRElement

規範

規範
HTML
# the-hr-element

瀏覽器相容性

另見