4 列表标签

4 列表标签

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

• 有序列表是每个列表项前面有编号，呈现出顺序
• 无序列表则是列表项前面没有编号，只有一个列表符号，默认是一个圆点。

ol 标签 有序

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

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

<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>

该标签有以下属性：

reversed

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

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

start

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

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

type

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

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

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

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

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

ul 标签无序

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

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

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

li 标签列表项

<li> 表示列表项，用在 <ol>或<ul> 容器之中。

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

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

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>