您的位置:首页> 前端教程> HTML教程
文章导航

HTML <article> 标签

2019-7-30 14:07| 作者: admin| 查看: 1418| 评论: 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> 标签一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部