腾讯欢乐捕鱼刷金币|腾讯欢乐捕鱼大战技巧
您的位置:首頁> 實例代碼> HTML實例

<section>與<article> 區別

2019-7-31 11:46| 作者: admin| 查看: 3766| 評論: 0|來自: 螞蟻部落

<section>與<article>都是為更為精確語義化布局而生,兩者相同之處。

自然也有不同點,否則創建兩個標簽就多此一舉了,下面詳細做一下介紹。

一.兩者關系闡述:

(1).article:翻譯成漢語具有"文章"的意思。

(2).section:翻譯成漢語局域"章"或者"節"的意思。

如果說<article>標簽是一篇文章的話,那么<section>標簽就是其中的一個段落或者一個小章節。

當然你不能因此說,<article>與<section>兩者是從屬關系,它們兩個是可以相互嵌套的。

兩個標簽的異同點簡單總結如下:

(1).<article>是一種特殊的<section>,用<article>都可以用<section>。

(2).<article>強調整體性與獨立性,語義更加明確。

(3).<section>強調的是對整體內容進行劃分區域,獨立性和語義明確性比<article>差。

特別說明:兩標簽都是為頁面布局語義化更強,在表現上并沒有任何特殊之處,和一個普通div相同。

二.代碼片段:

下面通過一段簡單的代碼片段對兩者的區別進行一下分析。

[HTML] 純文本查看 復制代碼
<article>
  <header>
    <h1>HTML語義化布局</h1>
    <p>發布時間:<time datetime="2019-8-1">2019/08/01</time></p>
  </header>
  <p>文章內容</p>
  <section>
    <h2>評論</h2>
    <article>
      <header>
        <h3>評論者: 螞蟻部落</h3>
        <p><time datetime="2019-8-1">一分鐘前</time></p>
      </header>
      <p>評論內容</p>
     </article>
  </section>
</article>

上述代碼有兩個標簽的應用,分析如下:

(1).總體上市一篇文章,很明顯具有很好的獨立性,所以最外層用<article>包裹比較恰當。

(2).文章的評論屬于文章的一個一部分或者一個功能分區,所以使用<section>包裹。

(3).文章評論的單獨一條可以看做一個獨立的整體,所以使用<article>更為恰當。


鮮花

握手

雷人

路過

雞蛋

最新評論

返回頂部
腾讯欢乐捕鱼刷金币 下载福建快3开奖结果 快乐888电台在线 14场胜负彩比分直播即时比分直播 彩38彩票游戏 新手做金融怎么赚钱 黑龙江36选7周即开奖 双色球蓝球走势图 快乐10分中奖技巧 彩票2元网广东26选5 申城棋牌最新版下载