<article>:文章内容元素
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
<article> HTML 元素表示文档、页面、应用或网站中具有独立分发或复用意义的自包含内容块,例如论坛帖子、杂志或报纸文章、博客条目、产品卡片、用户评论、交互式组件等独立内容项。
尝试一下
<article class="forecast"> <h1>西雅图天气预报</h1> <article class="day-forecast"> <h2>2018 年 3 月 3 日</h2> <p>雨。</p> </article> <article class="day-forecast"> <h2>2018 年 3 月 04 日</h2> <p>降雨时段。</p> </article> <article class="day-forecast"> <h2>2018 年 3 月 05 日</h2> <p>大雨。</p> </article> </article> .forecast { margin: 0; padding: 0.3rem; background-color: #eee; } .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> 表示,且其中可能包含一个或多个 <section>。
属性
这个元素只包含全局属性。
使用说明
示例
html
<article class="film_review"> <h2>侏罗纪公园</h2> <section class="main_review"> <h3>评论</h3> <p>恐龙是伟大的!</p> </section> <section class="user_reviews"> <h3>用户评论</h3> <article class="user_review"> <h4>太吓人了!</h4> <p>对我来说太可怕了。</p> <footer> <p> 发表于 <time datetime="2015-05-16 19:00">5 月 16 日</time> 作者:Lisa。 </p> </footer> </article> <article class="user_review"> <h4>我喜欢恐龙!</h4> <p>我同意,恐龙是我的最爱。</p> <footer> <p> 发表于 <time datetime="2015-05-17 19:00">5 月 17 日</time> 作者:Tom。 </p> </footer> </article> </section> <footer> <p> 发表于 <time datetime="2015-05-15 19:00">5 月 15 日</time> 作者:Staff。 </p> </footer> </article> 结果
技术概要
规范
| Specification |
|---|
| HTML> # the-article-element> |