2.5 分區(qū)元素div

前面講解的幾類塊級(jí)元素一般用于組織小區(qū)塊的內(nèi)容，為了方便管理，許多小區(qū)塊還需要放到一個(gè)大區(qū)塊中進(jìn)行布局。分區(qū)元素div常用于頁面布局時(shí)區(qū)塊的劃分，它相當(dāng)于一個(gè)大“容器”，可定義文檔中的分區(qū)。div是division的簡寫，意為分割、區(qū)域、分組。div元素可以把文檔分割為獨(dú)立的、不同的部分。它可以用作嚴(yán)格的組織工具，并且不使用任何格式與其關(guān)聯(lián)。div元素可以容納無序列表、有序列表、表格、表單等塊級(jí)標(biāo)簽，同時(shí)也可以容納普通的標(biāo)題、段落、文字、圖片等內(nèi)容。

div元素是一個(gè)塊級(jí)元素，也就是說，瀏覽器通常會(huì)在div元素前后放置一個(gè)換行符。實(shí)際上，換行是div元素固有的唯一格式表現(xiàn)。通常使用div元素來組合塊級(jí)元素，這樣就可以使用樣式對(duì)它們進(jìn)行格式化。由于div元素沒有明顯的外觀效果，因此需要為其添加CSS樣式屬性，才能看到區(qū)塊的外觀效果。div元素的格式為：

﹤div id="控件id"class="類名"﹥文本、圖像或表格﹤/div﹥

div元素的屬性如下。

1）id屬性：用于標(biāo)識(shí)單獨(dú)的唯一的元素。id值必須以字母或者下畫線開始，不能以數(shù)字開始。

2）class屬性：用于標(biāo)識(shí)類名或元素組（類似的元素，或者可以理解為某一類元素）。

如果用id或class來標(biāo)記﹤div﹥，那么該標(biāo)簽的作用會(huì)變得更加有效。不必為每一個(gè)﹤div﹥都加上class或id，雖然這樣做也有一定的好處。

【例2-18】 使用div元素組織網(wǎng)頁內(nèi)容。本例文件2-18.html在瀏覽器中的顯示效果如圖2-18所示。

本例把整個(gè)文檔體（body）設(shè)置成1個(gè)分區(qū)（page），然后在該分區(qū)中設(shè)置了4個(gè)分區(qū)，分別是頁頭分區(qū)（header）、導(dǎo)航欄分區(qū)（nav）、主題內(nèi)容分區(qū)（main）和頁腳的版權(quán)分區(qū)（foot）。

由于頁面中的內(nèi)容并未設(shè)置CSS樣式，因此整個(gè)頁面看起來并不美觀，在后續(xù)章節(jié)的練習(xí)中將利用CSS樣式對(duì)該頁面進(jìn)行美化。有關(guān)div元素的應(yīng)用，將在后續(xù)章節(jié)中介紹。