<article>: article 内容元素
<article> HTML 元素表示文档、页面、应用程序或站点中的一个自包含的组合，旨在独立分发或重用（例如，用于信息聚合）。示例如下：论坛帖子、杂志或报纸文章、博客条目、产品卡片、用户提交的评论、交互式小部件或小工具，或任何其他独立的内容项。
试一试
<article class="forecast">
<h1>Weather forecast for Seattle</h1>
<article class="day-forecast">
<h2>03 March 2018</h2>
<p>Rain.</p>
</article>
<article class="day-forecast">
<h2>04 March 2018</h2>
<p>Periods of rain.</p>
</article>
<article class="day-forecast">
<h2>05 March 2018</h2>
<p>Heavy rain.</p>
</article>
</article>
.forecast {
margin: 0;
padding: 0.3rem;
background-color: #eeeeee;
}
.forecast > h1,
.day-forecast {
margin: 0.5rem;
padding: 0.3rem;
font-size: 1.2rem;
}
.day-forecast {
background: right/contain content-box border-box no-repeat
url("/shared-assets/images/examples/rain.svg") white;
}
.day-forecast > h2,
.day-forecast > p {
margin: 0.2rem;
font-size: 1rem;
}
一个文档可以包含多个 article；例如，在一个博客中，当读者滚动时，会逐个显示每篇文章的内容，每篇帖子都会包含在一个 <article> 元素中，其中可能包含一个或多个 <section>。
属性
此元素仅包含全局属性。
用法说明
- 每个
<article>都应被标识，通常通过将标题（<h1>-<h6>元素）作为<article>元素的子元素来包含。 - 当
<article>元素嵌套时，内部元素表示与外部元素相关的 article。例如，一篇博客帖子的评论可以作为<article>元素嵌套在代表该博客帖子的<article>中。 <article>元素的作者信息可以通过<address>元素提供，但它不适用于嵌套的<article>元素。<article>元素的发布日期和时间可以使用<time>元素的datetime属性进行描述。
示例
html
<article class="film_review">
<h2>Jurassic Park</h2>
<section class="main_review">
<h3>Review</h3>
<p>Dinos were great!</p>
</section>
<section class="user_reviews">
<h3>User reviews</h3>
<article class="user_review">
<h4>Too scary!</h4>
<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">
<h4>Love the dinos!</h4>
<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>
结果
技术摘要
规范
| 规范 |
|---|
| HTML # the-article-element |
浏览器兼容性
加载中…