- 零基础HTML+CSS+JavaScript学习笔记
- 明日科技编著
- 561字
- 2025-02-26 15:27:48
5.3 有序列表
有序列表是使用编号（而不是项目符号）来编排项目的。列表中的项目以数字或英文字母开头，通常各项目之间有先后顺序。在有序列表中，主要使用<ol>和<li>两个标签，以及type属性。
5.3.1 有序列表标签
<o1>和<li>两个标签的具体语法如下：
在该语法中，<ol>和</ol>标签标志着有序列表的开始和结束，<li>标签表示这是一个列表项的开始，在默认情况下，采用数字序号进行排列。
下面通过一个实例，运用有序列表输出古诗。具体代码如下：
运行这段代码，可以看到有序列表前面包含顺序号，如图5.6所示。
图5.6 运用有序列表输出古诗
学习笔记
在默认情况下，有序列表中的列表项采用数字序号进行排列，如果需要将列表序号改为其他类型（如以英文字母开头），则需要改变type属性。
5.3.2 有序列表属性
在默认情况下，有序列表的序号是数字，通过type属性可以调整序号的类型，如将其修改成字母等。
具体语法如下：
在该语法中，序号类型有5种，如表5.3所示。
表5.3 有序列表的序号类型
下面通过一个实例，新建一个HTML5文件，使用有序列表制作一个商城网页。在<body>标签中添加如下代码：
为上面的HTML代码添加CSS样式，代码如下：
保存文件，运用谷歌浏览器打开该文件，将显示使用有序列表制作的商城网页，效果如图5.7所示。
图5.7 有序列表制作的商城网页
学习笔记
如果在开发过程中不需要有序列表的序号，则只需将有序列表的列表项目的序号类型设置为none即可，也可以将列表的list-style属性设置为none。