测试4
测试大礼包
爬虫实战特训课

ol li 有序列表标签

我们在上一章节学习了无序列表，这一章节我来学习列表的另一种分类：有序列表。有序列表，顾名思义就是有顺序的列表，每一个列表项有前后顺序之分，呈先后排列关系。例如以下效果：

图片描述

如果在 HTML 当中想要呈现有序列表的效果，那么我们就需要 ol 和 li 标签了。

1. ol li 标签的使用

我们在之前的章节中介绍过，理论上标签与标签之间是可以任意嵌套的。但是 ol 和 li 标签比较特殊，ol 标签里只能嵌套 li 标签。ol 代表整个列表，li 标签代表有序列表的每一个选项。我们可以把 ol 标签 理解为一个壳，里面嵌套着 li 代表的选项。如下图所示：

<ol>
    <li>吃饭</li>
    <li>睡觉</li>
    <li>打豆豆</li>
</oL>

图片描述

2. ol li 标签的作用

ol li 标签用来定义有序列表，但 ol li 标签会有默认样式，所有的列表选项默认以阿拉伯数字 1，2，3 开始排列，如想修改列表的排列的样式，可以设置 ol 的 type 属性。通常有序列表代表每个列表选项之间都顺序排列。适应于排行，通知等实际场景。

3. ol li 标签的特点

  1. ol 标签代表整个列表，里面只能 li 标签，li 标签代表列表的每一项；

  2. ol li 标签的程序方式默认为竖向排列，如想横向排列，需要借助 CSS ；

  3. ol li 标签列表项前默认以阿拉伯数字 1、2、3…排列；

  4. 每一个列表项有顺序；

  5. li 标签里可以再嵌套 ol 标签，如 li 标签嵌套了 ol 标签，内层列表的默认排列方式不会改变，具体如下图所示：

    <ol>
    <li>
      <ol>
        <li>红苹果</li>
        <li>青苹果</li>
      </ol>
    </li>
    <li>香蕉</li>
    <li>橘子</li>
  </ol>

    图片描述

    这样代表外层的列表的第一个选项又是一个列表。

  6. 如果想改变 LI 列表选项的排列方式，可以设置 ol 的 type 属性， type 属性的可选值为 1、A、a、I、i，默认为1。

    如果设置 ol type 属性为 A，则列表排列方式为 A、B、C…的英文大写字母排列，如下图：

     <ol type="A">
    <li>苹果</li>
    <li>香蕉</li>
    <li>橘子</li>
    <li>西瓜</li>
    <li>葡萄</li>
 </ol>

图片描述

如果如果设置 ol type 属性为 a，则列表排列方式为 a、b、c…的英文大写字母排列，如下图：

<ol type="a">
    <li>苹果</li>
    <li>香蕉</li>
    <li>橘子</li>
    <li>西瓜</li>
    <li>葡萄</li>
 </ol>

图片描述

如果如果设置 ol type 属性为 i，则列表排列方式为 i、ii、iii、iv…的小写罗马数字排列，如下图：

<ol type="i">
    <li>苹果</li>
    <li>香蕉</li>
    <li>橘子</li>
    <li>西瓜</li>
    <li>葡萄</li>
</ol>

图片描述

如果如果设置 ol type 属性为 I，则列表排列方式为 I、II、III、IV…的大写罗马数字排列，如下图：

<ol type="I">
    <li>苹果</li>
    <li>香蕉</li>
    <li>橘子</li>
    <li>西瓜</li>
    <li>葡萄</li>
</ol>

图片描述

4. 注意事项

  1. ol 标签里只能嵌套 li 标签， 而 li 标签里可以嵌套任意标签。
  2. ol 和 li 均为双标签，都有首尾标签。
  3. ol 和 li 默认为竖向排列。
  4. li 标签默认排列方式为阿拉伯数字 1、2、3…排列。如内层 还有 li 标签，默认排列方式不变。
  5. 如果想改变排列方式，可以设置 ol 标签的 type 属性。
  6. 因为 ol 的type属性比较多，可以根据实际需求来设置。

5. 真实案例分享

内部通知

<h1>普通话考试通知</h1>
	<p>我院今年3月份的普通话水平测试开始接受报名，具体事项通知如下：</p>
	<ol>
	<li>报名</li>
		<ol type="A">
		<li>报名时间：3月16-21日，逾期不予受理。</li>
		<li>报名地点：所在院系办公室。</li>
		<li>报名费用：按物价局规定85元/人/次(含培训费用)，报名时交齐。</li>
		<li>提交资料及注意事项：</li>
			<ol type="a">
			<li>参加测试的学生须填写《河南省普通话水平测试报名表》一份(准考证号码 不用填写)；</li>
			<li>填写准考证一份(编号不用填写)，所填姓名和出生年月须与身份证一致；</li>
			<li>提交小一寸彩色证件照3张(照片不能是打印版、不能是生活照，3张照片必须统一底片)，其中两张照片贴在报名表和准考证上，另一张用钢笔在背面写上校名、系名和姓名，与表格一起上交。</li>
			</ol>
		</ol>
	<li>测试</li>
	<li>培训</li>
	<p>(注：具体时间和地点按河南财经学院测试站发回的准考证上所列)</p>
	</ol>

6. 小结

  1. ol li 标签代表有序列表， ol 代表列表整体，li 代表列表的每一个选项。
  2. ol 标签里面只能嵌套 li 标签， li 标签可以嵌套任意标签。
  3. ol li 标签默认为竖向排列。
  4. ol li 标签默认排列方式为1、2、3…。
  5. 可以设置 ol 的 type 属性来改变列表项的排列方式。

图片描述