
build網(wǎng)站制作 |
build網(wǎng)站制作當前位置:首頁>主要服務>網(wǎng)站制作網(wǎng)站制作技術(shù)之HTML5 中 div section article 的區(qū)別div 這個標簽是我們見得最多、用得最多的一個標簽。本身沒有任何語義,用作布局以及樣式化或腳本的鉤子(hook)。 section 與 div 的無語義相對,簡單地說 section 就是帶有語義的 div 了,但是千萬不要覺得真得這么簡單。section 表示一段專題性的內(nèi)容,一般會帶有標題。看到這里,我們也許會想到,那么一篇博客文章,或者一條單獨的評論豈不是正好可以用 section 嗎? 接著看:當元素內(nèi)容聚合起來更加言之有物時,應該使用 article 來替換 section 。 那么,section 應該什么時候用呢?再接著看:section 應用的典型場景有文章的章節(jié)、標簽對話框中的標簽頁、或者論文中有編號的部分。感覺 section 和下面要介紹的 artilce 更加適用于模塊化應用。 要注意,W3C 還警告說: section 不僅僅是一個普通的容器標簽。當一個標簽只是為了樣式化或者方便腳本使用時,應該使用 div 。一般來說,當元素內(nèi)容明確地出現(xiàn)在文檔大綱中時,section 就是適用的。 <article> <hgroup> <h1>網(wǎng)站制作技術(shù)</h1> <h2>HTML5 中 div section article 的區(qū)別</h2> </hgroup> <p>HTML5 中</p> <section> <h1>div</h1> <p>這個標簽是我們見得最多、用得最多的一個標簽</p> </section> <section> <h1>section</h1> <p>與 div 的無語義相對,簡單地說 section 就是帶有語義的 div 了,但是千萬不要覺得真得這么簡單.</p> </section> </article> article article 是一個特殊的 section 標簽,它比 section 具有更明確的語義, 它代表一個獨立的、完整的相關內(nèi)容塊。一般來說, article 會有標題部分(通常包含在 header 內(nèi)),有時也會包含 footer 。雖然 section 也是帶有主題性的一塊內(nèi)容,但是無論從結(jié)構(gòu)上還是內(nèi)容上來說,article 本身就是獨立的、完整的。 當 article 內(nèi)嵌 article 時,原則上來說,內(nèi)部的 article 的內(nèi)容是和外層的 article 內(nèi)容是相關的。例如,一篇博客文章中,包含用戶提交的評論的 article 就應該潛逃在包含博客文章 article 之中。 例如: <article> <header> <h1>HTML5 中 div section article 的區(qū)別</h1> <p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p> </header> <p>HTML5 中 div section article 的區(qū)別</p> <p>...</p> <footer> <a href="http://www.huaianlvs.cn/" target="_blank">網(wǎng)站制作</a> </footer> </article> 總結(jié) div section article ,語義是從無到有,逐漸增強的。div 無任何語義,僅僅用作樣式化或者腳本化的鉤子(hook),對于一段主題性的內(nèi)容,則就適用 section,而假如這段內(nèi)容可以脫離上下文,作為完整的獨立存在的一段內(nèi)容,則就適用 article。原則上來說,能使用 article 的時候,也是可以使用 section 的,但是實際上,假如使用 article 更合適,那么就不要使用 section 。 nav 和 aside 的使用也是如此,這兩個標簽也是特殊的 section,在使用 nav 和 aside 更合適的情況下,也不要使用 section 了。 對于 div 和 section、 article 以及其他標簽的區(qū)分比較簡單。對于 section 和 article 的區(qū)分乍看比較難,其實重點就是看看這段內(nèi)容脫離了整體是不是還能作為一個完整的、獨立的內(nèi)容而存在,這里面的重點又在完整身上。因為其實說起來 section 包含的內(nèi)容也能算作獨立的一塊,但是它只能算是組成整體的一部分,article 才是一個完整的整體。
0
|
易勢沈陽建站專業(yè)機構(gòu),以DIV+CSS為主,js/jQuery為輔,制作利于優(yōu)化,頁面美觀的優(yōu)質(zhì)網(wǎng)站!

網(wǎng)絡策劃公司|新浪官方微博|大連網(wǎng)站建設
沈陽易勢科技有限公司 網(wǎng)站制作網(wǎng)絡營銷公司 © 2011 , All rights reserved. 公司地址:沈陽市鐵西區(qū)貴和街道建設中路15號淺草綠閣商務樓402室沈陽做網(wǎng)站 沈陽建站
遼B2-20150173-8