HTML 列表

学习目标

掌握 HTML 中三种主要列表类型：无序列表、有序列表和描述列表
理解各类列表标签的语义与使用场景
能够灵活运用列表属性（如 type、start、reversed）控制显示效果
学会使用 <dl>、<dt>、<dd> 构建术语与定义的结构化内容

什么是列表

HTML 列表用于将内容组织为有序或无序的格式，使信息呈现更清晰、易读。通过使用特定标签（如 <ul>、<ol> 和 <li>），开发者可以创建结构化的数据展示方式，显著提升网页内容的可读性与语义性。

常用列表标签

标签	说明
`<ul>`	定义无序列表（带项目符号）
`<ol>`	定义有序列表（带编号）
`<li>`	定义列表中的每一项
`<dl>`	定义描述列表（术语 - 解释对）
`<dt>`	描述列表中的术语（Definition Term）
`<dd>`	术语对应的描述内容（Definition Description）

无序列表

无序列表适用于顺序无关的项目集合，例如课程列表、购物清单等。默认以实心圆点（•）作为项目符号。

基本语法

<ul>
  <li>项目一</li>
  <li>项目二</li>
  <li>项目三</li>
</ul>

示例：课程列表

<h2>欢迎来到编程学习平台</h2>
<h5>可用课程</h5>
<ul>
  <li>数据结构与算法</li>
  <li>Web 开发技术</li>
  <li>逻辑思维与能力测试</li>
  <li>编程语言专题</li>
</ul>

有序列表

当项目顺序重要时（如步骤说明、排名等），应使用有序列表。默认以阿拉伯数字编号（1, 2, 3...）。

基本语法

<ol>
  <li>第一步</li>
  <li>第二步</li>
  <li>第三步</li>
</ol>

常用属性

属性	作用	示例
`start`	指定起始编号	`<ol start="5">` → 从 5 开始
`reversed`	反向编号（降序）	`<ol reversed>` → 3, 2, 1
`type`	编号类型	`type="i"` → 小写罗马数字 (i, ii, iii)

支持的 type 值：

1：阿拉伯数字（默认）
A：大写字母
a：小写字母
I：大写罗马数字
i：小写罗马数字

示例：多种有序列表

<h3>HTML 有序列表示例</h3>

<p>反向编号：</p>
<ol reversed>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

<p>从第 5 项开始：</p>
<ol start="5">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

<p>小写罗马数字：</p>
<ol type="i">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

描述列表

描述列表用于表示术语与其解释的对应关系，常用于词汇表、产品规格、FAQ 等场景。

基本结构

<dl>
  <dt>术语名称</dt>
  <dd>该术语的详细说明</dd>
  
  <dt>另一个术语</dt>
  <dd>对应的解释内容</dd>
</dl>

示例：购物清单

<h2>采购清单</h2>
<dl>
  <dt>咖啡豆</dt>
  <dd>- 500 克</dd>
  
  <dt>牛奶</dt>
  <dd>- 1 升利乐包</dd>
</dl>

重点总结

无序列表 <ul>：用于顺序无关的项目，如菜单、标签云。
有序列表 <ol>：用于有明确顺序的内容，如教程步骤、排行榜。
描述列表 <dl>：用于术语 - 定义对，语义清晰，适合结构化数据。
所有列表项必须包裹在 <li>（或 <dt>/<dd>）中，不能直接写文本。
HTML 列表属性（如 type、start）虽可用，但推荐使用 CSS 实现样式控制，以符合分离结构与表现的最佳实践。

思考题

在什么场景下应该使用描述列表（<dl>）而不是无序列表？请举两个实际例子。
如果希望一个有序列表从字母 “C” 开始编号，应如何编写 HTML 代码？
为什么现代 Web 开发中不推荐使用 compact 属性？应该如何替代？