码农教程 - 一技在手,衣食无忧! tools

HTML <article> 标签

❮上一节 完整的 HTML参考 下一节❯

示例

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

<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>

<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
</article>

<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>
亲自试一试 »

下面有更多 "亲自试一试" 示例。

定义和用法

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

一篇文章本身应该有意义，并且应该可以独立于网站的其他部分进行分发。

潜在来源<article>元素：

  • 论坛帖子
  • 博客文章
  • 新闻故事

笔记：这个<article>元素在浏览器中不会呈现为任何特殊内容。但是，您可以使用 CSS 来设置样式<article> 元素（参见下面的示例）。

浏览器支持

表中的数字指定完全支持该元素的第一个浏览器版本。

Element
<article> 6.0 9.0 4.0 5.0 11.1

全局属性

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

事件属性

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

更多示例

示例

使用 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 is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
  </article>
  <article class="browser">
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
  </article>
  <article class="browser">
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
  </article>
</article>

</body>
</html>
亲自试一试 »

相关页面

HTML DOM 参考：文章对象

默认 CSS 设置

大多数浏览器都会显示<article>具有以下默认值的元素：

article {
  display: block;
}


❮上一节 完整的 HTML参考 下一节❯