HTML <article> 标签

定义和用法

<article> 标签规定独立的、自包含的内容。

一篇文章应该能够独立理解，且可以独立于整个站点进行分发。

<articel> 元素的潜在来源包括：

  • 论坛帖子
  • 博客文章
  • 新闻报道
  • 用户评论

注意：在浏览器中，<article> 元素本身不会呈现任何特殊的样式。但是，你可以使用 CSS 样式化 <article> 元素（请参见下面的例子）。

另请参阅：

HTML DOM 参考手册：Article 对象

实例

例子 1

三篇内容独立、自成一体的文章：

<article>
<h2>Google Chrome</h2>
<p>Google Chrome 是谷歌开发的网络浏览器，于 2008 年发布。Chrome 是当今世界上最受欢迎的网络浏览器！</p>
</article>

<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox 是由 Mozilla 开发的开源网络浏览器。自 2018 年 1 月以来，Firefox 一直是第二大最受欢迎的网络浏览器。</p>
</article>

<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge 是微软开发的一款网络浏览器，于 2015 年发布。Microsoft Edge 取代了 Internet Explorer。</p>
</article>

亲自试一试

例子 2

使用 CSS 设置 <article> 元素的样式：

<html>
<head>
<style>
.all-browsers {
  margin: 0;
  padding: 5px;
  background-color: lightgray;
}

.all-browsers > h1, .browser {
  margin: 10px;
  padding: 5px;
}

.browser {
  background: white;
}

.browser > h2, p {
  margin: 4px;
  font-size: 90%;
}
</style>
</head>
<body>

<article class="all-browsers">
  <h1>Most Popular Browsers</h1>
  <article class="browser">
    <h2>Google Chrome</h2>
    <p>Google Chrome 是谷歌开发的网络浏览器，于 2008 年发布。Chrome 是当今世界上最受欢迎的网络浏览器！</p>
  </article>
  <article class="browser">
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox 是由 Mozilla 开发的开源网络浏览器。自 2018 年 1 月以来，Firefox 一直是第二大最受欢迎的网络浏览器。</p>
  </article>
  <article class="browser">
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge 是微软开发的一款网络浏览器，于 2015 年发布。Microsoft Edge 取代了 Internet Explorer。</p>
  </article>
</article>

</body>
</html>

亲自试一试

全局属性

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

事件属性

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

默认的 CSS 设置

大多数浏览器将使用以下默认值显示 <article> 元素：

article {
  display: block;
}

浏览器支持

表中的数字注明了首个完全支持该元素的浏览器版本。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
6.0 9.0 4.0 5.0 11.1