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