说明

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

多个术语（​​<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。