HTML <article> 标签
示例
三个具有独立、自包含内容的文章
<article>
<h2>Google Chrome</h2>
<p>Google Chrome 是由 Google 开发的网络浏览器，于 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 是由 Microsoft 开发的网络浏览器，于 2015 年发布。Microsoft Edge 取代了 Internet Explorer。</p>
</article>
动手尝试 »
以下有更多“动手尝试”示例。
定义和用法
The <article> 标签指定独立、自包含的内容。
文章应该独立有意义，并且应该能够独立于网站的其余部分进行分发。
The <article> 元素的潜在来源
- 论坛帖子
- 博客文章
- 新闻报道
注意： The <article> 元素在浏览器中不会以任何特殊的方式呈现。但是，您可以使用 CSS 来设置 The <article> 元素的样式（见下文示例）。
浏览器支持
表格中的数字指定完全支持该元素的第一个浏览器版本。
| 元素 | |||||
|---|---|---|---|---|---|
| <article> | 6.0 | 9.0 | 4.0 | 5.0 | 11.1 |
全局属性
The <article> 标签还支持 HTML 中的全局属性。
事件属性
The <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>最受欢迎的浏览器</h1>
<article class="browser">
<h2>Google Chrome</h2>
<p>Google Chrome 是由 Google 开发的网络浏览器，于 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 是由 Microsoft 开发的网络浏览器，于 2015 年发布。Microsoft Edge 取代了 Internet Explorer。</p>
</article>
</article>
</body>
</html>
动手尝试 »
相关页面
HTML DOM 参考： Article 对象
默认 CSS 设置
大多数浏览器将使用以下默认值显示 The <article> 元素
article {
display: block;
}
