hr標(biāo)簽是HTML中用于表示主題分隔的自閉合標(biāo)簽，默認(rèn)顯示為灰色水平線，語(yǔ)義上標(biāo)識(shí)內(nèi)容主題變化，提升可訪問(wèn)性；通過(guò)CSS可自定義樣式，如改變顏色、高度、邊框，實(shí)現(xiàn)實(shí)線、漸變、虛線、陰影等效果，并可通過(guò)設(shè)置width、margin等屬性優(yōu)化響應(yīng)式布局中的顯示，增強(qiáng)頁(yè)面結(jié)構(gòu)清晰度與視覺(jué)表現(xiàn)力。

在HTML中，hr 標(biāo)簽用于表示內(nèi)容中的主題分隔線，也就是常說(shuō)的水平分割線。它是一個(gè)自閉合標(biāo)簽，無(wú)需結(jié)束標(biāo)簽，常用于分隔文章段落、章節(jié)或不同區(qū)塊內(nèi)容，使頁(yè)面結(jié)構(gòu)更清晰。

基本用法

hr 標(biāo)簽?zāi)J(rèn)會(huì)在瀏覽器中渲染為一條灰色的水平線。使用非常簡(jiǎn)單：

這樣就會(huì)在頁(yè)面上插入一條默認(rèn)樣式的分割線。無(wú)需任何屬性即可生效，兼容所有現(xiàn)代瀏覽器。

語(yǔ)義化作用

除了視覺(jué)上的分隔，hr 在語(yǔ)義上也代表了段落級(jí)別內(nèi)容的主題變化。例如，在一篇文章中切換話題時(shí)使用 hr，比單純用 CSS 畫(huà)一條線更具可訪問(wèn)性，屏幕閱讀器能識(shí)別其語(yǔ)義意義。

立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；

自定義樣式技巧

雖然默認(rèn)的 hr 樣式較單調(diào)，但可以通過(guò) CSS 輕松美化，實(shí)現(xiàn)各種視覺(jué)效果。

示例：改變顏色、高度和邊框

說(shuō)明：將默認(rèn)邊框去掉，設(shè)置高度和背景色，可得到一條簡(jiǎn)潔的藍(lán)色實(shí)線。

巧文書(shū)

巧文書(shū)是一款A(yù)I寫(xiě)標(biāo)書(shū)、AI寫(xiě)方案的產(chǎn)品。通過(guò)自研的先進(jìn)AI大模型，精準(zhǔn)解析招標(biāo)文件，智能生成投標(biāo)內(nèi)容。

8

查看詳情

進(jìn)階樣式：漸變線條

虛線或點(diǎn)線風(fēng)格：

帶陰影或立體感：

響應(yīng)式與布局適配

在移動(dòng)端或不同寬度容器中，可通過(guò)設(shè)置 margin 和 max-width 來(lái)優(yōu)化顯示效果：

這樣可以讓分割線居中，并在小屏幕上保持適當(dāng)間距。

基本上就這些。合理使用 hr 標(biāo)簽并結(jié)合 CSS 自定義，既能提升頁(yè)面可讀性，也能增強(qiáng)視覺(jué)設(shè)計(jì)表現(xiàn)力。不復(fù)雜但容易忽略細(xì)節(jié)。

以上就是HTML水平分割線hr用法_HTML hr標(biāo)簽分割線樣式自定義技巧的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！