Web学习网站

Appearance

<article> 标签 ​

<article> 标签用于定义独立的内容，如博客文章、新闻报道、用户评论等。它表示文档、页面或应用程序中独立的、完整的、可以独立于其他内容进行分发或重用的内容。

概述 ​

<article> 标签是 HTML5 中引入的语义化标签，用于定义独立的内容单元。这些内容可以独立于文档的其他部分进行分发、重用或引用。

语法 ​

html
<article>
  <!-- 独立内容 -->
</article>

基本用法 ​

博客文章 ​

html
<article>
  <header>
    <h1>如何学习网页开发</h1>
    <p>发布于 <time datetime="2023-01-01">2023年1月1日</time> 作者：张三</p>
  </header>
  
  <p>学习网页开发是一个循序渐进的过程...</p>
  
  <p>首先，你需要掌握 HTML 基础...</p>
  
  <footer>
    <p>标签：<a href="/tags/html">HTML</a> <a href="/tags/css">CSS</a></p>
  </footer>
</article>

新闻报道 ​

html
<article>
  <header>
    <h1>新技术发布</h1>
    <p>发布于 <time datetime="2023-01-15">2023年1月15日</time></p>
  </header>
  
  <p>公司今天发布了一项革命性的新技术...</p>
  
  <p>这项技术将改变整个行业...</p>
</article>

实际示例 ​

博客页面 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>博客页面</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
    }
    
    article {
      background-color: white;
      padding: 2rem;
      margin-bottom: 2rem;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    
    article header {
      border-bottom: 1px solid #eee;
      padding-bottom: 1rem;
      margin-bottom: 1.5rem;
    }
    
    article footer {
      border-top: 1px solid #eee;
      padding-top: 1rem;
      margin-top: 1.5rem;
      color: #666;
    }
    
    h1, h2 {
      color: #333;
      margin-top: 0;
    }
    
    time {
      color: #999;
    }
  </style>
</head>
<body>
  <header>
    <h1>我的博客</h1>
  </header>
  
  <main>
    <article>
      <header>
        <h1>如何学习 HTML</h1>
        <p>
          <time datetime="2023-01-01">2023年1月1日</time> | 
          作者：<address>张三</address>
        </p>
      </header>
      
      <p>HTML 是网页开发的基础，学习网页开发的第一步就是掌握 HTML。</p>
      
      <p>在这篇文章中，我们将介绍 HTML 的基本概念和语法...</p>
      
      <h2>什么是 HTML</h2>
      <p>HTML 是超文本标记语言（HyperText Markup Language）的缩写...</p>
      
      <h2>HTML 文档结构</h2>
      <p>一个基本的 HTML 文档包含以下结构：</p>
      <pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;页面标题&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;主标题&lt;/h1&gt;
    &lt;p&gt;段落内容&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
      
      <footer>
        <p>标签：<a href="/tags/html">HTML</a> <a href="/tags/tutorial">教程</a></p>
      </footer>
    </article>
    
    <article>
      <header>
        <h1>CSS 布局技巧</h1>
        <p>
          <time datetime="2023-01-05">2023年1月5日</time> | 
          作者：<address>李四</address>
        </p>
      </header>
      
      <p>CSS 提供了多种布局方式，包括 Flexbox、Grid 等...</p>
      
      <p>在本文中，我们将探讨现代 CSS 布局技术...</p>
      
      <footer>
        <p>标签：<a href="/tags/css">CSS</a> <a href="/tags/layout">布局</a></p>
      </footer>
    </article>
  </main>
  
  <footer>
    <p>&copy; 2023 我的博客</p>
  </footer>
</body>
</html>

用户评论系统 ​

html
<section>
  <h2>用户评论</h2>
  
  <article>
    <header>
      <h3>用户1</h3>
      <p><time datetime="2023-01-10T10:00">2023年1月10日 10:00</time></p>
    </header>
    
    <p>这篇文章很有帮助，学到了很多新知识！</p>
  </article>
  
  <article>
    <header>
      <h3>用户2</h3>
      <p><time datetime="2023-01-10T14:30">2023年1月10日 14:30</time></p>
    </header>
    
    <p>感谢分享，期待更多相关内容。</p>
  </article>
  
  <article>
    <header>
      <h3>用户3</h3>
      <p><time datetime="2023-01-11T09:15">2023年1月11日 09:15</time></p>
    </header>
    
    <p>有几个地方不太明白，希望能有更详细的解释。</p>
  </article>
</section>

与相关标签的区别 ​

与 <section> 的区别 ​

html
<!-- section 表示文档中的章节 -->
<section>
  <h2>HTML 教程</h2>
  <p>HTML 是网页开发的基础...</p>
</section>

<!-- article 表示独立的内容 -->
<article>
  <h2>如何学习 HTML</h2>
  <p>完整的学习指南...</p>
</article>

与 <div> 的区别 ​

html
<!-- 不推荐：使用 div 表示文章内容 -->
<div class="post">
  <h2>文章标题</h2>
  <p>文章内容...</p>
</div>

<!-- 推荐：使用语义化的 article 标签 -->
<article>
  <h2>文章标题</h2>
  <p>文章内容...</p>
</article>

嵌套使用 ​

html
<article>
  <h1>主文章标题</h1>
  <p>主文章内容...</p>
  
  <section>
    <h2>评论区</h2>
    
    <article>
      <header>
        <h3>用户1</h3>
        <p><time datetime="2023-01-01">2023年1月1日</time></p>
      </header>
      <p>第一条评论...</p>
    </article>
    
    <article>
      <header>
        <h3>用户2</h3>
        <p><time datetime="2023-01-02">2023年1月2日</time></p>
      </header>
      <p>第二条评论...</p>
    </article>
  </section>
</article>

无障碍访问 ​

使用适当的标题层级 ​

html
<article>
  <header>
    <h1>文章标题</h1>
    <p>发布信息...</p>
  </header>
  
  <p>文章内容...</p>
  
  <section>
    <h2>章节标题</h2>
    <p>章节内容...</p>
  </section>
  
  <footer>
    <p>标签和相关信息...</p>
  </footer>
</article>

最佳实践 ​

  1. 独立性：内容应该是独立的，可以单独分发或重用
  2. 完整性：内容应该是完整的，包含标题、正文等必要元素
  3. 语义化：使用语义化的子元素如 <header>、<footer> 等
  4. 标题层级：在 <article> 中正确使用标题层级
  5. 嵌套合理：可以嵌套使用，但要保持清晰的结构

浏览器兼容性 ​

<article> 标签在所有现代浏览器中都得到支持：

  • Chrome
  • Firefox
  • Safari
  • Edge
  • Internet Explorer 9+

对于不支持的旧浏览器，可以通过 CSS 显示声明为块级元素：

css
article {
  display: block;
}

注意事项 ​

  1. <article> 标签是块级元素
  2. <article> 应该包含独立、完整的内容
  3. <article> 可以嵌套使用
  4. <article> 标签没有默认样式，需要通过 CSS 设置
  5. 不要将 <article> 作为设置样式的容器，应使用 <div>

相关标签 ​