文章導航

HTML <article> 標簽

2019-7-30 14:07| 作者: admin| 查看: 507| 評論: 0|來自: 螞蟻部落

<article>是HTML5新增的語義化標簽之一。

關于語義化標簽的概念與作用可以參閱HTML 語義化布局概述一章節。

一.<article>標簽作用:

此標簽表示一個相對獨立與完整的內容塊,具有比較完整的語義。

比如頁面中的一篇文章,或者文章底部一條完整的評論。

<article>標簽除去包括內容外,通常還會包括標題(通常會放在<header>中)或者<footer>頁腳。

二.代碼片段:

下面通過簡單代碼片段對此標簽的應用做一下介紹。

[HTML] 純文本查看 復制代碼
<article>
  <h1>HTML語義化布局</h1>
  <p>文章內容</p>
  <footer>
    <p><small>版權:前端教程,作者:螞蟻部落</small></p>
  </footer>
</article>

代碼分析如下:

(1).<article>標簽包括生成一篇文章,很明顯這是一個相對獨立的內容區域。

(2).<h1>定義文章的標題,前面說過標題通常會放入<header>中,這并非硬性規定,需要靈活應用。

(3).<p>元素中放置的是文章的內容。

(4).文章的版權信息放置于<footer>標簽中。

對上面的代碼做一下修改:

[HTML] 純文本查看 復制代碼
<article>
  <header>
    <h1>HTML語義化布局</h1>
    <p>發布時間:<time datetime="2019-8-1">2019/08/01</time></p>
  </header>
  <p>文章內容</p>
  <footer>
    <p><small>版權:前端教程,作者:螞蟻部落</small></p>
  </footer>
</article>

上面代碼中,標題用<header>標簽包括起來就比較恰當了,前一個代碼完全沒有必要。

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

<article>內部可以嵌套<article>,內層的內容與外層內容相關。

上面代碼中,外層是文章主體部分,被嵌套的<article>中是文章的評論。

其實上面的代碼還可以再改進一下,代碼如下:

[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>

<article>與<section>功能比較類似,<article>標簽強調獨立性,語義更加明確。

可以認為<article>是一個特殊的<section>,能用<article>地方也可以用<section>。

將評論用<section>標簽包裹起來,雖然用<article>也沒什么不妥,但是<section>更加合適。

<section>語義沒有<artice>明確,更強調對一個完整內容進行分區,比如文章的段落。

評論區中的每一條評論可以看做一個完整的內容,所以可以用<article>標簽包裹。

關于<section>用法可以參閱HTML <section> 標簽一章節。


鮮花

握手

雷人

路過

雞蛋

最新評論

返回頂部
大圣捕鱼2 巅峰娱乐注册邀请码 万能六码定二码的方法 人工计划app 时时走势图 二八杠玩法规则 有人拉你投彩骗局 天天乐百人炸金花棋牌 时时彩综合走势图重庆 新鼎丰娱乐平台 哪个牛牛平台代理赚钱多 重庆开奖历史开奖记录 兴华彩票兼职 二八杠口诀赌博的技巧 赚钱咯稳包平特一肖 快速时时开奖网址 重庆时时彩v2.3.0版本