www.12345.com

2019-11-02網站百科16810
  • 詳情內容
  • 留言點評

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%看過的人還會看

www.12345.com | 下一页