HTML5 div article section標簽區別與應用

2019-03-19網站百科8010
  • 詳情內容
  • 留言點評

HTML5推出了一系列新元素,被廣泛應用。然而,有一些元素在使用時易與傳統div元素混淆,特別是這兩個新元素:<section>和<article>。 我們最常被新手問到的問題是:在什么情況下我們應該使用這些元素?以及我們應該如何正確的使用這些元素? 今天我們就來探討一下它們之間的區別。

一、section元素

       從字面理解就是區塊、部分的意思,相對于article元素更加廣泛,每個區塊都可以使用,比如頁面里的導航菜單、文章正文、文章的評論等。

       1、section元素用于對網站或應用程序中頁面上的內容進行分塊,section元素的作用是對頁面上的內容進行分塊,或者說對文章進行分段,;

       2、一個section元素通常由內容及其標題組成。通常不推薦為那些沒有標題的內容使用section元素,

       3、section元素并非一個普通的容器元素;當一個內容需要被直接定義樣式或通過腳本定義行為時,推薦使用div而非section元素;

       4、如果article、nav、aside元素都符合某條件,那么就不要用section元素定義;

       5、section元素中的內容可以單獨存儲到數據庫中或輸出到word文檔中。

二、article元素

       article元素代表文檔、頁面或應用程序中獨立的、完整的、可以獨自被外部引用的內容。它可以是一篇博客或報刊中的文章、一篇論壇帖子、一段用戶評論或獨立的插件,或其他任何獨立的內容。除了內容部分,一個article元素通常有它自己的標題(一般放在一個header元素里面),有時還有自己的腳注。

       注:article元素是可以嵌套使用的,內層的內容在原則上需要與外層的內容相關聯。例如,一篇博客文章中,針對該文章的評論就可以使用嵌套article元素的方式;用來呈現評論的article元素被包含在表示整體內容的article元素里面。

<article>
  <header>
           <h1>article元素使用方法</h1>
   <p>發表日期:<time pubdate="pubdate">2019/2/9</time></p>
  </header>
  <p>此標簽里顯示的是article整個文章的主要內容,,下面的section元素里是對該文章的評論</p>
  <section>
           <h2>評論</h2>
       <article>
                  <header>
        <h3>發表者:yiwuku</h3>
        <p>1小時前</p>
     </header>  
     <p>這篇文章很不錯啊,頂一下!</p>
               </article> 
    <article>
                  <header>            
         <h3>發表者:益吾庫</h3>
                         <p>1小時前</p>
     </header>
        <p>這篇文章很不錯啊,對article解釋的很詳細</p>  
    </article>
      </section>
</article>

三、div元素

div是html中最古老的元素之一,對應英文單詞中的division,是塊級元素,瀏覽器通常會在 div 元素之前和之后插入換行符,所以div之間內容會自動換行。div可以定義文檔中的分區或節,把文檔分割成獨立不同的部分,是最常用的一個標簽,在網頁呈現中發揮著極大的作用,但div本身沒有什么語義,更適合和進行樣式化。

歡迎點評!也可以是問題反饋和建議

支持Ctrl+Enter提交
暫無留言,快搶沙發!
0

真心很贊,必須打賞!嗯,以資鼓勵~

點此打賞

99%看過的人還會看

海南环岛赛彩票奖金