74. 模块八回顾与测验

本节目标：复习语义化布局模块所有知识点，通过测验检验掌握程度。

知识回顾

模块八学了 10 章语义化布局内容。来看看你记住了多少。

第 65 章：语义化布局概述

语义化 = 标签本身表达含义
好处：SEO、可访问性、代码可读性
div 仍然有用，纯样式分组用 div

页面级 header：网站标题、Logo、导航
文章级 header：文章标题、作者、发布时间
不能嵌套在 footer、address、另一个 header 里

页面级 footer：版权、联系方式
文章级 footer：标签、分类、发布时间
一个页面可以有多个 footer

第 68 章：main

每页只能有一个 main
放页面的核心内容
不放导航、侧边栏、页眉页脚
屏幕阅读器可跳到 main

第 69 章：article

独立、自包含、可分发
抽走也能独立理解
博客、新闻、评论、产品卡片

第 70 章：section

主题性内容分组
通常有标题
和 article 的区别：独立性

第 71 章：aside

间接相关的补充内容
侧边栏、相关链接、广告、引用
删掉它主内容仍然完整

第 72 章：details/summary 与 dialog

details + summary：折叠面板，零 JS
dialog：原生对话框，需要 JS 打开/关闭
open 属性默认展开
showModal() 模态对话框

第 73 章：figure 与 search

figure + figcaption：媒体内容分组
search：标识搜索区域
figcaption 是 figure 的第一个或最后一个子元素

测验

1. 一个页面中 main 标签可以有几个？

A. 不限
B. 最多 3 个
C. 只能 1 个
D. 最多 5 个

2. 下面哪个场景最适合用 article？

A. 页面侧边栏
B. 博客中的一篇完整文章
C. 页面导航菜单
D. 页脚版权信息

3. section 和 article 的主要区别是？

A. section 有标题，article 没有
B. section 是主题分组，article 是独立内容
C. section 只能有一个，article 可以有多个
D. 没有区别，可以互换

4. details 标签的 open 属性作用是？

A. 禁用折叠功能
B. 页面加载时默认展开
C. 允许嵌套其他 details
D. 改变展开方向

5. figure 标签必须包含什么子元素？

A. img
B. figcaption
C. 不一定，但 figcaption 如果存在必须是第一个或最后一个子元素
D. p

答案

C：每页只能有一个 main。
B：博客文章是独立、自包含的内容，适合用 article。
B：section 是主题分组，article 是独立内容。
B：open 属性让 details 默认展开。
C：figure 不一定包含 figcaption，但如果存在，必须是第一个或最后一个子元素。

学到这里，你会了什么

语义化布局的全部标签你应该都掌握了。

回顾一下，你能用这些标签搭建一个完整的页面结构吗？

<body>
  <header>
    <h1>网站标题</h1>
    <nav>导航</nav>
  </header>

  <main>
    <article>
      <header><h2>文章标题</h2></header>
      <section>章节一</section>
      <section>章节二</section>
      <footer>文章元信息</footer>
    </article>

    <aside>侧边栏</aside>
  </main>

  <footer>页脚</footer>
</body>

这就是现代 HTML 页面的标准结构。

模块五到模块八的写作到此完成。恭喜你学完了列表、表格、表单、语义化布局四大模块！

模块八回顾与测验