HTML ol 语法
在 HTML 中，ol 标签用于创建有序列表。有序列表的列表项是有先后顺序的，一般采用数字或字母作为顺序，默认是采用数字顺序。
语法：
<ol type="标记类型" start="起始值" reversed>
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
</ol>说明：
ol 指的是 “ordered list（有序列表）”，而 li 指的是 “list item（列表项）”。
ol 标签支持以下 3 个属性。
type（可选）：用于指定列表项符号，其取值情况如下表所示。
| 属性值 | 列表项符号 |
|---|---|
| 1（默认值） | 阿拉伯数字：1、2、3…… |
| a | 小写英文字母：a、b、c…… |
| A | 大写英文字母：A、B、C…… |
| i | 小写罗马数字：i、ii、iii…… |
| I | 大写罗马数字：I、II、III…… |
start（可选）：用于指定列表项编号的开始值，其值为数字，默认值为 1。reversed（可选）：是否反转列表项顺序。
注意:
- ol 标签通常搭配 li 标签一起使用，任何一个都不可以单独使用。并且 ol 标签的子标签只能是 li 标签，不能是其他标签。
- 不推荐使用 type 属性来定义 ol 的列表项符号，而是推荐使用 CSS 的 list-style-type 属性。
HTML ol 摘要
| 属于 | HTML 列表 |
|---|---|
| 使用频率 | 高 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
HTML ol 示例
接下来，我们通过几个简单的例子来讲解一下 HTML ol 标签是如何使用的。
示例 1：ol 标签的基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Vue</li>
<li>React</li>
</ol>
</body>
</html>页面效果如下图所示。
示例 2：ol 标签的 type 属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ol type="a">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Vue</li>
<li>React</li>
</ol>
</body>
</html>页面效果如下图所示。
分析：
type="a" 表示设置 ol 标签的列表项符号为小写英文字母。
示例 3：ol 标签的 start 属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ol type="a" start="3">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Vue</li>
<li>React</li>
</ol>
</body>
</html>页面效果如下图所示。
分析：
start="3" 表示设置 ol 标签是从 3 开始的，并且它会自动考虑 type 属性的取值。因此 ol 标签是从字母 “c” 开始计数。
示例 4：ol 标签的 reversed 属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ol reversed>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Vue</li>
<li>React</li>
</ol>
</body>
</html>页面效果如下图所示。
分析：
如果给 ol 标签加上 reversed 属性，此时列表项就会使用逆序（从大到小）的序号。
示例 5：ol 标签嵌套列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ol>
<li>前端：
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>后端：
<ul>
<li>Go</li>
<li>Java</li>
<li>Node.js</li>
</ul>
</li>
</ol>
</body>
</html>页面效果如下图所示。
分析：
虽然 ol 标签的子元素只能是 li，但 li 本身是可以嵌套其他有序列表或无序列表的。
