08 # 列表标签

说明

​​网道HTML 教程​​学习笔记

1、​

​<ol>​

​

1、​

​<ol>​

​ 标签是一个有序列表容器（ordered list），会在内部的列表项前面产生数字编号。

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

效果如下：

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

2、​

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

3、该标签有以下属性：

3.1、 ​

​reversed​

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

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

效果如下：

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

3.2、​

​start​

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

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

效果如下：

5. 列表项 A
6. 列表项 B
7. 列表项 C      

3.3、​

​type​

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

• ​

  ​a​

  ​：小写字母
• ​

  ​A​

  ​：大写字母
• ​

  ​i​

  ​：小写罗马数字
• ​

  ​I​

  ​：大写罗马数字
• ​

  ​1​

  ​：整数（默认值）

以​

​I​

​，大写罗马数字为例

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

效果如下：

I. 列表项 A
 II. 列表项 B
III. 列表项 C      

如果在这个基础上添加 ​

​start​

​ 属性：

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

效果如下：列表会从大写罗马数字 ​

​V​

​ 开始

V.列表项 A
 VI.列表项 B
VII.列表项 C      

2、​

​<ul>​

​

​

​<ul>​

​ 标签是一个无序列表容器（unordered list），会在内部的列表项前面产生实心小圆点，作为列表符号。

列表项的顺序无意义时，采用这个标签。

​

​<ul>​

​​ 标签内部可以嵌套 ​

​<ul>​

​​ 或 ​

​<ol>​

​，形成多级列表。

3、​

​<li>​

​

​

​<li>​

​​ 表示列表项，用在 ​

​<ol>​

​​ 或 ​

​<ul>​

​ 容器之中。

有序列表 ​

​<ol>​

​​ 之中，​

​<li>​

​ 有一个 value 属性，定义当前列表项的编号，后面列表项会从这个值开始编号。

比如：

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

1.列表项 A
4.列表项 B
5.列表项 C      

4、​

​<dl>，<dt>，<dd>​

​

​

​<dl>​

​ 标签是一个块级元素，表示一组术语的列表（description list）。

• ​

  ​<dt>​

  ​ 标签：术语名（description term）
• ​

  ​<dd>​

  ​ 标签：术语解释（description detail）
• ​

  ​<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
  硬盘      

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

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