第29篇：实战：博客文章页完整结构

博客是展示 HTML5 语义化标签的最佳场景。本篇将综合运用 header、nav、main、article、aside、footer 等标签，搭建一个完整的博客文章页面。

---

学习目标

• 能使用 HTML5 语义化标签搭建完整的博客页面结构
• 能正确使用 article、section、aside 等容器标签
• 能在文章中合理使用 figure/figcaption、blockquote、code 等标签
• 能搭建包含侧边栏的博客布局
• 能编写符合文档大纲的博客页面

---

核心知识点

一、博客页面的语义化结构

一个标准的博客文章页应该这样组织：

博客文章页结构
├── <header> — 网站头部
│   ├── 网站标题/Logo
│   └── <nav> — 主导航
├── <main> — 页面主要内容
│   └── <article> — 文章主体
│       ├── 文章标题（h1）
│       ├── 文章元信息（作者、时间、标签）
│       ├── <section> — 文章章节1
│       ├── <section> — 文章章节2
│       └── ...更多章节
├── <aside> — 侧边栏
│   ├── 作者简介
│   ├── 文章分类
│   ├── 热门文章
│   └── 标签云
└── <footer> — 页脚
    └── 版权信息、相关链接

---

二、文章头部信息

文章头部包含标题、作者、发布时间等元信息：

<article>
  <header>
    <h1>HTML5 语义化标签完全指南</h1>

    <!-- 文章元信息 -->
    <p class="meta">
      <address>
        作者：<a href="/author/zhangsan">张三</a>
      </address>
      |
      <time datetime="2024-06-01">2024年6月1日</time>
      |
      阅读时间：约 8 分钟
      |
      标签：
      <a href="/tag/html5">HTML5</a>、
      <a href="/tag/semantic">语义化</a>
    </p>
  </header>

  <!-- 文章正文 -->
  ...
</article>

---

三、文章正文组织

使用 <section> 将文章划分为不同章节，每个章节有自己的标题：

<article>
  ...

  <!-- 章节1 -->
  <section id="section1">
    <h2>一、为什么要用语义化标签</h2>
    <p>在 HTML5 出现之前...（正文内容）</p>

    <blockquote>
      <p>语义化 HTML 不仅是为了让开发者看得舒服，更是为了让机器能读懂你的内容。</p>
      <footer>— <cite>Tim Berners-Lee</cite>，万维网之父</footer>
    </blockquote>
  </section>

  <!-- 章节2 -->
  <section id="section2">
    <h2>二、常用语义化标签详解</h2>

    <h3>2.1 header 和 footer</h3>
    <p>...</p>

    <h3>2.2 article 和 section</h3>
    <p>...</p>

    <!-- 代码示例 -->
    <figure>
      <pre><code>
<article>
  <h2>文章标题</h2>
  <p>文章内容...</p>
</article>
      </code></pre>
      <figcaption>图1：article 标签的基本用法</figcaption>
    </figure>
  </section>

  <!-- 更多章节... -->
</article>

---

四、侧边栏内容

侧边栏使用 <aside>，包含与文章相关但不属于文章主体内容的信息：

<aside>
  <!-- 作者简介 -->
  <section class="author-card">
    <h3>关于作者</h3>
    <figure>
      <img src="author.jpg" alt="作者头像" width="80" height="80">
    </figure>
    <p>张三，前端开发工程师，热爱分享技术干货。</p>
    <a href="/author/zhangsan">查看全部文章 →</a>
  </section>

  <!-- 文章目录 -->
  <section class="toc">
    <h3>文章目录</h3>
    <ol>
      <li><a href="#section1">为什么要用语义化标签</a></li>
      <li><a href="#section2">常用语义化标签详解</a></li>
      <li><a href="#section3">语义化与 SEO</a></li>
    </ol>
  </section>

  <!-- 文章分类 -->
  <section>
    <h3>文章分类</h3>
    <ul>
      <li><a href="/category/html">HTML (15)</a></li>
      <li><a href="/category/css">CSS (12)</a></li>
      <li><a href="/category/javascript">JavaScript (20)</a></li>
    </ul>
  </section>

  <!-- 热门文章 -->
  <section>
    <h3>热门文章</h3>
    <ol>
      <li><a href="#">CSS Grid 布局完全指南</a></li>
      <li><a href="#">JavaScript 异步编程详解</a></li>
      <li><a href="#">React Hooks 最佳实践</a></li>
    </ol>
  </section>

  <!-- 标签云 -->
  <section>
    <h3>标签云</h3>
    <p>
      <a href="#">HTML5</a>
      <a href="#">CSS3</a>
      <a href="#">JavaScript</a>
      <a href="#">响应式</a>
    </p>
  </section>
</aside>

---

五、完整的文档大纲

构建博客页面时，始终关注文档大纲（Heading Outline）：

页面大纲（理想状态）
├── h1: HTML5 语义化标签完全指南（文章标题）
│   ├── h2: 一、为什么要用语义化标签
│   ├── h2: 二、常用语义化标签详解
│   │   ├── h3: 2.1 header 和 footer
│   │   ├── h3: 2.2 article 和 section
│   │   └── h3: 2.3 nav 和 aside
│   ├── h2: 三、语义化与 SEO
│   └── h2: 四、动手实践

⚠️ 大纲检查清单：

• 页面只有一个 h1
• 标题层级不要跳（h1 → h2 → h3，不要 h1 直接到 h3）
  003e - aside 和 footer 中的标题应该从 h2 或 h3 开始

---

动手练习

练习 1：修改文章内容

将配套代码中的文章替换为你感兴趣的主题：

• 替换文章标题和内容
• 修改章节结构和标题
• 添加你自己的代码示例和截图

练习 2：添加评论区域

在文章底部添加评论区：

• 用 <section> 创建评论区
• 每条评论用 <article> 包裹
• 包含评论者名称、时间、评论内容
• 添加评论表单（姓名、邮箱、评论内容、提交按钮）

练习 3：优化可访问性

• 检查所有图片是否有 alt 属性
• 检查链接文本是否描述清楚（不要"点击这里"）
• 为代码块添加语言标注

---

常见误区 ⚠️

误区	真相
“aside 只能放侧边栏”	也可以放文章内的补充信息（如提示框、引文）
“article 只能放博客文章”	任何独立的内容块都可以用（论坛帖子、产品卡片）
“section 可以随便用”	section 应该有标题，不能当 div 用
“header 只能用在页面顶部”	可以用在 article、section 内，表示该区域的头部
“footer 只能放页脚”	可以用在 article、section 内
“time 只显示给人看”	datetime 属性让机器也能理解时间
“blockquote 只能包一句话”	可以包多段，甚至包含列表
“pre 和 code 是一回事”	pre 保持格式，code 表示代码，两者经常一起用

---

速查卡片 📋

博客页面标签速查

区域	标签	说明
网站头部	<header>	页面级 header
导航	<nav>	主导航链接
页面主体	<main>	页面主要内容（每页一个）
文章	<article>	独立的内容块
章节	<section>	有标题的内容分组
侧边栏	<aside>	次要/相关内容
页脚	<footer>	页面级 footer
时间	<time datetime="">	机器可读的时间
引用	<blockquote>	块级引用
代码	<code> + <pre>	代码片段
图片说明	<figure> + <figcaption>	图片及其说明
作者	<address>	联系信息

文档大纲检查

✅ 页面只有一个 h1
✅ 标题层级连续（不跳级）
✅ aside/footer 内标题从 h2/h3 开始
✅ 每个 section 都有标题

---

扩展阅读

• MDN: <article> 元素
• MDN: <section> 元素
• MDN: <aside> 元素
• MDN: <main> 元素
• HTML5 文档大纲算法（英文）
• 可访问性博客指南（英文）

---

📌 下一步：第30篇：实战：完整单页网站，综合运用所有标签知识，搭建一个完整的企业介绍单页网站。