html的<hr>水平線標簽元素怎么使用

# HTML的`<hr>`水平線標簽元素怎么使用

`<hr>`是HTML中用于創建水平分隔線的空元素標簽，本文將詳細介紹它的基本用法、樣式控制以及實際應用場景。

## 一、基本語法與默認效果

`<hr>`標簽不需要閉合標簽，直接插入即可生成一條橫貫容器的水平線：

```html
<p>第一部分內容</p>
<hr>
<p>第二部分內容</p>

默認效果表現為： - 1px粗細的灰色實線 - 帶有3D凹陷效果（不同瀏覽器表現可能不同） - 自動占據父容器的100%寬度

二、樣式自定義方法

1. 使用HTML屬性（已廢棄）

舊版HTML支持以下屬性（HTML5中已廢棄，建議用CSS替代）：

<hr width="50%" size="3" color="red" align="left">

2. 通過CSS控制樣式

推薦使用CSS進行現代化樣式控制：

hr.custom {
    border: 0;
    height: 2px;
    background: linear-gradient(90deg, red, blue);
    margin: 20px 0;
}

常用可定制屬性： - border：重置默認邊框 - height：控制線條粗細 - background：設置顏色/漸變 - margin：調整上下間距 - width：控制線條長度

三、語義化應用場景

<hr>在HTML5中被賦予語義化含義，表示”主題分隔”：

1. 內容區塊分隔

   <section>
    <h2>章節1</h2>
    <p>內容...</p>
    <hr aria-hidden="true">
    <h2>章節2</h2>
   </section>
   

2. 話題轉換標記

   <article>
    <p>討論第一個觀點...</p>
    <hr>
    <p>開始討論另一個相關話題...</p>
   </article>
   

四、高級創意用法

1. 裝飾性分隔線

hr.decorative {
    border: 0;
    height: 1px;
    background-image: repeating-linear-gradient(
        45deg, #ccc, #ccc 10px, #fff 10px, #fff 20px
    );
}

2. 圖標分隔線

hr.icons::after {
    content: "???";
    display: block;
    text-align: center;
    font-size: 1.5em;
}

五、無障礙訪問建議

1. 純裝飾性分隔線應添加：

   <hr aria-hidden="true">
   

2. 具有語義的分隔線可添加說明：

   <hr aria-label="主題分隔">
   

六、瀏覽器兼容性

所有主流瀏覽器均支持<hr>標簽，但需注意： - 默認樣式在不同瀏覽器中可能有差異 - CSS樣式需要測試各瀏覽器渲染效果 - 移動端可能需要調整粗細增強可見性

結語

雖然<hr>看似簡單，但合理運用能有效提升內容可讀性。建議： 1. 優先使用CSS控制樣式 2. 考慮語義化使用場景 3. 移動端做好適配測試 “`

（全文約700字，包含代碼示例和實用建議）