43. 模块五回顾与测验

模块五我们学了 HTML 的三种列表。来快速过一遍核心要点。

知识回顾

三种列表类型

类型	标签	语义	默认标记
无序列表	ul + li	项目无顺序	实心圆点
有序列表	ol + li	项目有顺序	数字
定义列表	dl + dt + dd	术语 + 描述	缩进

关键属性

有序列表 ol 的属性：

• type：编号类型（1、A、a、I、i）
• start：起始编号
• reversed：倒序排列

CSS list-style 属性：

• list-style-type：标记类型
• list-style-position：标记位置（inside/outside）
• list-style-image：自定义标记图片

嵌套规则

内层列表必须放在外层 li 标签内部，不能放在外面。

测验题

第1题：下面哪个场景最适合用有序列表？

• A. 购物清单
• B. 烹饪步骤
• C. 团队成员列表

答案是 B。烹饪步骤有明确的先后顺序。

第2题：type=“A” start=“3” 的编号从哪个字母开始？

• A. A
• B. B
• C. C

答案是 C。start=“3” 表示从第 3 个字母开始，即 C。

第3题：关于定义列表，下面说法正确的是？

• A. 一个 dt 只能对应一个 dd
• B. 一个 dt 可以对应多个 dd
• C. dd 必须在 dt 前面

答案是 B。一个术语可以有多个描述。

第4题：list-style-position: inside 的效果是？

• A. 标记消失
• B. 标记在内容区域内，和内容一起缩进
• C. 标记变成图片

答案是 B。inside 让标记和内容在同一缩进区域。

第5题：下面哪个是列表嵌套的正确写法？

<!-- A -->
<ul>
  <li>项目</li>
  <ul><li>子项</li></ul>
</ul>

<!-- B -->
<ul>
  <li>项目
    <ul><li>子项</li></ul>
  </li>
</ul>

答案是 B。内层 ul 必须放在外层 li 内部。

模块五知识地图

列表
├── 无序列表（ul + li）
│   ├── 基本结构
│   ├── 嵌套
│   └── list-style-type 样式
├── 有序列表（ol + li）
│   ├── type 属性
│   ├── start 属性
│   └── reversed 属性
├── 定义列表（dl + dt + dd）
│   ├── 术语与描述配对
│   └── 多个描述
└── 列表嵌套与样式
    ├── 嵌套规则
    ├── list-style 属性
    └── 导航菜单应用

小结

三种列表各有用途：无序列表用于并列项目，有序列表用于有顺序的项目，定义列表用于术语描述配对。选择哪种取决于内容的语义，不是视觉效果。

下一章开始模块六：表格。