HTML <article> 标签-代码号

HTML <article> 标签使用指南

概述

<article> 是 HTML5 中引入的语义化标签，用于定义独立、自包含的内容区块。该元素表示的内容应该能够独立于文档的其余部分被理解、分发和重用。

基本语法

<article> 标签是双标签，内容写在开始标签和结束标签之间：

<article>
  <!-- 内容区域 -->
</article>

核心特性

<article> 元素具有以下重要特性：

独立性：内容本身应有意义，不依赖上下文
可重用性：内容可被单独分发或复用
嵌套支持：可在 <article> 内嵌套其他 <article> 元素
结构化：通常包含标题、正文和元数据

使用场景

<article> 元素适用于以下内容类型：

博客文章和新闻稿件
论坛帖子和用户评论
产品介绍和卡片
独立的小部件或组件
任何可独立分发的内容单元

基础示例

基本文章结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>代码号编程学习 - 文章标签示例</title>
</head>
<body>
  <article>
    <header>
      <h2>JavaScript异步编程详解</h2>
      <p>作者: <a href="mailto:alan@ebingou.cn">Alan</a> · 发布日期: <time datetime="2025-11-15">2025年11月15日</time></p>
    </header>
    
    <p>JavaScript异步编程是现代Web开发中的重要概念，它允许程序在执行长时间任务时不阻塞用户界面...</p>
    
    <section>
      <h3>Promise对象</h3>
      <p>Promise是ES6中引入的异步编程解决方案，它代表一个尚未完成但预期会完成的操作...</p>
    </section>
    
    <footer>
      <p>分类: <a href="https://www.ebingou.cn/biancheng/">前端编程</a></p>
      <p>标签: JavaScript, 异步编程, Promise</p>
    </footer>
  </article>
</body>
</html>

嵌套文章示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>代码号编程学习 - 嵌套文章示例</title>
</head>
<body>
  <article class="blog-post">
    <h1>HTML5语义化标签解析</h1>
    <p>HTML5引入了一系列语义化标签，使开发者能够创建更加结构化和易于理解的文档...</p>
    
    <article class="comment">
      <h2>用户评论</h2>
      <p><strong>张三</strong> - <time datetime="2025-11-14">2025年11月14日</time></p>
      <p>这篇文章对我学习HTML5很有帮助，特别是对article和section区别的解释。</p>
    </article>
    
    <article class="comment">
      <h2>用户评论</h2>
      <p><strong>李四</strong> - <time datetime="2025-11-13">2025年11月13日</time></p>
      <p>希望能看到更多关于语义化标签实际应用的示例代码。</p>
    </article>
  </article>
</body>
</html>

结合其他语义化标签

<article> 通常与其他HTML5语义化标签结合使用，形成完整的文档结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>代码号编程学习 - 完整文章结构</title>
</head>
<body>
  <main>
    <article>
      <header>
        <h1>CSS Grid布局教程</h1>
        <nav>
          <ul>
            <li><a href="#intro">简介</a></li>
            <li><a href="#basic">基础用法</a></li>
            <li><a href="#advanced">高级技巧</a></li>
          </ul>
        </nav>
      </header>
      
      <section id="intro">
        <h2>CSS Grid简介</h2>
        <p>CSS Grid布局是二维的布局系统，为更复杂的网页布局而设计...</p>
      </section>
      
      <section id="basic">
        <h2>基础用法</h2>
        <p>要使用Grid布局，需要将容器元素的display属性设置为grid或inline-grid...</p>
        <pre><code>
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
}
        </code></pre>
      </section>
      
      <section id="advanced">
        <h2>高级技巧</h2>
        <p>Grid布局提供了多种高级功能，如网格区域命名、自动布局算法等...</p>
      </section>
      
      <aside>
        <h3>相关资源</h3>
        <p>更多CSS教程请访问<a href="https://www.ebingou.cn/jiaocheng/">代码号教程页面</a>。</p>
      </aside>
      
      <footer>
        <p>版权所有 &copy; 2025 代码号编程学习</p>
        <address>联系我们: <a href="mailto:alan@ebingou.cn">alan@ebingou.cn</a></address>
      </footer>
    </article>
  </main>
</body>
</html>

样式设计指南

基本样式设置

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>代码号编程学习 - 文章样式示例</title>
  <style>
    article {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      line-height: 1.6;
      max-width: 800px;
      margin: 20px auto;
      padding: 20px;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    
    article header {
      border-bottom: 1px solid #eaeaea;
      padding-bottom: 15px;
      margin-bottom: 20px;
    }
    
    article h1 {
      color: #2c3e50;
      font-size: 2.2em;
      margin-bottom: 10px;
    }
    
    article h2 {
      color: #34495e;
      font-size: 1.8em;
      margin-top: 30px;
    }
    
    article h3 {
      color: #7f8c8d;
      font-size: 1.4em;
    }
    
    article p {
      margin-bottom: 15px;
      color: #333;
    }
    
    article footer {
      margin-top: 30px;
      padding-top: 15px;
      border-top: 1px solid #eaeaea;
      font-size: 0.9em;
      color: #7f8c8d;
    }
    
    article time {
      font-style: italic;
      color: #95a5a6;
    }
    
    /* 代码块样式 */
    pre {
      background-color: #f8f9fa;
      padding: 15px;
      border-radius: 5px;
      overflow-x: auto;
    }
    
    code {
      font-family: 'Consolas', 'Monaco', monospace;
      font-size: 0.9em;
    }
  </style>
</head>
<body>
  <article>
    <header>
      <h1>响应式设计原则</h1>
      <p>作者: 代码号教程团队 · 发布日期: <time datetime="2025-11-10">2025年11月10日</time></p>
    </header>
    
    <p>响应式网页设计使网站能够适应不同设备和屏幕尺寸，提供一致的用户体验...</p>
    
    <h2>媒体查询基础</h2>
    <p>媒体查询是响应式设计的核心技术，允许根据设备特性应用不同的CSS规则...</p>
    
    <pre><code>
/* 小屏幕设备 */
@media (max-width: 600px) {
  .container {
    padding: 10px;
  }
}

/* 中等屏幕设备 */
@media (min-width: 601px) and (max-width: 1024px) {
  .container {
    padding: 20px;
  }
}

/* 大屏幕设备 */
@media (min-width: 1025px) {
  .container {
    padding: 30px;
  }
}
    </code></pre>
    
    <footer>
      <p>阅读更多前端开发教程，请访问<a href="https://www.ebingou.cn/biancheng/">代码号编程学习中心</a>。</p>
    </footer>
  </article>
</body>
</html>

博客页面实战示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>代码号编程学习博客</title>
  <style>
    body {
      font-family: 'Helvetica Neue', Arial, sans-serif;
      line-height: 1.6;
      color: #333;
      background-color: #f9f9f9;
      margin: 0;
      padding: 0;
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 30px;
    }
    
    .main-content {
      background: white;
      padding: 30px;
      border-radius: 8px;
      box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
    }
    
    .article-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 20px;
      margin-top: 30px;
    }
    
    .article-card {
      background: white;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease;
    }
    
    .article-card:hover {
      transform: translateY(-5px);
    }
    
    .article-card img {
      width: 100%;
      height: 160px;
      object-fit: cover;
    }
    
    .article-content {
      padding: 20px;
    }
    
    .article-content h3 {
      margin-top: 0;
      color: #2c3e50;
    }
    
    .article-meta {
      font-size: 0.85em;
      color: #7f8c8d;
      margin-bottom: 10px;
    }
    
    .read-more {
      display: inline-block;
      margin-top: 15px;
      color: #3498db;
      text-decoration: none;
      font-weight: 500;
    }
    
    .sidebar {
      background: white;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
    }
    
    .sidebar h2 {
      margin-top: 0;
      color: #2c3e50;
      border-bottom: 2px solid #3498db;
      padding-bottom: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="main-content">
      <h1>编程教程</h1>
      
      <article class="featured-article">
        <header>
          <h2>Vue.js 3.0 组合式API指南</h2>
          <p class="article-meta">
            作者: 代码号教程团队 · 
            <time datetime="2025-11-15">2025年11月15日</time> · 
            分类: <a href="https://www.ebingou.cn/biancheng/">前端框架</a>
          </p>
        </header>
        
        <img src="https://www.ebingou.cn/biancheng/images/1.jpg" alt="Vue.js 3.0教程">
        
        <p>Vue.js 3.0引入了组合式API，这是一种全新的编写组件逻辑的方式。与Options API相比，组合式API提供了更好的逻辑组织和代码复用能力...</p>
        
        <a href="https://www.ebingou.cn/jiaocheng/vue3-composition-api.html" class="read-more">阅读完整教程</a>
      </article>
      
      <h2>更多文章</h2>
      <div class="article-grid">
        <article class="article-card">
          <img src="https://www.ebingou.cn/biancheng/images/2.jpg" alt="Python数据分析">
          <div class="article-content">
            <h3>Python数据分析入门</h3>
            <p class="article-meta">
              <time datetime="2025-11-12">2025年11月12日</time>
            </p>
            <p>学习使用Pandas和NumPy进行数据处理和分析的基本技巧...</p>
            <a href="https://www.ebingou.cn/jiaocheng/python-data-analysis.html" class="read-more">继续阅读</a>
          </div>
        </article>
        
        <article class="article-card">
          <img src="https://www.ebingou.cn/biancheng/images/3.jpg" alt="React Hooks教程">
          <div class="article-content">
            <h3>React Hooks深度解析</h3>
            <p class="article-meta">
              <time datetime="2025-11-10">2025年11月10日</time>
            </p>
            <p>掌握React Hooks的使用方法和实践，提升函数式组件的开发效率...</p>
            <a href="https://www.ebingou.cn/jiaocheng/react-hooks.html" class="read-more">继续阅读</a>
          </div>
        </article>
        
        <article class="article-card">
          <img src="https://www.ebingou.cn/biancheng/images/4.jpg" alt="Node.js后端开发">
          <div class="article-content">
            <h3>Node.js后端开发实战</h3>
            <p class="article-meta">
              <time datetime="2025-11-08">2025年11月8日</time>
            </p>
            <p>从零开始构建一个完整的Node.js后端应用，包含Express框架和MongoDB数据库...</p>
            <a href="https://www.ebingou.cn/jiaocheng/nodejs-backend.html" class="read-more">继续阅读</a>
          </div>
        </article>
      </div>
    </div>
    
    <aside class="sidebar">
      <h2>关于代码号</h2>
      <p>代码号致力于提供高质量的编程教程和学习资源，帮助开发者提升技能。</p>
      <p>联系我们: <a href="mailto:alan@ebingou.cn">alan@ebingou.cn</a></p>
      
      <h2>热门标签</h2>
      <p>
        <a href="https://www.ebingou.cn/biancheng/">JavaScript</a> ·
        <a href="https://www.ebingou.cn/biancheng/">Python</a> ·
        <a href="https://www.ebingou.cn/biancheng/">React</a> ·
        <a href="https://www.ebingou.cn/biancheng/">Vue</a> ·
        <a href="https://www.ebingou.cn/biancheng/">Node.js</a>
      </p>
      
      <h2>资源推荐</h2>
      <ul>
        <li><a href="https://www.ebingou.cn/yuanma/">开源项目源码</a></li>
        <li><a href="https://www.ebingou.cn/jiaocheng/">免费教程</a></li>
        <li><a href="https://www.ebingou.cn/biancheng/">编程学习路径</a></li>
      </ul>
    </aside>
  </div>
</body>
</html>

本节课程知识要点

<article> 是HTML5语义化标签，用于定义独立自包含的内容
文章内容应具有独立性和可重用性，不依赖上下文即可理解
可嵌套使用，内层文章应与外层文章内容相关
通常与 <header>, <footer>, <time> 等元素配合使用
适用于博客文章、新闻、评论、产品卡片等多种场景
通过CSS可以灵活设计文章样式，增强可读性和视觉效果
使用 <article> 有助于SEO优化和可访问性提升

浏览器兼容性

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

Chrome 6+
Firefox 4+
Safari 5+
Opera 11.1+
Edge 所有版本

对于旧版浏览器，可以通过添加以下JavaScript代码提供基本支持：

<!--[if lt IE 9]>
  <script>
    document.createElement('article');
    document.createElement('header');
    document.createElement('footer');
    document.createElement('time');
  </script>
<![endif]-->

总结

<article> 标签是HTML5语义化Web的重要组成部分，它帮助开发者创建结构更清晰、更易于理解和维护的网页内容。通过合理使用 <article> 元素，不仅可以提升代码的可读性和可维护性，还能改善网站的SEO表现和可访问性。

在实际开发中，应根据内容的特点决定是否使用 <article> 标签。对于独立、可分发的内容单元，使用 <article> 是选择；而对于与上下文紧密相关的内容，则可以考虑使用 <section> 或其他适当的语义化标签。

本文标签：

HTML <article> 标签