div section article的區(qū)別與應(yīng)用

1、說應(yīng)用之前先看一下這幾個(gè)標(biāo)簽的語義div這個(gè)標(biāo)簽是我們見得最多、用得最多的一個(gè)標(biāo)簽。本身沒有任何語義，用作布局以及樣式化或腳本的鉤子(hook)。section與div的無語義相對(duì)，簡(jiǎn)單地說section就是帶有語義的div了，但是千萬不要覺得真得這么簡(jiǎn)單。section表示一段專題性的內(nèi)容，一般會(huì)帶有標(biāo)題?？吹竭@里，我們也許會(huì)想到，那么一篇博客文章，或者一條單獨(dú)的評(píng)論豈不是正好可以用section嗎？接著看：當(dāng)元素內(nèi)容聚合起來更加言之

2、有物時(shí)，應(yīng)該使用article來替換section。那么，section應(yīng)該什么時(shí)候用呢？再接著看：section應(yīng)用的典型場(chǎng)景有文章的章節(jié)、標(biāo)簽對(duì)話框中的標(biāo)簽頁、或者論文中有編號(hào)的部分。一個(gè)網(wǎng)站的主頁可以分成簡(jiǎn)介、新聞和聯(lián)系信息等幾部分。其實(shí)我對(duì)這里傳達(dá)信息很感興趣，因?yàn)楦杏Xsection和下面要介紹的artilce更加適用于模塊化應(yīng)用，這個(gè)話題以后會(huì)出篇專門的文章來討論，這里暫時(shí)略過。要注意，W3C還警告說：section不僅僅是一

3、個(gè)普通的容器標(biāo)簽。當(dāng)一個(gè)標(biāo)簽只是為了樣式化或者方便腳本使用時(shí)，應(yīng)該使用div。一般來說，當(dāng)元素內(nèi)容明確地出現(xiàn)在文檔大綱中時(shí)，section就是適用的。articlearticle是一個(gè)特殊的section標(biāo)簽，它比section具有更明確的語義它代表一個(gè)獨(dú)立的、完整的相關(guān)內(nèi)容塊。一般來說，article會(huì)有標(biāo)題部分(通常包含在header內(nèi))，有時(shí)也會(huì)包含footer。雖然section也是帶有主題性的一塊內(nèi)容，但是無論從結(jié)構(gòu)上還是內(nèi)容

4、上來說，article本身就是獨(dú)立的、完整的。HTMLSpec中接著又列舉了一些article適用的場(chǎng)景。當(dāng)article內(nèi)嵌article時(shí)，原則上來說，內(nèi)部的article的內(nèi)容是和外層的article內(nèi)容是相關(guān)的。例如，一篇博客文章中，包含用戶提交的評(píng)論的article就應(yīng)該嵌套在包含博客文章article之中。問題是怎么才算“完整的獨(dú)立內(nèi)容”？有個(gè)最簡(jiǎn)單的判斷方法是看這段內(nèi)容在RSSfeed中是不是完整的?？催@段內(nèi)容脫離了所在的

5、語境，是否還是完整的、獨(dú)立的?？赐炅苏Z義下面來說一下應(yīng)用其實(shí)最讓人糾結(jié)的地方在于首頁、列表頁面、專題頁面的應(yīng)用。對(duì)于內(nèi)容頁，毫無疑問最優(yōu)先選擇的是article標(biāo)簽。下面就先簡(jiǎn)單說一下內(nèi)容頁，然后在說列表、首頁、專題等頁面應(yīng)該如何使用這里左側(cè)為什么我沒有用section呢是因?yàn)檫@每一條都是有標(biāo)題和內(nèi)容完全可以作為一個(gè)article對(duì)待有一個(gè)基本原則就是在可以使用article的時(shí)候就不要使用section了.右側(cè)熱門文章是一個(gè)功能塊可以

6、獨(dú)立存在所以用了section.div的作用是用來給頁面布局.左側(cè)如果只是標(biāo)題的列表而沒有內(nèi)容的話就可以使用section了.當(dāng)然這并不是說section不能用于有標(biāo)題和內(nèi)容的區(qū)域在特定情況下還是要用section的比如一篇文章內(nèi)有一部分內(nèi)容可以獨(dú)立出來這時(shí)候就需要用section.而不是用article嵌套article因?yàn)槲覀儾荒芷茐恼w我們可以理解為這篇文章有很多個(gè)section組成.section和article是可以相互嵌套的