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

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

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

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)簽。下面通過一個(gè)案例來演示<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è)布局，即常說的“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è)元素。


分享到：
在線咨詢 我要報(bào)名
和我們?cè)诰€交談！