files/zh-cn/web/html/element/article/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139

---
title: <article>
slug: Web/HTML/Element/article
tags:
  - HTML
  - 元素
translation_of: Web/HTML/Element/article
---
<div>{{HTMLRef}}</div>

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

<div>{{EmbedInteractiveExample("pages/tabbed/article.html", "tabbed-standard")}}</div>

<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>

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

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">内容分类</a></dfn></th>
   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, sectioning content, palpable content.</td>
  </tr>
  <tr>
   <th scope="row">允许的内容</th>
   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>.</td>
  </tr>
  <tr>
   <th scope="row"><dfn>标记省略</dfn></th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">允许的父元素</th>
   <td>所有接受 <a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>的元素。注意<code>&lt;article&gt;</code>元素不能成为{{HTMLElement("address")}}元素的子元素。</td>
  </tr>
  <tr>
   <th scope="row">允许的 ARIA roles</th>
   <td>{{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("feed")}}, {{ARIARole("main")}}, {{ARIARole("presentation")}}, {{ARIARole("region")}}</td>
  </tr>
  <tr>
   <th scope="row">DOM 实例</th>
   <td>{{domxref("HTMLElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="属性">属性</h2>

<p>此元素只具有<a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes">全局属性</a>。</p>

<h2 id="使用说明">使用说明</h2>

<ul>
 <li>每个<code>&lt;article&gt;</code>，通常包括标题（&lt;h1&gt; - &lt;h6&gt;元素）作为<code>&lt;article&gt;</code>元素的子元素。</li>
 <li>当<code>&lt;article&gt;</code>元素嵌套使用时，则该元素代表与外层元素有关的文章。例如，代表博客评论的<code>&lt;article&gt;</code>元素可嵌套在代表博客文章的<code>&lt;article&gt;</code>元素中。</li>
 <li><code>&lt;article&gt;</code>元素的作者信息可通过{{HTMLElement("address")}}元素提供，但是不适用于嵌套的<code>&lt;article&gt;</code>元素。</li>
 <li>
  <p><code>&lt;article&gt;</code>元素的发布日期和时间可通过{{HTMLElement("time")}}元素的{{htmlattrxref("pubdate", "time")}}属性表示。</p>
 </li>
 <li>
  <p>可以使用{{HTMLElement("time")}} 元素的{{htmlattrxref("datetime", "time")}}属性来描述<code>&lt;article&gt;</code>元素的发布日期和时间。请注意{{HTMLElement("time")}}的<em>{{htmlattrxref("pubdate", "time")}} </em>属性不再是<em>{{glossary("W3C")}} </em> <em>{{glossary("HTML5")}}</em>标准。</p>
 </li>
</ul>

<h2 id="示例">示例</h2>

<pre><code>&lt;article class="film_review"&gt;
  &lt;header&gt;
    &lt;h2&gt;Jurassic Park&lt;/h2&gt;
  &lt;/header&gt;
  &lt;section class="main_review"&gt;
    &lt;p&gt;Dinos were great!&lt;/p&gt;
  &lt;/section&gt;
  &lt;section class="user_reviews"&gt;
    &lt;article class="user_review"&gt;
      &lt;p&gt;Way too scary for me.&lt;/p&gt;
      &lt;footer&gt;
        &lt;p&gt;
          Posted on
          &lt;time datetime="2015-05-16 19:00"&gt;May 16&lt;/time&gt;
          by Lisa.
        &lt;/p&gt;
      &lt;/footer&gt;
    &lt;/article&gt;
    &lt;article class="user_review"&gt;
      &lt;p&gt;I agree, dinos are my favorite.&lt;/p&gt;
      &lt;footer&gt;
        &lt;p&gt;
          Posted on
          &lt;time datetime="2015-05-17 19:00"&gt;May 17&lt;/time&gt;
          by Tom.
        &lt;/p&gt;
      &lt;/footer&gt;
    &lt;/article&gt;
  &lt;/section&gt;
  &lt;footer&gt;
    &lt;p&gt;
      Posted on
      &lt;time datetime="2015-05-15 19:00"&gt;May 15&lt;/time&gt;
      by Staff.
    &lt;/p&gt;
  &lt;/footer&gt;
&lt;/article&gt;</code></pre>

<h2 id="Specifications" name="Specifications">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">规范</th>
   <th scope="col">状态</th>
   <th scope="col">注释</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'sections.html#the-article-element', '&lt;article&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'sections.html#the-article-element', '&lt;article&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容">浏览器兼容</h2>

<p>{{Compat("html.elements.article")}}</p>

<h2 id="相关文章">相关文章</h2>

<ul>
 <li>Others section-related elements: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}}</li>
 <li class="last"><a class="deki-ns current" href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Sections and outlines of an HTML5 document</a>.</li>
</ul>