菜单
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

HTML <article> 标签


示例

三个具有独立、自包含内容的 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>
自己动手试一试 »

更多“自己尝试”的例子见下文。


定义和用法

<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 是由 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 设置

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

article {
  display: block;
}


×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持