HTML <article> 标签

实例

三篇内容独立的文章:

<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>

亲自试一试 »

下面有更多实例。

定义和用法

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

一篇文章应有其自身的意义，应该有可能独立于站点的其余部分对其进行分发。

<article> 元素的潜在来源:

论坛帖子
报纸文章
博客条目
用户评论

注释: <article> 元素在浏览器中不会呈现为任何特殊元素。但是，可以使用 CSS 设置 <article> 元素的样式（参见下面的示例）。

浏览器支持

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

元素
<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>最受欢迎的浏览器</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>

亲自试一试 »