HTML有序列表或编号列表以编号格式显示元素。HTML的<ol>标签用于有序列表。我们可以使用有序列表来表示以数字顺序格式、字母顺序格式或任何强调顺序的格式中的项目。有不同类型的编号列表:

  • 数字编号(1, 2, 3)
  • 大写罗马数字(I II III)
  • 小写罗马数字(i ii iii)
  • 大写字母(A B C)
  • 小写字母(a b c)

为了表示不同的有序列表,<ol>标签有5种类型的属性。

类型描述
Type "1"这是默认类型。在这种类型中,列表项使用数字编号。
Type "I"在这种类型中,列表项使用大写罗马数字编号。
Type "i"在这种类型中,列表项使用小写罗马数字编号。
Type "A"在这种类型中,列表项使用大写字母编号。
Type "a"在这种类型中,列表项使用小写字母编号。

HTML有序列表示例

让我们看一个HTML有序列表的示例,它以编号列表显示4个主题。在这里,我们不定义type="1",因为它是默认类型。

<ol> 
  <li>HTML</li> 
  <li>Java</li> 
  <li>JavaScript</li> 
  <li>SQL</li> 
</ol>

输出:

  1. HTML
  2. Java
  3. JavaScript
  4. SQL

ol type="I"

让我们看一个以大写罗马数字显示列表的示例。

<ol type="I"> 
  <li>HTML</li> 
  <li>Java</li> 
  <li>JavaScript</li> 
  <li>SQL</li> 
</ol>

输出:

I. HTML

II. Java

III. JavaScript

IV. SQL

ol type="i"

让我们看一个以小写罗马数字显示列表的示例。

<ol type="i"> 
  <li>HTML</li> 
  <li>Java</li> 
  <li>JavaScript</li> 
  <li>SQL</li> 
</ol>

输出:

  1. HTML
  2. Java
  3. JavaScript
  4. SQL

ol type="A"

让我们看一个以大写字母显示列表的示例。

<ol type="A"> 
  <li>HTML</li> 
  <li>Java</li> 
  <li>JavaScript</li> 
  <li>SQL</li> 
</ol>

输出:

A. HTML

B. Java

C. JavaScript

D. SQL

ol type="a"

让我们看一个以小写字母显示列表的示例。

<ol type="a"> 
  <li>HTML</li> 
  <li>Java</li> 
  <li>JavaScript</li> 
  <li>SQL</li> 
</ol>

输出:

  1. HTML
  2. Java
  3. JavaScript
  4. SQL

start属性

start属性与<ol>标签一起使用,用于指定列表项的起始位置。

<ol type="1" start="5">:它将从“5”开始显示数字值。

<ol type="A" start="5">:它将从“E”开始显示大写字母。

<ol type="a" start="5">:它将从“e”开始显示小写字母。

<ol type="I" start="5">:它将从“V”开始显示大写罗马数字。

<ol type="i" start="5">:它将从“v”开始显示小写罗马数字。

<ol type="i" start="5"> 
  <li>HTML</li> 
  <li>Java</li> 
  <li>JavaScript</li> 
  <li>SQL</li> 
</ol>

输出:

  1. HTML
  2. Java
  3. JavaScript
  4. SQL

reversed属性

这是HTML <ol>标签的布尔属性,在HTML5版本中是新添加的。如果您在标签中使用reversed属性,则列表将按降序编号(7、6、5、4......1)。

<ol reversed> 
  <li>HTML</li> 
  <li>Java</li> 
  <li>JavaScript</li> 
  <li>SQL</li> 
</ol>

输出:

  1. HTML
  2. Java
  3. JavaScript
  4. SQL

支持的浏览器

元素chrome browser Chromeie browser IEfirefox browser Firefoxopera browser Operasafari browser Safari
<ol>

标签: html, HTML教程, HTML技术, HTML学习, HTML学习教程, HTML下载, HTML语言, HTML开发, HTML入门教程, HTML进阶教程, HTML高级教程, HTML面试题, HTML笔试题, HTML编程思想