🏛️ 第七章：HTML5 语义化布局

编写机器可读、搜索引擎友好的高质量代码

7.1 为什么需要语义化？

语义化的三大好处：
  1. SEO（搜索引擎优化） - 搜索引擎能更好地理解页面结构和内容重要性
  2. 无障碍访问（Accessibility） - 屏幕阅读器能为视障用户准确描述页面结构
  3. 代码可维护性 - 开发者能更容易理解和维护代码
<!-- 非语义化（仅使用 div）-->
<div class="header">
    <div class="nav">...</div>
</div>
<div class="main-content">
    <div class="article">...</div>
</div>
<div class="footer">...</div>

<!-- 语义化（使用 HTML5 标签）-->
<header>
    <nav>...</nav>
</header>
<main>
    <article>...</article>
</main>
<footer>...</footer>

7.2 常用语义标签详解

页面结构标签

<header>
页眉/头部
（通常包含 logo、导航）
<nav>
导航链接区域
<main>
主要内容区域

<article>
独立的文章内容
<section>
文档中的节或区块
<aside>
侧边栏
（相关内容、广告）
<footer>
页脚/底部
（版权、联系信息）
标签 用途 使用场景
<header> 页面或区块的头部 网站 logo、主导航、搜索框
<nav> 导航链接区域 主导航菜单、面包屑导航
<main> 页面主要内容 每页只能有一个，不能嵌套
<article> 独立的内容块 博客文章、新闻、评论
<section> 文档中的节 章节、带标题的内容区块
<aside> 侧边内容 侧边栏、相关文章、广告
<footer> 页面或区块的底部 版权信息、联系信息、站点地图

<article> vs <section> 的区别

<article> - 独立、完整、可复用的内容

<section> - 主题相关的分组

<!-- article 示例：博客文章 -->
<article>
    <header>
        <h1>如何学习 HTML</h1>
        <p>作者：张三 | 发布于 2026-01-01</p>
    </header>
    <section>
        <h2>第一章：基础概念</h2>
        <p>内容...</p>
    </section>
    <section>
        <h2>第二章：实践练习</h2>
        <p>内容...</p>
    </section>
</article>

<figure> 与 <figcaption>

用于包裹图片、图表、代码示例等，并添加标题。

<figure>
    <img src="chart.png" alt="2026年销售数据图表">
    <figcaption>
        图 1：2026 年第一季度各产品线销售对比
    </figcaption>
</figure>

<!-- 也可以用于代码示例 -->
<figure>
    <pre><code>function hello() {
    console.log('Hello');
}</code></pre>
    <figcaption>代码示例 1：Hello World</figcaption>
</figure>

🎯 figure 演示

📊 示例图表
图 1：2026 年第一季度销售数据

7.3 通用容器：<div> 与 <span> 的正确使用场景

重要：<div> 和 <span> 是没有任何语义的通用容器，应该作为最后的选择，优先使用语义化标签。
标签 类型 使用场景
<div> 块级元素 布局容器、CSS/JS 钩子（当没有合适的语义标签时）
<span> 行内元素 文本中的小段样式（如高亮、价格） 
<!-- 正确使用 div 和 span -->

<!-- div 用于布局容器 -->
<div class="card-grid">
    <article class="card">...</article>
    <article class="card">...</article>
</div>

<!-- span 用于行内样式 -->
<p>
    原价：<span style="text-decoration: line-through;">¥199</span>
    现价：<span style="color: red; font-weight: bold;">¥99</span>
</p>

7.4 实战：将纯 div 页面重构为语义化页面

重构前（仅使用 div）

<div class="header">
    <div class="logo">我的网站</div>
    <div class="nav">
        <a href="#">首页</a>
        <a href="#">关于</a>
    </div>
</div>

<div class="content">
    <div class="post">
        <div class="post-title">文章标题</div>
        <div class="post-content">文章内容...</div>
    </div>
</div>

<div class="sidebar">
    <div class="widget">相关文章</div>
</div>

<div class="footer">
    <div class="copyright">© 2026 我的网站</div>
</div>

重构后（语义化标签）

<header>
    <div class="logo">我的网站</div>
    <nav>
        <a href="#">首页</a>
        <a href="#">关于</a>
    </nav>
</header>

<main>
    <article>
        <header>
            <h1>文章标题</h1>
        </header>
        <section>文章内容...</section>
    </article>
</main>

<aside>
    <section>
        <h2>相关文章</h2>
        <ul>...</ul>
    </section>
</aside>

<footer>
    <p>&copy; 2026 我的网站</p>
</footer>
重构要点：

✏️ 动手练习

将一个纯 div 布局的博客页面重构为语义化页面：

  1. 分析页面结构，识别各个区域的功能
  2. 用适当的语义标签替换 div
  3. 确保只有一个 <main> 元素
  4. 正确使用 <article> 和 <section>
  5. 添加 <figure> 和 <figcaption> 包裹图片
  6. 使用浏览器开发者工具检查页面大纲（Outline）
← 上一阶段：列表与数据结构 下一章：表单与用户输入 →