位置:电子教程 > HTML入门到精通 (如果看不到内容请使用360浏览器) 推荐学习资源
第1章 HTML 入门
第2章 HTML 基础标签
第3章 HTML 高级标签
第4章 HTML 表单标签
第5章 HTML 媒体和视频(Videos)
当前阅读教程:HTML入门到精通 > 3.6 HTML 有序列表ol标签
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 3.5 HTML无序列表 ul标签 下一篇: 3.7 HTML 自定义列表 dl 标签

标签定义及使用说明

<ol> 标签定义了一个有序列表. 列表排序以数字来显示。

使用<li> 标签来定义列表选项。

提示:使用 CSS 来定义列表样式。

示例

小白教程网www.2d5.net

代码如下:

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
 
<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

ol属性语法

<ol type="1|a|A|i|I">

ol属性值

属性

描述

start

number

HTML5不支持,不赞成使用。请使用样式取代它。 规定列表中的起始点。

type

1
  A
  a
  I
  i

规定列表的类型。不赞成使用。请

type属性值

描述

1

默认。十进制数字 (1, 2, 3, 4)。

a

字母顺序的有序列表,小写 (a, b, c, d)。

A

字母顺序的有序列表,大写 (A, B, C, D)。

i

罗马数字,小写 (i, ii, iii, iv)。

I

罗马数字,大写 (I, II, III, IV)。

 

示例

小白教程网www.2d5.net

:HTML有序列表 ol标签 和 start属性的使用

示例

小白教程网www.2d5.net

代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML有序列表 ol标签 和 start属性的使用</title>
</head>
<body>
     <ol>
             <li>a1</li>
             <li>a2</li>
             <li>a3</li>
             <li>a4</li>
             <li>a5</li>
     </ol>
     <ol start="3">
             <li>a1</li>
             <li>a2</li>
             <li>a3</li>
             <li>a4</li>
             <li>a5</li>
     </ol>   
     <ol>
             <li>黄菊华老师</li>
             <li>课程列表
                      <ol>
                               <li>HMTL</li>
                               <li>CSS</li>
                               <li>JavaScript(JS)</li>
                      </ol>
             </li>
     </ol>
</body>
</html>

效果如图3-12

image.png

示例

小白教程网www.2d5.net

:HTML有序列表 ol标签 type几种属性的使用

示例

小白教程网www.2d5.net

代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML有序列表 ol标签 和 start属性的使用</title>
</head>
<body>
     <ol>
             <li>a1</li>
             <li>a2</li>
             <li>a3</li>
     </ol>
    
     <ol type="a" start="2">
             <li>a1</li>
             <li>a2</li>
             <li>a3</li>
     </ol>
    
     <ol type="A" start="10">
             <li>a1</li>
             <li>a2</li>
             <li>a3</li>
     </ol>   
    
     <ol type="i" start="2">
             <li>a1</li>
             <li>a2</li>
             <li>a3</li>
     </ol>   
 
     <ol type="I" start="5">
             <li>a1</li>
             <li>a2</li>
             <li>a3</li>
     </ol>           
</body>
</html>

效果如图3-13

image.png



上一篇: 3.5 HTML无序列表 ul标签 下一篇: 3.7 HTML 自定义列表 dl 标签
毕业设计网             广告联系QQ:45157718(微信同号)