HTML - <hr> 標籤

HTML 的 <hr> 標籤用於在網頁上建立一條水平線。這個 hr 元素表示段落級元素之間的主題斷開，例如故事中的場景變化或某個章節內的主題轉換。

<hr> 元素接受一個 color 屬性，用於設定水平線的顏色。此標籤同時支援 HTML 中的全域性屬性和事件屬性。

語法

<hr>

屬性

HTML hr 標籤支援 HTML 的全域性和事件屬性。也接受一些特定的屬性，如下所示。

屬性	值	描述
align	left center right	此屬性用於對齊 hr 元素。
size	數值	此屬性用於設定 hr 元素的高度。
width	數值	此屬性用於設定 hr 元素的寬度。
color	顏色程式碼或名稱	此屬性用於設定 hr 元素的顏色。
noshade	無值	此屬性用於指定實線水平線而不是陰影線。

HTML hr 標籤示例

在下面的示例中，我們將對 html hr 元素使用所有附加屬性。我們將瞭解每個屬性對 hr 元素的影響，並將使用 CSS 來設定 hr 元素的樣式。

定義 hr 元素

讓我們考慮以下示例，我們建立了一個 HTML 文件，展示了 <hr> 標籤的行為。

<!DOCTYPE html>
<html>
<body>
   <h2> 
      Tutorialspoint 
   </h2>
   <hr />
   <p> 
      Simply Easy Learning with Tutorialspoint
   </p>
</body>
</html>

在 hr 元素上應用屬性

考慮以下示例，我們建立了一個 HTML 文件，並使用了 <hr> 標籤及其屬性。

<!DOCTYPE html>
<html>
<body>
   <p>
      This is a normal hr Element
   </p>
   <hr>
   <p>
      This is a noshade hr Element
   </p>
   <hr noshade>
   <p>
      This is size set to 10 & green hr Element
   </p>
   <hr size="10" color="green">
   <p>
      This is width set to 100 & right aligned hr Element
   </p>
   <hr width="100" align="right">
</body>

在 hr 元素上應用樣式

在以下示例中，我們建立了一個 HTML 文件，並使用 CSS 屬性修改了 <hr> 標籤，如下所示：

<!DOCTYPE html>
<html>

<head>
    <style>
        hr {
            border: none;
            border-top: 3px solid #333;
            overflow: visible;
            text-align: center;
            height: 5px;
        }

        hr:after {
            background: #fff;
            content: 'HTML';
            padding: 4px;
            position: relative;
            top: -13px;
        }
    </style>
</head>

<body>
    <h2>TutorialsPoint</h2>
    <p>Simply Easy Learning </p>
    <hr>
    <h3>HTML hr Tag</h3>
    <p>It's creates a horizontal line.</p>
</body>

</html>

支援的瀏覽器

標籤
hr	是	是	是	是	是

html_tags_reference.htm

列印頁面