微信登录

列表元素 - ol标签 - 有序列表的编号类型

前端 - HTML5 《列表元素 - ol 标签 - 有序列表的编号类型》

在前端开发中，HTML 为我们提供了丰富的标签来组织和展示内容，有序列表就是其中一种非常实用的方式。有序列表使用 <ol> 标签来创建，它会按照一定的顺序对列表项进行编号。<ol> 标签有一个很重要的属性 type，通过这个属性，我们可以指定有序列表的编号类型。下面就来详细介绍一下 <ol> 标签中 type 属性的各种取值。

1. type="1"（默认值）

当 type 属性的值为 1 时，列表项会以阿拉伯数字 1, 2, 3... 进行编号，这也是 <ol> 标签的默认编号方式。

示例代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Ordered List - Type 1</title>
  8. </head>
  10. <body>
  11.     <ol type="1">
  12.         <li>苹果</li>
  13.         <li>香蕉</li>
  14.         <li>橙子</li>
  15.     </ol>
  16. </body>
  18. </html>

效果展示

  1. 苹果
  2. 香蕉
  3. 橙子

2. type="A"

当 type 属性的值为 A 时，列表项会以大写英文字母 A, B, C... 进行编号。

示例代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Ordered List - Type A</title>
  8. </head>
  10. <body>
  11.     <ol type="A">
  12.         <li>红色</li>
  13.         <li>蓝色</li>
  14.         <li>绿色</li>
  15.     </ol>
  16. </body>
  18. </html>

效果展示

A. 红色
B. 蓝色
C. 绿色

3. type="a"

当 type 属性的值为 a 时，列表项会以小写英文字母 a, b, c... 进行编号。

示例代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Ordered List - Type a</title>
  8. </head>
  10. <body>
  11.     <ol type="a">
  12.         <li>星期一</li>
  13.         <li>星期二</li>
  14.         <li>星期三</li>
  15.     </ol>
  16. </body>
  18. </html>

效果展示

a. 星期一
b. 星期二
c. 星期三

4. type="I"

当 type 属性的值为 I 时，列表项会以大写罗马数字 I, II, III... 进行编号。

示例代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Ordered List - Type I</title>
  8. </head>
  10. <body>
  11.     <ol type="I">
  12.         <li>第一章</li>
  13.         <li>第二章</li>
  14.         <li>第三章</li>
  15.     </ol>
  16. </body>
  18. </html>

效果展示

I. 第一章
II. 第二章
III. 第三章

5. type="i"

当 type 属性的值为 i 时，列表项会以小写罗马数字 i, ii, iii... 进行编号。

示例代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Ordered List - Type i</title>
  8. </head>
  10. <body>
  11.     <ol type="i">
  12.         <li>第一节</li>
  13.         <li>第二节</li>
  14.         <li>第三节</li>
  15.     </ol>
  16. </body>
  18. </html>

效果展示

i. 第一节
ii. 第二节
iii. 第三节

总结

type 属性值 编号类型 示例
1 阿拉伯数字 1, 2, 3…
A 大写英文字母 A, B, C…
a 小写英文字母 a, b, c…
I 大写罗马数字 I, II, III…
i 小写罗马数字 i, ii, iii…

通过合理使用 <ol> 标签的 type 属性，我们可以根据不同的需求选择合适的编号类型，使网页内容的展示更加清晰和有条理。在实际开发中，我们可以根据文档的结构和风格来灵活运用这些编号类型，让用户能够更轻松地理解和阅读网页内容。