認(rèn)識水平線標(biāo)簽 hr 標(biāo)簽

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

1. hr 標(biāo)簽的使用

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

2. hr 標(biāo)簽的作用

hr 標(biāo)簽的表現(xiàn)為一條水平線，我們可以用它來分隔文檔。而且我們通過給 hr 標(biāo)簽設(shè)置屬性來達(dá)到不同的效果，比如我們可以 hr 標(biāo)簽的寬度、顏色等，來適應(yīng)我們不同的應(yīng)用場景。

hr 標(biāo)簽?zāi)J(rèn)寬度為 100%，既整個屏幕的寬度，這時我們就可以通過控制其屬性來達(dá)到不同的效果，例如：

設(shè)置 hr 標(biāo)簽的寬度，效果如下圖：

<hr width='500'>

設(shè)置 hr 標(biāo)簽的顏色，效果如下圖：

<hr color='red'>

3. hr 標(biāo)簽的特點(diǎn)

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

4. 注意事項

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

5. 真實(shí)案例分享

騰訊新聞

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

6. 小結(jié)

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