个性化阅读
专注于IT技术分析

HTML有序列表| HTML编号列表

本文概述

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

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

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

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

HTML有序列表示例

让我们看一下HTML排序列表的示例, 该列表在编号列表中显示4个主题。这里我们没有定义type =“ 1”, 因为它是默认类型。

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

立即测试

输出:

  1. 的HTML
  2. 爪哇
  3. 的JavaScript
  4. 的SQL

ol type =“ I”

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

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

立即测试

输出:

  1. 的HTML
  2. 爪哇
  3. 的JavaScript
  4. 的SQL

ol type =“ i”

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

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

立即测试

输出:

  1. 的HTML
  2. 爪哇
  3. 的JavaScript
  4. 的SQL

ol type =“ A”

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

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

立即测试

输出:

  1. 的HTML
  2. 爪哇
  3. 的JavaScript
  4. 的SQL

ol type =“ a”

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

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

立即测试

输出:

  1. 的HTML
  2. 爪哇
  3. 的JavaScript
  4. 的SQL

开始属性

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. 爪哇
  3. 的JavaScript
  4. 的SQL

反转属性

这是HTML <ol>标记的布尔属性, 在HTML5版本中是新的。如果你将反向属性与

标签, 那么它将以降序编号(7、6、5、4 …… 1)。

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

立即测试

输出:

HTML有序列表

支持的浏览器

Element Chrome IE Firefox Opera Safari
<ol> Yes Yes Yes Yes Yes
赞(0)
未经允许不得转载:srcmini » HTML有序列表| HTML编号列表

评论 抢沙发

评论前必须登录!