• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • <article>

    版本:HTML5

    HTML<article>元素表示文档、页面、应用或网站中的独立结构,其意在成为可独立分配的或可复用的结构,如在发布中,它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件,或者其他独立的内容项目。

    浏览器支持

    IE 9+、Firefox、Opera、Chrome 和 Safari 都支持<article>标签。
    注释:IE 8 或更早版本的 IE 浏览器不支持<article>标签。

    示例

    <article>
    <h1>internet explorer 9</h1>
    <p>windows internet explorer 9 (abbreviated as ie9) was released to
    the public on march 14, 2011 at 21:00 pdt.....</p>
    </article>
    

    标签定义

    • <article>标签定义独立的内容。独立于文档的其余部分。<article>标签定义的内容,本身必须是有意义的,且必须是独立于文档的其余部分。
    • <article>标签定义外部的内容。比如来自一个外部的新闻,或者来自 blog 的文本,或者是来自论坛的文本,或者评论,亦或是来自其他外部源内容。

    使用说明

    • 每个<article>,通常包括标题(<h1>-<h6>元素)作为<article>元素的子元素。
    • <article>可以互相嵌套使用。当<article>元素嵌套使用时,则该元素代表与外层元素有关的文章。例如,代表博客评论的<article>元素可嵌套在代表博客文章的<article>元素中。
    • <article>元素的作者信息可通过<address>元素提供,但是不适用于嵌套的<article>元素。
    • <article>元素的发布日期和时间,可以使用<time>元素的datetime属性来描述<article>元素的发布日期和时间。请注意<time>pubdate属性不再是 W3C HTML5标准。

    给定HTML文档中可以包含多篇文章。例如,阅读器在博客上滚动时一个接一个地显示每篇文章的文本,每个帖子将包含在<article>元素中,可能包含一个或多个<section>

    内容分类流式元素,章节元素,可触摸内容.
    允许的内容流式元素.
    标记省略不允许,开始标签和结束标签都不能省略。
    允许的父元素所有接受流式内容元素的元素。注意<article>元素不能成为<address>元素的子元素。
    允许的 ARIA rolesapplication,document,feed,main,presentation,region
    DOM 实例HTMLElement

    HTML 4.01 与 HTML5之间的差异

    <article>标签是 HTML5 的新标签。

    属性

    此元素只具有全局属性。

    全局属性

    <article>标签支持HTML 的全局属性。

    事件属性

    <article>标签支持HTML 的事件属性。

    例子

    <article>
    <h2>netscape is dead</h2>
    aol has now officially announced that they will end 
    the development and support of all netscape browsers.
    </article>
    
    <article class="film_review">
      <header>
        <h2>jurassic park</h2>
      </header>
      <section class="main_review">
        <p>dinos were great!</p>
      </section>
      <section class="user_reviews">
       <article class="user_review">
          <p>way too scary for me.</p>
          <footer>
            <p>
              posted on
              <time datetime="2015-05-16 19:00">may 16</time>
              by lisa.
            </p>
          </footer>
        </article>
        <article class="user_review">
          <p>i agree, dinos are my favorite.</p>
          <footer>
            <p>
              posted on
              <time datetime="2015-05-17 19:00">may 17</time>
              by tom.
            </p>
          </footer>
        </article>
      </section>
      <footer>
        <p>
          posted on
          <time datetime="2015-05-15 19:00">may 15</time>
          by staff.
        </p>
      </footer>
    </article>
    

    上篇:<address>

    下篇:<header>