原文：Ordered List in HTML – OL Tag Example，作者：Kolade Chris

有序列表是指在列表中项目被编号，并且顺序很重要。

这与无序列表不同。无序列表是指项目默认排序，顺序无关紧要。

<ol> 标签的基本语法

<ol> 标签在 HTML 中定义有序列表。列表项由 <li> 标签定义。

<ol> 标签不是空元素，它有一个结束标签 </ol>。

<ol>
      <li>...</li>
      <li>...</li>
      <li>...</li>
</ol>

在浏览器中，有序列表显示为编号列表，如下所示：

<ol>
   <li>HTML</li>
   <li>CSS</li>
   <li>JavaScript</li>
   <li>Tailwind</li>
   <li>React</li>
   <li>Mongo DB</li>
   <li>React</li>
</ol>
ss-1-4

如果你想知道为什么列表项在页面中间，是因为这个 CSS：

body {
      display: grid;
      place-items: center;
      height: 100vh;
    }

<ol> 标签的属性

The <ol> tag accepts start, type, and reversed as attributes.

<ol> 标签接受 start、type 和 reversed 作为属性。

type 属性

The type attribute is used to specify which type of numbering you want to use for the list.

The default is Arabic numerals.

The type of lists that can be used are:

  • 1 for Arabic numerals (default)

type 属性用于指定要用于列表的编号类型，默认为阿拉伯数字。

可以使用的列表类型有：

  • 1 表示阿拉伯数字（默认）
<ol type="1">
   <li>HTML</li>
   <li>CSS</li>
   <li>JavaScript</li>
   <li>Tailwind</li>
   <li>React</li>
   <li>Mongo DB</li>
   <li>React</li>
</ol>
ss-1-4

P.S.：如果你将使用阿拉伯数字作为编号类型，则无需指定它，因为它是默认值。

  • A 代表大写字母
<ol type="A">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>Tailwind</li>
  <li>React</li>
  <li>Mongo DB</li>
  <li>React</li>
</ol>
ss-2-4
  • a 代表小写字母
<ol type="a">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>Tailwind</li>
  <li>React</li>
  <li>Mongo DB</li>
  <li>React</li>
</ol>
ss-3-5
  • i 代表小写罗马数字
<ol type="i">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>Tailwind</li>
  <li>React</li>
  <li>Mongo DB</li>
  <li>React</li>
</ol>
ss-4-5
  • I 代表大写罗马数字
<ol type="I">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>Tailwind</li>
  <li>React</li>
  <li>Mongo DB</li>
  <li>React</li>
</ol>
ss-5-6

start 属性

可以引入 start 属性来指定从哪个数字开始列表。因此，它接受一个整数作为值，默认值为 1。

如果你指定像 22 这样的数字，则下一个列表项将采用下一个数字 23，以此类推......

<ol start="22">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>Tailwind</li>
  <li>React</li>
  <li>Mongo DB</li>
  <li>React</li>
</ol>
ss-6-2

reversed 属性

当你在有序列表上使用 reversed 属性时，列表项将以相反的顺序呈现，也就是从最高数到最低数。

你不需要为 reversed 属性指定值，因为你指定的任何值都将被忽略。

<ol reversed>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>Tailwind</li>
  <li>React</li>
  <li>Mongo DB</li>
  <li>React</li>
</ol>
ss-7-3

小结

在本文中，你了解了 <ol> 标记及其属性。你可以在构建项目时使用它。

如果你觉得这篇文章有帮助，请不要犹豫，将它分享给你的朋友和家人。