【HTML】什么是 HTML 中的有序列表 ol

在 HTML 中，列表共分为三种，分别是有序列表，无序列表和定义列表。

本篇博客介绍第一种：有序列表

简介

顾名思义，有序列表中的每个列表项就是有顺序的，列表项一般采用数字或者字母作为顺序，但默认为数字。

在 HTML 中，有序列表用 ol 标签定义，从 <ol> 开始，到 </ol> 结束。每个列表项从 <li> 开始，到 </li> 结束。

语法

<ol>
	<li>列表项一</li>
	<li>列表项二</li>
	<li>列表项三</li>
	<li>列表项N</li>
</ol>

浏览器效果如下
在这里插入图片描述
说明

标签 ol，其实是 ordered list(有序列表) 的英文缩写，标签 li 是 list(列表、清单) 的英文缩写。

一个 <li> 和 </li> 标签代表一个列表项，可以看出，一个有序列表可以有多个列表项。

注意事项

1：ol 标签需要配合 li 标签一起使用，不能单独使用。
2：ol 标签的子标签只能是 li 标签，不能是其它标签。

这里我测试了一下在 ol 标签里写入 p 标签，如下图所示
在这里插入图片描述
编辑器提示我元素 p 不能出现在这里，并对 p 进行了高亮显示。可见 ol 标签的子标签确实不能放入其它标签。

但浏览器可以正常运行吗？如下图所示
在这里插入图片描述
出乎意外，浏览器竟然可以正常解析，不过编辑器是不允许出现这种写法的，我们记住即可。

列表项的默认顺序用数字来表示，有没有其它的表示符号呢？当然有，继续往下看

在 HTML 中，用 type 属性来改变列表项的符号。

语法

<ol type="属性值">
	<li>列表项一</li>
	<li>列表项二</li>
	<li>列表项三</li>
	<li>列表项N</li>
</ol>

type 的属性值

在有序列表中，type 属性共有五个可取属性值，如下表格所示
在这里插入图片描述
这里以属性值 a 为例，我们看一下它的效果。

代码如下所示

<body>
	<ol type="a">
		<li>列表项一</li>
		<li>列表项二</li>
		<li>列表项三</li>
		<li>列表项N</li>
	</ol>
</body>

浏览器运行效果如下
在这里插入图片描述

结束语
如果这篇博客有幸帮到了您，欢迎点击下方链接，和更多志同道合的伙伴一起交流，一起进步。

结束语