HTML 教程

HTML 属性

HTML 标签列表

HTML API

HTML 案例

HTML 颜色

HTML5 进阶

HTML 其它

HTML 面试问题

HTML 有序列表

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

  • 数字 (1, 2, 3)

  • 大写罗马数字 (I II III)

  • 小罗马数字 (i ii iii)

  • 大写字母 (ABC)

  • 小字母 (abc)

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

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

HTML 有序列表示例

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

例子 (Example)

<!DOCTYPE html>
<html>
<body>
<ol>  
 <li>HTML</li>  
 <li>Java</li>  
 <li>JavaScript</li>  
 <li>SQL</li>  
</ol>  
</body>
</html>
       自己试试 »

输出：

  1. HTML

  2. Java

  3. JavaScript

  4. SQL

ol type="I"

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

例子 (Example)

<!DOCTYPE html>
<html>
<body>
<ol type="I">  
 <li>HTML</li>  
 <li>Java</li>  
 <li>JavaScript</li>  
 <li>SQL</li>  
</ol>  
</body>
</html>
       自己试试 »

输出：


  1. HTML

  2. Java

  3. JavaScript

  4. SQL

ol type="i"

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

例子 (Example)

<!DOCTYPE html>
<html>
<body>
<ol type="i">  
 <li>HTML</li>  
 <li>Java</li>  
 <li>JavaScript</li>  
 <li>SQL</li>  
</ol>  
</body>
</html>
       自己试试 »

输出：

  1. HTML

  2. Java

  3. JavaScript

  4. SQL

ol type="A"

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

例子 (Example)

<!DOCTYPE html>
<html>
<body>
<ol type="A">  
 <li>HTML</li>  
 <li>Java</li>  
 <li>JavaScript</li>  
 <li>SQL</li>  
</ol> 
</body>
</html>
       自己试试 »

输出：

  1. HTML

  2. Java

  3. JavaScript

  4. SQL

ol type="a"

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

例子 (Example)

<!DOCTYPE html>
<html>
<body>
<ol type="a">  
 <li>HTML</li>  
 <li>Java</li>  
 <li>JavaScript</li>  
 <li>SQL</li>  
</ol>  
</body>
</html>
       自己试试 »

输出：

  1. HTML

  2. Java

  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”开头的罗马小写值。

例子 (Example)

<!DOCTYPE html>
<html>
<body>
<ol type="i" start="5">  
 <li>HTML</li>  
 <li>Java</li>  
 <li>JavaScript</li>  
 <li>SQL</li>  
</ol> 
</body>
</html>
       自己试试 »

输出：

  1. HTML

  2. Java

  3. JavaScript

  4. SQL

反转属性：

这是 HTML <ol> 标签的布尔属性，在 HTML5 版本中是新增的。如果您使用 reversed 属性

  1. 标签然后它将按降序对列表进行编号（7、6、5、4......1）。


    2. 例子 (Example)

    <!DOCTYPE html>
<html>
 <head>
  </head>
 <body>
 <ol reversed>
   <li>HTML</li>
    <li>Java</li>
    <li>JavaScript</li> 
    <li>SQL</li>
  </ol>
 </body>
</html>
                   自己试试 »

    输出：

    HTML 有序列表

    支持浏览器

    元素ChromeIEFirefoxSafariOpera
    <ol>YesYesYesYesYes
上一主题 HTML 列表 下一主题 HTML 无序列表
  • 使用社交账号登录,本站支持
全部评论(0)

便捷工具