HTML - <article> 标签

HTML <article> 标签用于在 HTML 文档中表示独立的、自包含的组合内容。此标签包含在 HTML5 中。

单个 HTML 文档可以包含多个 article 元素。当 HTML <article> 元素嵌套时，内部元素表示与外部元素相关的文章。例如，社交媒体帖子上的评论可以是 article 元素，嵌套在表示社交媒体帖子的 article 元素中。它主要用于论坛帖子、杂志或报纸文章、博客文章、产品卡片等。

语法

<article>
   .....
</article>

属性

HTML article 标签支持 HTML 的全局和事件属性。

HTML article 标签示例

以下示例将说明 article 标签的使用方法、使用时机和如何使用 article 标签创建 article 元素。

使用 article 标签创建自包含内容

在以下示例中，我们使用 <article> 标签创建了两个自包含的内容，它们彼此独立，也独立于父元素。

<!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="Tutorialspoint logo">
      <article>
      <h2>Comments</h2>
      <p>Dman good...</p>
      <p>fabulous...!</p>
      </article>
   </article>
</body>
</html>

支持的浏览器

标签
aside	是 6.0	是 9.0	是 4.0	是 5.0	是 11.1

html_tags_reference.htm

打印页面