HTML - ol 标签_HTML 菜鸟教程

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

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

语法

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

属性

<ol> 标签支持 HTML 的全局属性和事件属性。也接受下面列出的一些特定属性。

属性	值	描述
reversed	reversed	以相反的顺序指定 lis 的顺序。
start	number	指定订单列表的起始数量。
type	1 A a I i	指定订单列表的订单类型。

<ol> 标签示例

下面的示例将说明ol标签的用法。在哪里、何时以及如何使用OL标签。如何创建嵌套有序列表。

创建有序列表

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

<!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 开始计数的项目列表。

<!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 属性来设置大写和小写字母格式的项目列表的编号类型。

<!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 属性，并将值类型指定为 'I' 和 'i'，以小写和大写罗马数字格式显示项目列表。

<!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>

嵌套有序列表

在以下示例中，我们将创建嵌套的有序列表以显示有序列表的相关项。

<!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>

支持的浏览器

浏览器
是否支持	Yes	Yes	Yes	Yes	Yes

<< HTML - ul 标签 HTML - li 标签 >>