明輝手游網(wǎng)中心：是一個免費(fèi)提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺！

html水平分割線如何設(shè)置？html水平分割線的代碼示例講解

發(fā)表時間：2023-08-29 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]在前端網(wǎng)頁的開發(fā)中我們有時候需要用到水平分割線來分割不同的文檔，會讓整個網(wǎng)頁看起來美觀和整潔，也會凸顯某一段文字的重要性，那么網(wǎng)頁中水平分割線該如何實(shí)現(xiàn)呢？ 本篇文章就給大家來分享一下html水平分割線的實(shí)現(xiàn)方法。在html中有一個<hr>標(biāo)簽，<hr>標(biāo)簽可以非常輕松地久...
在前端網(wǎng)頁的開發(fā)中我們有時候需要用到水平分割線來分割不同的文檔，會讓整個網(wǎng)頁看起來美觀和整潔，也會凸顯某一段文字的重要性，那么網(wǎng)頁中水平分割線該如何實(shí)現(xiàn)呢？ 本篇文章就給大家來分享一下html水平分割線的實(shí)現(xiàn)方法。

在html中有一個<hr>標(biāo)簽，<hr>標(biāo)簽可以非常輕松地久設(shè)置一條水平線。

我們先來簡單看一下<hr>標(biāo)簽的定義

<hr> 標(biāo)簽在 HTML 頁面中創(chuàng)建一條水平線；水平分隔線（horizontal rule）可以在視覺上將文檔分隔成各個部分。

在 HTML 中，<hr>標(biāo)簽是一個單標(biāo)簽，沒有結(jié)束標(biāo)簽。

接著我們就來詳細(xì)講解一下html中的<br>標(biāo)簽如何設(shè)置水平分割線

<hr>標(biāo)簽設(shè)置水平線的特點(diǎn)是100%寬度水平分割線，并且獨(dú)占一行，<hr>標(biāo)簽設(shè)置的水平線將與上下內(nèi)容有一定距離。

<hr>是塊級元素，所以<hr>獨(dú)占于一行并且可以設(shè)置寬高。

下面我們就來看看<hr>標(biāo)簽設(shè)置水平分割線的實(shí)例代碼

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <p >
           桃之夭夭，灼灼其華。之子于歸，宜其室家。
           <hr width="300" align="left">
           桃之夭夭，有蕡其實(shí)。之子于歸，宜其家室。
           <hr width="300" align="left">
           桃之夭夭，其葉蓁蓁。之子于歸，宜其家人。
           <hr width="300" align="left">
        </p> 
    </body>
</html>

<hr>標(biāo)簽設(shè)置水平分割線效果如下：

2345截圖20181031111808.png

說明：<hr>標(biāo)簽和<br>標(biāo)簽一樣也會強(qiáng)制執(zhí)行一個簡單的換行，段落對齊會重新回到左對齊。

本篇文章到這里就全部結(jié)束了，關(guān)于<hr>標(biāo)簽的更多詳細(xì)內(nèi)容大家可以參考php中文網(wǎng)的html在線手冊進(jìn)一步了解。

以上就是html水平分割線怎么設(shè)置？html水平分割線的代碼示例講解的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。