HTML - <ol> 标签

HTML <ol> 标签用于创建有序列表。有序列表的默认顺序为数字顺序。

有序列表项显示为数字，可以采用多种形式，例如数字、字母（大写或小写）或罗马数字。有序列表包含多个<li>标签，用于创建列表项。

语法

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

属性

HTML ol 标签支持 HTML 的全局和事件属性。也接受一些特定的属性，如下所示。

属性	值	描述
reversed	reversed	指定列表项以反向顺序显示。
start	数字	指定有序列表的起始数字。
type	1 A a I i	指定有序列表的编号类型。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

HTML ol 标签示例

下面的示例将说明 ol 标签的用法，包括何时何地以及如何使用 ol 标签，以及如何创建嵌套有序列表。

创建有序列表

在下面的示例中，我们创建了一个有序列表来显示相关的项目列表。

Open Compiler

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML ol Tag</title>
</head>
<body>
<!-- Creating an Ordered list-->
   <h3>
      List of technologies for Basic Web Development
   </h3>
   <ol>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
   </ol>
</body>
</html>

自定有序列表的起始编号

以下是另一个有序列表示例。在这里，我们在<ol>标签中使用start属性来显示项目列表，计数从10开始。

Open Compiler

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML ol Tag</title>
</head>
<body>
   <!-- Creating an Ordered list-->
   <h3>
      List of technologies for Basic Web Development
   </h3>
   <ol start="2">
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
   </ol>
</body>
</html>

字母有序列表

在这个例子中，我们在<ol>标签中使用type属性，将列表项的编号类型设置为大写和小写字母格式。

Open Compiler

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML ol Tag</title>
</head>
<body>
   <!-- Creating an Ordered list-->
   <!--type = 'a'-->
   <ol type='a'>
      <li>Apple</li>
      <li>Banana</li>
      <li>Orange</li>
   </ol>
   <!--type = 'A'-->
   <ol type='A'>
      <li>Red</li>
      <li>Black</li>
      <li>Blue</li>
   </ol>
</body>
</html>

罗马数字有序列表

在这个程序中，我们在<ol>标签中使用type属性，并将value type设置为“I”和“i”，以大写和小写罗马数字格式显示项目列表。

Open Compiler

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML ol Tag</title>
</head>
<body>
   <!-- Creating an Ordered list-->
   <!--type = 'i'-->
   <ol type='i'>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
   </ol>
   <!--type = 'I'-->
   <ol type='I'>
      <li>Java</li>
      <li>PHP</li>
      <li>Python</li>
   </ol>
</body>
</html>

嵌套有序列表

在下面的示例中，我们创建了一个嵌套有序列表来显示有序列表的相关项目。

Open Compiler

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML ol Tag</title>
</head>
<body>
   <!-- Creating an Nested Ordered list-->
   <ol start=10>
      <li>Uppercase letters numbering type</li>
      <ol type='A'>
      <li>Mango</li>
      <li>Apple</li>
      </ol>
      <li>Lowercase letters numbering type</li>
      <ol type='a'>
      <li>Red</li>
      <li>Blue</li>
      </ol>
      <li>Lowercase roman numerals type</li>
      <ol type='i'>
      <li>HTML</li>
      <li>CSS</li>
      </ol>
      <li>Uppercase roman numerals type</li>
      <ol type='I'>
      <li>Java</li>
      <li>C++</li>
      </ol>
   </ol>
</body>
</html>

支持的浏览器

标签
ol	是	是	是	是	是

html_tags_reference.htm

打印页面