首頁(yè)技術(shù)文章正文

HTML容器標(biāo)簽div詳細(xì)介紹【前端開(kāi)發(fā)】

更新時(shí)間:2023-03-03 來(lái)源:黑馬程序員 瀏覽量:

div是英文“division”的縮寫,中文譯為“分割、區(qū)域”。<div>標(biāo)簽可以簡(jiǎn)單理解成一個(gè)容器,用于容納網(wǎng)頁(yè)中的文本模塊、圖像模塊,從而實(shí)現(xiàn)網(wǎng)頁(yè)的規(guī)劃和布局。<div>標(biāo)簽可以容納段落、標(biāo)題、表格、圖像等各種網(wǎng)頁(yè)元素,即大多數(shù)HTML標(biāo)簽都可以嵌套在<div>標(biāo)簽中;此外,標(biāo)簽中還可以嵌套多層標(biāo)簽。下面通過(guò)一個(gè)案例來(lái)演示<div>標(biāo)簽的用法,如下所示。

<!doctype html>
<htnl><head>
<meta charset="utf-8">
<title>div標(biāo)簽的使用</title>
</head>
<body>
<div style-"width:980px:margin:0 auto! padding:20px 0; background:tcoc:">
   <div style="height:60px;background:EFO:">頭部</div>
   <div atyle-"height:200px: background:#0C0:">內(nèi)容</div>
   <div style-"height:60px;background:#6CF;“>頁(yè)腳</div>
</div>
</body>
</html>

在上例中,第7~ll行代碼使用4個(gè)<div>標(biāo)簽對(duì)頁(yè)面進(jìn)行布局,其中,最外層的標(biāo)簽用于整體控制頁(yè)面版式,里面嵌套的3個(gè)<div>標(biāo)簽分別用于布局頁(yè)面頭部、內(nèi)容和頁(yè)腳。代碼中的“style=…”,用于為各個(gè)<div>標(biāo)簽定義樣式(style屬性的相關(guān)內(nèi)容將在后面的項(xiàng)目中詳細(xì)講解,這里了解即可)。效果如圖所示。

1677813032246_51.png

<div>標(biāo)簽最大的意義在于可與浮動(dòng)屬性float配合,進(jìn)行網(wǎng)頁(yè)布局,即常說(shuō)的“DIV+CSS”網(wǎng)頁(yè)布局。對(duì)于浮和布局這里了解即可,后面的內(nèi)容將會(huì)詳細(xì)介紹。<div>標(biāo)簽可以替代塊級(jí)元素(如<b>標(biāo)簽、<p>標(biāo)簽等),但是它們?cè)谡Z(yǔ)義上有一定的區(qū)別。例如,標(biāo)簽和<h2>標(biāo)簽的不同在于,<h2>標(biāo)簽具有特殊的含義,語(yǔ)義較重,代表著標(biāo)題,而<div>標(biāo)簽只是代表一個(gè)元素。


分享到:

Java培訓(xùn)班課程javaee

Python培訓(xùn)機(jī)構(gòu)python大數(shù)據(jù)

web前端培訓(xùn)課程升級(jí)V8.5web

AI+設(shè)計(jì)培訓(xùn)課程ui

大數(shù)據(jù)培訓(xùn)課程cloud

軟件測(cè)試培訓(xùn)課程test

c

新媒體運(yùn)營(yíng)培訓(xùn)netmarket

產(chǎn)品經(jīng)理培訓(xùn)課程pm

linux培訓(xùn)Linux

movies

智能機(jī)器人培訓(xùn)robot

電商視覺(jué)設(shè)計(jì)課程uids

AI

集成電路應(yīng)用開(kāi)發(fā)(嵌入式)培訓(xùn)課程jdbc

在線咨詢 我要報(bào)名
和我們?cè)诰€交談!