![零基础HTML+CSS+JavaScript学习笔记](https://wfqqreader-1252317822.image.myqcloud.com/cover/173/36710173/b_36710173.jpg)
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人
5.3 有序列表
有序列表是使用编号(而不是项目符号)来编排项目的。列表中的项目以数字或英文字母开头,通常各项目之间有先后顺序。在有序列表中,主要使用<ol>和<li>两个标签,以及type属性。
5.3.1 有序列表标签
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-083-01.jpg?sign=1739294278-IVmrz90VyNY3zNfukcy2ySWZA24OLVBd-0-353ccd7f188221a2a3801540ac606a40)
<o1>和<li>两个标签的具体语法如下:
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-083-1.jpg?sign=1739294278-xXM3HMvKfjJsOa8VAlyJfXTMkK0vYZkN-0-a0de3f2bb4121deaf0f26081a97ee594)
在该语法中,<ol>和</ol>标签标志着有序列表的开始和结束,<li>标签表示这是一个列表项的开始,在默认情况下,采用数字序号进行排列。
下面通过一个实例,运用有序列表输出古诗。具体代码如下:
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-083-2.jpg?sign=1739294278-L1eL31vDx3nHzTLYnCDcMkROmai85ydn-0-8969bf4e523184620db5cc9e94ada625)
运行这段代码,可以看到有序列表前面包含顺序号,如图5.6所示。
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-084-1.jpg?sign=1739294278-jKH1eVx46jPwXcUkWMsGd6GAmQrft0la-0-be6a1ff8deb203b70b560724acdaa79d)
图5.6 运用有序列表输出古诗
学习笔记
在默认情况下,有序列表中的列表项采用数字序号进行排列,如果需要将列表序号改为其他类型(如以英文字母开头),则需要改变type属性。
5.3.2 有序列表属性
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-084-02.jpg?sign=1739294278-p5dLMJE6zqxVPAkvD9LRv3V7WFSdp1eK-0-e5cde3ea728d8d15b7d6dec56b387fd4)
在默认情况下,有序列表的序号是数字,通过type属性可以调整序号的类型,如将其修改成字母等。
具体语法如下:
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-084-2.jpg?sign=1739294278-DgZUy9AuWAIWPYtBMot7zwAQ0P1UNSpo-0-173ab8369ef6d23f54076d9365b7151c)
在该语法中,序号类型有5种,如表5.3所示。
表5.3 有序列表的序号类型
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-084-3.jpg?sign=1739294278-EhjFOeISOT5E5DYToqNZ1oCE1Zbn3kPc-0-ccba66063d4e73d91666eecf560fb83f)
下面通过一个实例,新建一个HTML5文件,使用有序列表制作一个商城网页。在<body>标签中添加如下代码:
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-085-1.jpg?sign=1739294278-V3uRKz3xsQCKggpNvsOIPfmXClZ7aUy7-0-8ab39ddba6d4acb0050679d1a4fb4203)
为上面的HTML代码添加CSS样式,代码如下:
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-085-2.jpg?sign=1739294278-xxKxUE5Gj8beHRtvq2U5MyZyNTzvmHBY-0-d7e1da8cff5e671a8e4ae6c005b0eba0)
保存文件,运用谷歌浏览器打开该文件,将显示使用有序列表制作的商城网页,效果如图5.7所示。
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-086-1.jpg?sign=1739294278-JtuL17lSXDbVJI2iK5fr0uWQ5gEEs1vq-0-c362cefd5682a44028ec5fca67f58a78)
图5.7 有序列表制作的商城网页
学习笔记
如果在开发过程中不需要有序列表的序号,则只需将有序列表的列表项目的序号类型设置为none即可,也可以将列表的list-style属性设置为none。