HTML 有序列表

HTML <ol> 标签定义有序列表。有序列表可以是数字或字母顺序的。

有序 HTML 列表

有序列表以 <ol> 标签开始。每个列表项以 <li> 标签开始。

默认情况下,列表项会以数字标记:

实例

<ol>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ol>

亲自试一试

有序 HTML 列表 - Type 属性

<ol> 标签的 type 属性定义列表项标记的类型:

类型 描述
type="1" 列表项将以数字编号(默认)。
type="A" 列表项将以大写字母编号。
type="a" 列表项将以小写字母编号。
type="I" 列表项将以大写罗马数字编号。
type="i" 列表项将以小写罗马数字编号。

数字

数字:

<ol type="1">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ol>

亲自试一试

大写字母

大写字母:

<ol type="A">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ol>

亲自试一试

小写字母

小写字母:

<ol type="a">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ol>

亲自试一试

罗马数字 - 大写

大写罗马数字:

<ol type="I">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ol>

亲自试一试

罗马数字 - 小写

小写罗马数字:

<ol type="i">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ol>

亲自试一试

控制列表计数

默认情况下,有序列表从 1 开始计数。如果您想从指定数字开始计数,可以使用 start 属性:

实例

<ol start="50">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ol>

亲自试一试

嵌套 HTML 列表

列表可以嵌套(列表内部包含列表):

实例

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

亲自试一试

注意:列表项 (<li>) 可以包含新列表以及其他 HTML 元素,如图像、链接等。

本章总结

  • 使用 HTML <ol> 元素定义有序列表
  • 使用 HTML type 属性定义编号类型
  • 使用 HTML <li> 元素定义列表项
  • 列表可以嵌套
  • 列表项可以包含其他 HTML 元素

HTML 列表标签

标签 描述
<ul> 定义无序列表。
<ol> 定义有序列表。
<li> 定义列表项。
<dl> 定义描述列表。
<dt> 定义描述列表中的术语。
<dd> 描述描述列表中的术语。

如需查看所有可用 HTML 标签的完整列表,请访问我们的 HTML 标签参考