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 属性来改变列表项的排列方式。

图片描述