首頁技術文章正文

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

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

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

<!doctype html>
<htnl><head>
<meta charset="utf-8">
<title>div標簽的使用</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;“>頁腳</div>
</div>
</body>
</html>

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

1677813032246_51.png

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


分享到：
在線咨詢 我要報名
和我們在線交談！