码农教程 - 一技在手,衣食无忧! tools

HTML 有序列表

❮ 上一节 下一节 ❯

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

有序 HTML 列表

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

列表项默认会标有数字：

示例

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
亲自试一试 »

有序 HTML 列表 - 类型属性

这个type的属性<ol>tag，定义列表项标记的类型：

Type Description
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers

数字：

<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
亲自试一试 »

大写字母：

<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
亲自试一试 »

小写字母：

<ol type="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
亲自试一试 »

大写罗马数字：

<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
亲自试一试 »

小写罗马数字：

<ol type="i">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
亲自试一试 »

控制列表计数

默认情况下，有序列表会从 1 开始计数。如果你想从指定的数字开始计数，可以使用start属性：

示例

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
亲自试一试 »

嵌套 HTML 列表

列表可以嵌套（列表内列表）：

示例

<ol>
  <li>Coffee</li>
  <li>Tea
    <ol>
      <li>Black tea</li>
      <li>Green tea</li>
    </ol>
  </li>
  <li>Milk</li>
</ol>
亲自试一试 »

笔记：列表项 (<li>) 可以包含新列表和其他 HTML 元素，例如图片和链接等。

章节总结

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

HTML练习

通过练习测试一下

练习:

完成 HTML 代码以创建有序列表。


  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>

开始练习

HTML 列表标签

Tag Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term in a description list
<dd> Describes the term in a description list

有关所有可用 HTML 标签的完整列表，请访问我们的HTML 标签参考。


❮ 上一节 下一节 ❯