本文關(guān)鍵詞：HTML5與CSS3基礎(chǔ)教程，由筆耕文化傳播整理發(fā)布。

摘要：一般的，section定義成“通用的”區(qū)塊，但不要將它與div元素混淆。從語(yǔ)義上講，section標(biāo)記的是頁(yè)面中的特定區(qū)域，而div則不傳達(dá)任何語(yǔ)義。

作者：圖靈教育來(lái)源：《HTML5與CSS3基礎(chǔ)教程》（第八版）

第三章全部章節(jié)：

第一節(jié)： “基本HTML結(jié)構(gòu) 開(kāi)始編寫(xiě)網(wǎng)頁(yè)”

第二節(jié)：創(chuàng)建頁(yè)面標(biāo)題

第三節(jié)：創(chuàng)建分級(jí)標(biāo)題

第四、五節(jié)： 普通頁(yè)面構(gòu)成和創(chuàng)建頁(yè)眉

第六節(jié)： 標(biāo)記導(dǎo)航 通過(guò)nav指向任意頁(yè)面內(nèi)容

第七節(jié)：標(biāo)記頁(yè)面主要區(qū)域

第八節(jié)： 標(biāo)題在不同瀏覽器中顯示相同大小（創(chuàng)建文章）

第九節(jié)： 用section定義區(qū)塊 它與div不同

第十節(jié)： 用aside表示網(wǎng)頁(yè)獨(dú)立內(nèi)容(指定附注欄)

第十一節(jié)： 通過(guò)footer在任何位置創(chuàng)建頁(yè)腳

有時(shí)需要在一段內(nèi)容外圍包一個(gè)容器，從而可以為其應(yīng)用CSS樣式或JavaScript效果。如果沒(méi)有這個(gè)容器，頁(yè)面就會(huì)不一樣（參見(jiàn)圖3.12.1）。在評(píng)估內(nèi)容的時(shí)候，考慮使用article、section、aside、nav等元素，卻發(fā)現(xiàn)它們從語(yǔ)義上講都不合適。

這時(shí)，你真正需要的是一個(gè)通用容器，一個(gè)完全沒(méi)有任何語(yǔ)義含義的容器。這個(gè)容器就是div（來(lái)自division一詞）元素，如圖3.12.2所示。有了div，就可以為其添加樣式（參見(jiàn)圖3.12.3）或JavaScript效果了。一定要閱讀補(bǔ)充材料“有關(guān)div的一些歷史以及何時(shí)在HTML5中使用它”，了解什么時(shí)候可以在頁(yè)面中使用div。

圖3.12.1

在不使用div元素的情況下，我們實(shí)現(xiàn)了這個(gè)設(shè)計(jì)。不過(guò)，為頁(yè)面內(nèi)容加上div（參見(jiàn)圖3.12.2）以后，我們有了一個(gè)可以添加更多樣式的通用容器（效果如圖3.12.3所示）

圖3.12.2

現(xiàn)在有一個(gè)div包著所有的內(nèi)容。頁(yè)面的語(yǔ)義沒(méi)有發(fā)生改變，但現(xiàn)在我們有了一個(gè)可以用CSS添加樣式的通用容器（圖3.12.3）

圖3.12.3

div元素自身沒(méi)有任何默認(rèn)樣式，只是其包含的內(nèi)容從新的一行開(kāi)始（圖3.12.4）。不過(guò)，我們可以對(duì)div添加樣式以實(shí)現(xiàn)自己的設(shè)計(jì)。這里，我對(duì)div添加了淺的背景色和陰影，這樣我就可以將body元素的背景改為漸變的紅色，使內(nèi)容凸顯出來(lái)。要查看實(shí)現(xiàn)這個(gè)頁(yè)面的HTML和CSS，，可以訪問(wèn)

創(chuàng)建通用容器的步驟

(1) 輸入

  本文關(guān)鍵詞：HTML5與CSS3基礎(chǔ)教程，由筆耕文化傳播整理發(fā)布。