html基礎(chǔ)必備-分隔標(biāo)記，前端小白一看就會(huì)

節(jié)、分區(qū)和分割線

這些標(biāo)記用于將頁(yè)面分成多個(gè)部分。熟練地掌握這些標(biāo)記將意味著構(gòu)建出具有良好的結(jié)構(gòu)和布局的頁(yè)面，使其更加友好和易于閱讀。

分區(qū) - <div> </div>

div標(biāo)記定義了HTML文件中的一個(gè)部分或分區(qū)。它通常包含需要組合在一起的標(biāo)題、段落、表格或其他元素。通過(guò)設(shè)置<div class="">與css一起使用來(lái)設(shè)置網(wǎng)頁(yè)某個(gè)部分的顯示。

段落 - <p> </p>

p標(biāo)記用來(lái)定義文本的段落，就像你在書(shū)中看到的那樣，一旦文本達(dá)到屏幕邊緣就會(huì)自動(dòng)折到下一行。當(dāng)另一個(gè)<p>標(biāo)記用于開(kāi)始下一個(gè)段落時(shí)，瀏覽器將在段落之間添加一些空白。p標(biāo)記具有以下屬性：

align="" - 段落中文本的對(duì)齊方式：left, center or right
width="" - 段落將占據(jù)頁(yè)面的固定寬度或百分比，默認(rèn)為100%

內(nèi)聯(lián) - <span> </span>

span標(biāo)記用于將內(nèi)聯(lián)元素組合在一起，例如句子中的幾個(gè)單詞，以便僅對(duì)這些單詞應(yīng)用css樣式。span標(biāo)記可以在div和p標(biāo)記中使用，因?yàn)樗粫?huì)創(chuàng)建新的塊。

換行 - <br>

br標(biāo)記相當(dāng)于一個(gè)回車(chē)符，用于在新行開(kāi)始文本。一行中的多個(gè)<br>標(biāo)記將在網(wǎng)頁(yè)上創(chuàng)建一個(gè)很大的垂直空間。

水平分隔線 - <hr>

hr標(biāo)記通常被稱(chēng)為HTML行分隔符標(biāo)記，創(chuàng)建一條通常用于視覺(jué)上分隔頁(yè)面的水平線。它具有以下屬性：

width="" - 線條將占用固定寬度，默認(rèn)100%寬度
color="" - 線條顏色
noshade - 取消3D外觀，創(chuàng)建一條平的實(shí)線分隔線

不換行 - <nobr> </nobr>

出于某種原因，你希望文本在一條直線上繼續(xù)，而不是在屏幕的邊緣換行，可以使用nobr。注意：這將迫使用戶(hù)向右滾動(dòng)以查看行的其余部分，這是一種糟糕的設(shè)計(jì)。

例子

下面是以上標(biāo)記的示例：

瀏覽器顯示內(nèi)容如下所示：

種分割線Html代碼

一、基本線條：

1、<HR>

2、align線條位置（可選left、right、center）；width線條長(zhǎng)度；color顏色；size厚度

<HRalign=center width=300 color=#987cb9SIZE=1>

二、特效（效果并不是孤立的，可相互組合）

1、兩頭漸變透明：

<HR style="FILTER:alpha(opacity=100,finishopacity=0,style=2)" width="80%"color=#987cb9 SIZE=10>

2、紡錘形：

<HR style="FILTER:alpha(opacity=100,finishopacity=0,style=1)" width="80%"color=#987cb9 SIZE=3>

3、右邊漸變透明：

<HR style="FILTER:alpha(opacity=0,finishopacity=100,style=1)" width="80%"color=#987cb9 SIZE=3>

4、左邊漸變透明：

<HR style="border:1 dashed #987cb9" width="80%"color=#987cb9 SIZE=1>

5、虛線：

<HR style="border:3 double #987cb9" width="80%"color=#987cb9 SIZE=3>

6、雙線：

<HR style="FILTER:progid:DXImageTransform.Microsoft.Shadow(color:#987cb9,direction:145,strength:15)"width="80%" color=#987cb9 SIZE=1>

7、立體效果：

<HR style="FILTER:progid:DXImageTransform.Microsoft.Glow(color=#987cb9,strength=10)"width="80%" color=#987cb9 SIZE=1>

8、鋼針效果：

<table border="1px" cellpadding="0" cellspacing="0"style="height:265px;border-left-style:solid;border-bottom-style:none;border-right-style:none;border-top-style:none">

９．垂直分割線

<table border="1px" cellpadding="0" cellspacing="0"style="height:265px;border-left-style:solid;border-bottom-style:none;border-right-style:none;border-top-style:none">

虛線的Html代碼

HTML代碼：

<hr style="border: 1px dotted #FF0000; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px">

[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

在線咨詢(xún)

上一篇：Ionic3.x+ 新增tabs頁(yè)面、去掉二級(jí)頁(yè)面t
下一篇：那些你不知道的社交Feed流圖片布局

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商