零基础教你学前端——14、有序列表

陆荣涛 - 2022-10-13 20:22:15

列表在各种页面内容展示形式中，使用频率非常高。HTML中列表分为以下三种：左边我们称之为有序列表，中间我们称之为无序列表，右边我们称之为自定义列表。这节课我们先来学习有序列表。

看几个例子， markdown 文件中的目录，购物购票指南，仪器的使用操作步骤，百度热搜榜等都是通过列表显示的。

我们发现这些列表有一个共同特点每一条内容的前面，都有数字序号。在HTML中把这些有顺序的列表清单称为有序列表它们可以表达显示顺序操作步骤排行等信息。有序列表由两个元素组成元素 ol 和元素 li ，二者是父子关系。 li 标签必须被包裹在 ol 中使用，ol 是由order list 的缩写，表示有序列表 li 是 list item 的缩写表示列表，两个都是双标签。

有序列表的语法是

这里再次强调为了遵循 W3C 的语法标准，ol 里面只能嵌套 li 如果需要嵌套其他的标签需放置到 li 标签里面。这里在 li 标签中放置一些文本。来做一个案例：要把大象装冰箱，总共分几步？3步！

打开编辑器，新建 order_list.html文件，补全基本代码，在body 里面使用 ctrl + 斜杠( / ) 实现一个注释，在注释里面添加，这是有序列表的介绍。本案例需要使用一个ol ，里面包裹三个li，分别把三个步骤的内容，输入到对应的 li 标签里面，把冰箱门打开，把大象装进去，把冰箱门带上，保存。在浏览器中打开页面，清楚的看到，三个步骤前面都自动的添加了序号 1 2 3

在这里列表前面的序号被称之为项目符号，默认有序列表的项目符号取值为自然数，从 1 开始。需要注意 W3C标准为了兼顾多语种需求规定了有序列表的项目符号是可以设置的通过给 ol 标签添加 type 属性来定义 type属性的值可以设置列表项目的符号需要大家熟记的 type的取值有五种：分别是 A/a/I/i/1 大写A 小写a 大写I 小写 i 数字 1 各自表示英文字母顺序、罗马数字顺序、阿拉伯数字顺序。