HTML <article>标签用于表示HTML文档中独立的、自包含的组合内容。此标签包含在 HTML5 中。
单个 HTML 文档可以有多个文章元素。
当嵌套 HTML <article> 元素时，内部元素表示与外部元素相关的文章。
例如，对社交媒体帖子的评论可以是嵌套在表示社交媒体帖子的文章中的<article>标签元素。它主要用于论坛帖子、杂志或报纸文章、博客条目、产品卡等。
语法
<article> ..... </article>
属性
<article>标签支持 HTML 的 全局属性 和 事件属性。
<article>标签示例
下面的例子将说明<article>标签的用法。在何处、何时以及如何使用<article>标签创建文章元素。
使用<article>标签创建自包含内容
在以下示例中，我们使用 <article> 标签创建了 2 个自包含内容，它们彼此独立，也独立于父级。
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML article tag</title>
</head>
<body>
<!-- Creating article Element -->
<h2>HTML 'article' Element</h2>
<article>
<h3>HTML Tags</h3>
<p>
HTML tags are similar to keywords, which specify
how a web browser will format and display content.
A web browser can differentiate between simple content
and HTML content with the use of tags.
</p>
</article>
<article>
<h3>HTML Attributes</h3>
<p>
An attribute is used to define the characteristics
of an HTML element and is placed inside the element's
opening tag. All attributes are made up of two parts:
a name and a value
</p>
</article>
</body>
</html>
<article>标签的样式
考虑以下示例，我们将在其中使用 <article>标签并应用 CSS 属性。
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML article tag</title>
<style>
article {
width: 300px;
height: 150px;
background-color: aquamarine;
border-radius: 10px;
}
article h3,
p {
margin: 10px 10px;
}
</style>
</head>
<body>
<!--create a article element-->
<h2>HTML 'article' Element</h2>
<article>
<h3>HTML Tags</h3>
<p>
HTML tags are similar to keywords, which specify
how a web browser will format and display content.
A web browser can differentiate between simple content
and HTML content with the use of tags.
</p>
</article>
<article>
<h3>HTML Attributes</h3>
<p>
An attribute is used to define the characteristics
of an HTML element and is placed inside the element's
opening tag. All attributes are made up of two parts:
a name and a value
</p>
</article>
</body>
</html>
<article>标签的嵌套
让我们看一下另一个场景，我们将在其中创建一个嵌套的<article>标签元素。
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML article Tag</title>
<style>
article {
margin: 5px;
border-radius: 10px;
padding: 10px;
border: 2px solid black;
}
p {
margin: 10px;
}
</style>
</head>
<body>
<!--create a article element-->
<h2>HTML 'article' Element</h2>
<article>
<h3>HTML Elements</h3>
<p>
HTML Elements are building block of a web page.
It is used to create component for webpages.
</p>
<article>
<h3>HTML Tags</h3>
<p>
HTML tags are similar to keywords, which specify
how a web browser will format and display content.
A web browser can differentiate between simple content
and HTML content with the use of tags.
</p>
</article>
<article>
<h3>HTML Attributes</h3>
<p>
An attribute is used to define the characteristics
of an HTML element and is placed inside the element's
opening tag. All attributes are made up of two parts:
a name and a value
</p>
</article>
</article>
</body>
</html>
在<article>标签上实现图像
在以下示例中，我们将创建嵌套的“article”元素，以使用 <article> 标签来表示博客文章及其评论的独立内容。
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML article tag</title>
<style>
article img {
width: 200px;
}
</style>
</head>
<body>
<!--create a article element-->
<article>
<h2>Blog post</h2>
<img src="/images/logo.png?v3" alt="qikepu.com logo">
<article>
<h2>Comments</h2>
<p>Dman good...</p>
<p>fabulous...!</p>
</article>
</article>
</body>
</html>
支持的浏览器
| 浏览器 |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| 是否支持 | 6.0 | 9.0 | 4.0 | 5.0 | 11.1 |
