一、hr標籤是什麼？
hr標籤全稱為Horizontal Rule（水平分割線）標籤，用於在HTML文檔中繪製一條水平線。
該標籤僅需一個單一標籤，沒有結束標籤，會自動在水平空間上添加一條水平線。
<hr>
上述代碼生成的水平線默認情況下為淺灰色，並且會根據瀏覽器的不同而略微有所不同。但是，我們可以在hr標籤中使用style屬性來設置它的顏色、寬度、尺寸等屬性。接下來我們就來逐一介紹。
二、hr標籤的style屬性
1、設置顏色
可以使用style屬性來設置水平線的顏色，填入顏色的名稱 或 十六進位顏色值即可。
比如，讓水平線變成紅色的代碼如下：
<hr style="color:red;">
2、設置寬度和高度
使用style屬性還可以設置水平線的寬度和高度，屬性值支持 像素(px)、百分比(%)等單位
例如，我們想讓水平線寬度為80%，高度為10像素，則代碼如下所示：
<hr style="width:80%;height:10px;border:none;background-color:gray;">
3、通過hr標籤實現分割線的效果
通過hr標籤的style屬性，我們還可以實現具有分割線的效果。例如，在頁面某個模塊之間插入一條分割線：
<div style="border-top:1px solid gray;margin:10px 0;"></div>
上面的代碼就可以實現在兩個模塊之間加入一條細小的分割線，而且還支持調節線條的顏色和寬度。
三、hr標籤的優缺點
hr標籤的優點是非常容易使用，不需要任何CSS知識，只需要一個簡單的標籤，就可以在頁面上創建一條水平線。
然而，它的缺點也同樣明顯：它的樣式比較單調，無法創建較為複雜的線條形狀，例如彎曲、斜線等，此時就需要使用CSS來實現。
四、總結
hr標籤是HTML標籤中的一種，用於在HTML文檔中添加一條水平線。可以通過style屬性設置水平線的樣式，包括顏色、寬度、高度等屬性。雖然它的樣式相對簡單，但是使用起來非常便捷。
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/253381.html
微信掃一掃 
支付寶掃一掃 