您的位置:图文专栏 > 技术教程 > HTML5/CSS3速成教程 >

4-2 使用<ol><li>标签实现有序列表

发布时间:2021-03-01 17:02:02

4-2 使用<ol><li>标签实现有序列表

如果想在网页中展示有前后顺序的信息列表,怎么办呢?如,当当网上的书籍热卖排行榜,如下图所示。这类信息展示就可以使用<ol>标签来制作有序列表来展示。

语法:

<ol>
   <li>信息</li>
   <li>信息</li>
   ......
</ol>

举例:

下面是一个热点课程下载排行榜:

<ol>
   <li>前端开发面试心法 </li>
   <li>零基础学习html</li>
   <li>JavaScript全攻略</li>
</ol>

<ol>在网页中显示的默认样式一般为:每项<li>前都自带一个序号,序号默认从1开始,如下图所示:

源代码:
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>ol列表</title>
</head>

<body>
<ol>
   <li>我的第一个列表信息。</li>
   <li>我的第一个列表信息。</li>
</ol>
</body>

</html>
上一篇: 4-1 使用<ul><li>标签实现无序列表

下一篇: 5-1 使用<img>标签为网页添加图片