認識水平線標簽 hr 標簽

在我們某些特定的場景中，我們需要創建分割線來將我們的文檔分隔開，以表示每個區域是單獨的區域。這個時候我們就需要借助到 水平線標簽 hr 標簽了。

1. hr 標簽的使用

hr 標簽在 HTML 頁面中創建一條水平線。水平分隔線可以在視覺上將文檔分隔成各個部分。hr 標簽為單標簽，其表現形式為一條橫線。具體如下圖所示：

2. hr 標簽的作用

hr 標簽的表現為一條水平線，我們可以用它來分隔文檔。而且我們通過給 hr 標簽設置屬性來達到不同的效果，比如我們可以 hr 標簽的寬度、顏色等，來適應我們不同的應用場景。

hr 標簽默認寬度為 100%，既整個屏幕的寬度，這時我們就可以通過控制其屬性來達到不同的效果，例如：

設置 hr 標簽的寬度，效果如下圖：

<hr width='500'>

設置 hr 標簽的顏色，效果如下圖：

<hr color='red'>

3. hr 標簽的特點

1. hr 標簽是塊級元素，寬度默認為100%，既整個屏幕的寬度，自帶換行效果；
2. hr 標簽表現為一條水平線，默認為黑色；
3. hr 標簽為單標簽，沒有尾標簽；
4. 可以給 hr 標簽設置width屬性來改變 hr 標簽的寬度；
5. 可以給 hr 標簽設置color屬性來改變 hr 標簽的顏色。

4. 注意事項

1. hr 標簽為單標簽，沒有內容，也沒有尾標簽；
2. 因為 hr 標簽的表現很固定，所以我們真實場景中需要做分割線的效果，盡量還是使用 CSS 控制；
3. 給 hr 標簽設置寬度之后，默認是相對于居中顯示，如需要控制其位置，還是需要借助 CSS 。

5. 真實案例分享

騰訊新聞

<h1>女子買4件茅臺酒全是假的 店家賠償44200元</h1>
<h3> 煙酒行里買茅臺，4件都是假的</h3>
<hr>
<p>
 家住貴陽白云區的王女士，這兩天有點郁悶，因為她在一家煙酒行購買了4件茅臺酒，結果4件酒都有問題，面對權威部門的鑒定結果，王女士只好向工商、消協等部門進行了反映。目前，相關部門正在調查中
</p>

6. 小結

1. hr 標簽為單標簽，沒有尾標簽；
2. hr 標簽為塊級元素，默認占一整行，自帶換行效果；
3. 可以設置 width 屬性來改變 hr 標簽的寬度；
4. 可以設置 color 屬性來改變 hr 標簽的顏色；
5. hr 標簽可以用于分隔文檔。