语义化页面结构

这一节要完成什么

重组学习主页，使读者和辅助技术快速找到导航、正文和补充内容。

先理解：为什么要学它

div 只是无含义容器，语义区域说明一块内容在整页中的职责。正确地标让键盘与朗读器用户能跳过重复导航，也让维护者读懂页面。

跟着做

<body>
  <header>
    <h1>我的前端学习主页</h1>
    <nav aria-label="主要导航">
      <a href="#progress">进度</a>
      <a href="#notes">笔记</a>
      <a href="pages/about.html">关于我</a>
    </nav>
  </header>
  <main>
    <section id="progress" aria-labelledby="progress-title">…</section>
    <article id="notes">…</article>
    <aside>
      <h2>参考资料</h2>
      <p>补充链接。</p>
    </aside>
  </main>
  <footer>
    <p><small>最后更新：2026-09-21</small></p>
  </footer>
</body>

先在纸上把现有内容分成页头、主要内容和页尾，再移动代码。
一个页面只保留一个 main；站点名称和主要导航放进 header。
进度用 section，独立周记用 article，补充资源才用 aside。
点击两个页内链接，确认目标 id 唯一且能准确滚动。

关键代码怎么读

nav 包住一组主要导航链接，不是任何链接都要放进去。
section 通常有标题；article 单独拿出来仍完整。
header/footer 可属于整页或 article，含义取决于嵌套位置。

常见错误：看到什么，检查什么

现象	检查方法
每个 div 都换成 section	没有独立主题的容器仍可用 div。
页面出现多个 main	主要内容地标通常只有一个。
aside 放必须先读的步骤	aside 是补充内容，移走后主线仍完整。

自己完成一次

为 about.html 设计最小语义结构：页头导航、主要介绍、技能清单和页尾。

完成后再看参考答案

可采用 header > nav、main > article（内含技能 section）、footer。

完成检查

我的页面出现了本节要求的新内容
我能不用看答案解释关键标签或属性
我主动制造并修复了至少一个错误