# 列表标签

网道（WangDoc.com），互联网文档计划

列表是一系列排列好的项目，主要分成两类：有序列表和无序列表。

有序列表是每个列表项前面有编号，呈现出顺序，就像下面这样。

    1. 列表项 A
    2. 列表项 B
    3. 列表项 C

无序列表则是列表项前面没有编号，只有一个列表符号，默认是一个圆点。

    · 列表项 A
    · 列表项 B
    · 列表项 C

## `<ol>` #

`<ol>`标签是一个块级元素，作为有序列表容器（ordered list），会在内部的列表项前面产生数字编号。列表项的顺序有意义时，比如排名，就会采用这个标签。

    <ol>
      <li>列表项 A</li>
      <li>列表项 B</li>
      <li>列表项 C</li>
    </ol>

上面代码会在列表项 A、B、C 前面，分别产生1、2、3的编号。

`<ol>`标签内部可以嵌套`<ol>`标签或`<ul>`标签，形成多级列表。

    <ol>
      <li>列表项 A</li>
      <li>列表项 B
        <ol>
          <li>列表项 B1</li>
          <li>列表项 B2</li>
          <li>列表项 B3</li>
        </ol>
      </li>
      <li>列表项 C</li>
    </ol>

上面代码中，一个有序列表内部嵌套了另一个有序列表，渲染结果如下。

    1. 列表项 A
    2. 列表项 B
      1. 列表项 B1
      2. 列表项 B2
      3. 列表项 B3
    3. 列表项 C

该标签有以下属性。

（1）reversed

`reversed`属性产生倒序的数字列表。

    <ol reversed>
      <li>列表项 A</li>
      <li>列表项 B</li>
      <li>列表项 C</li>
    </ol>

上面代码中，列表项 A、B、C 前面，产生的编号是3、2、1。

（2）start

`start`属性的值是一个整数，表示数字列表的起始编号。

    <ol start="5">
      <li>列表项 A</li>
      <li>列表项 B</li>
      <li>列表项 C</li>
    </ol>

上面代码中，列表项 A、B、C 前面，产生的编号是5、6、7。

（3）type

`type`属性指定数字编号的样式。目前，浏览器支持以下样式。

- `a`：小写字母
- `A`：大写字母
- `i`：小写罗马数字
- `I`：大写罗马数字
- `1`：整数（默认值）

    <ol type="a">
      <li>列表项 A</li>
      <li>列表项 B</li>
      <li>列表项 C</li>
    </ol>

上面代码中，列表项 A、B、C 前面的编号，分别是英文小写字母a、b、c。

注意，即使编号是字母，`start`属性也依然使用整数。

    <ol type="a" start="3">
      <li>列表项 A</li>
      <li>列表项 B</li>
      <li>列表项 C</li>
    </ol>

上面代码中，`type`属性指定编号采用小写英文字母，`start`属性等于`3`，表示从`c`开始编号。

## `<ul>` #

`<ul>`标签是一个块级元素，作为无序列表容器（unordered list），会在内部的列表项前面产生实心小圆点，作为列表符号。列表项的顺序无意义时，采用这个标签。

    <ul>
      <li>列表项 A</li>
      <li>列表项 B</li>
      <li>列表项 C</li>
    </ul>

上面代码的渲染结果是，列表项 A、B、C 前面，分别产生一个实心小圆点，作为列表符号。

`<ul>`标签内部可以嵌套`<ul>`或`<ol>`，形成多级列表。

## `<li>` #

`<li>`标签是一个块级元素，表示列表项，用在`<ol>`或`<ul>`容器之中。

有序列表`<ol>`之中，`<li>`有一个`value`属性，定义当前列表项的编号，后面列表项会从这个值开始编号。

    <ol>
      <li>列表项 A</li>
      <li value="4">列表项 B</li>
      <li>列表项 C</li>
    </ol>

上面代码中，`value`属性指定第二个列表项的编号是`4`，因此三个列表项的编号，分别为1、4、5。

## `<dl>`，`<dt>`，`<dd>` #

`<dl>`标签是一个块级元素，表示一组术语的列表（description list）。术语名（description term）由`<dt>`标签定义，术语解释（description detail）由`<dd>`标签定义。`<dl>`常用来定义词汇表。

    <dl>
      <dt>CPU</dt>
      <dd>中央处理器</dd>

      <dt>Memory</dt>
      <dd>内存</dd>

      <dt>Hard Disk</dt>
      <dd>硬盘</dd>
    </dl>

`<dt>`和`<dd>`都是块级元素，`<dd>`默认会在`<dt>`下方缩进显示。上面代码的默认渲染结果如下。

    CPU
      中央处理器

    Memory
      内存

    Hard Disk
      硬盘

多个术语（`<dt>`）对应一个解释（`<dd>`），或者多个解释（`<dd>`）对应一个术语（`<dt>`），都是合法的。

    <dl>
      <dt>A</dt>
      <dt>B</dt>
      <dd>C</dd>

      <dt>D</dt>
      <dd>E</dd>
      <dd>F</dd>
    </dl>

上面代码中，`A`和`B`有共同的解释`C`，而`D`有两个解释`E`和`F`。

本教程采用知识共享 署名-相同方式共享 3.0协议。

分享本文