HTML 列表

HTML 提供了多种方式来创建列表，以清晰、结构化的形式展示信息。最主要的三种列表类型是：

• 无序列表 (Unordered List): 项目使用项目符号（如圆点、方块）标记。
• 有序列表 (Ordered List): 项目使用数字或字母标记。
• 定义列表 (Description List): 用于展示术语及其定义。

1. 无序列表 <ul>

无序列表由 <ul> (Unordered List) 标签创建。列表中的每个项目都由 <li> (List Item) 标签定义。

浏览器默认会在每个列表项前显示一个实心圆点。

<h2>购物清单</h2>
<ul>
  <li>牛奶</li>
  <li>面包</li>
  <li>鸡蛋</li>
</ul>

你可以使用 CSS 的 list-style-type 属性来改变项目符号的样式，例如 disc (默认), circle, square, 或 none。

2. 有序列表 <ol>

有序列表由 <ol> (Ordered List) 标签创建。列表中的每个项目同样由 <li> 标签定义。

浏览器默认会在每个列表项前显示递增的数字。

<h2>操作步骤</h2>
<ol>
  <li>打开冰箱</li>
  <li>放入大象</li>
  <li>关上冰箱门</li>
</ol>

<ol> 标签有一些有用的属性：

• type: 改变编号的类型。
  • 1 (默认): 数字 (1, 2, 3)
  • A: 大写字母 (A, B, C)
  • a: 小写字母 (a, b, c)
  • I: 大写罗马数字 (I, II, III)
  • i: 小写罗马数字 (i, ii, iii)
• start: 指定编号的起始值。

<ol type="A" start="3">
  <li>C 项</li>
  <li>D 项</li>
  <li>E 项</li>
</ol>

3. 定义列表 <dl>

定义列表是一种特殊的列表，用于展示一系列的术语及其解释。它由三个标签组成：

• <dl> (Description List): 定义列表的容器。
• <dt> (Description Term): 定义一个术语或名称。
• <dd> (Description Details): 描述或解释该术语。

<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言，用于创建网页的结构。</dd>
  <dt>CSS</dt>
  <dd>层叠样式表，用于为网页添加样式。</dd>
  <dt>JavaScript</dt>
  <dd>一种编程语言，用于实现网页的交互功能。</dd>
</dl>

浏览器通常会为 <dd> 的内容添加缩进。

嵌套列表

任何类型的列表都可以嵌套在另一个列表中，以创建更复杂的层级结构。

<ul>
  <li>咖啡</li>
  <li>茶
    <ol>
      <li>红茶</li>
      <li>绿茶</li>
    </ol>
  </li>
  <li>牛奶</li>
</ul>