HTML <ol> 标签

实例

有序 HTML 列表:

  1. <ol>
  2. <li>Coffee</li>
  3. <li>Tea</li>
  4. <li>Milk</li>
  5. </ol>

浏览器支持

元素 Chrome Internet Explorer / Edge Firefox Safari Opera
<ol> Yes Yes Yes Yes Yes

所有主流浏览器都支持 <ol> 标签。

定义和用法

<ol> 标签定义有序列表。

HTML 与 XHTML 之间的差异

在 HTML 4.01 中,ol 元素的 “compact”、”start” 以及 “type” 属性是不被赞成使用的。

在 XHTML 1.0 Strict DTD 中,ol 元素的 “compact”、”start” 以及 “type” 属性是不被支持的。

提示和注释:

提示:请使用 CSS 来定义列表的类型。

属性

New:HTML5 中的新属性。

属性 描述
compact compact HTML5 中不支持。HTML 4.01 中不赞成使用。
规定列表呈现的效果比正常情况更小巧。
reversed ol - 图6 reversed 规定列表顺序为降序。(9,8,7…)
start number 规定有序列表的起始值。
type 1
A
a
I
i
规定在列表中使用的标记类型。

全局属性

<ol> 标签支持 HTML 中的全局属性

事件属性

<ol> 标签支持 HTML 中的事件属性

TIY 实例

有序列表

本例演示一个有序列表。

  1. <ol>
  2. <li>咖啡</li>
  3. <li>牛奶</li>
  4. <li></li>
  5. </ol>
  6. <ol start="50">
  7. <li>咖啡</li>
  8. <li>牛奶</li>
  9. <li></li>
  10. </ol>

不同类型的有序列表

本例演示不同类型的有序列表。

  1. <h4>数字列表:</h4>
  2. <ol>
  3. <li>苹果</li>
  4. <li>香蕉</li>
  5. <li>柠檬</li>
  6. <li>桔子</li>
  7. </ol>
  8. <h4>字母列表:</h4>
  9. <ol type="A">
  10. <li>苹果</li>
  11. <li>香蕉</li>
  12. <li>柠檬</li>
  13. <li>桔子</li>
  14. </ol>
  15. <h4>小写字母列表:</h4>
  16. <ol type="a">
  17. <li>苹果</li>
  18. <li>香蕉</li>
  19. <li>柠檬</li>
  20. <li>桔子</li>
  21. </ol>
  22. <h4>罗马字母列表:</h4>
  23. <ol type="I">
  24. <li>苹果</li>
  25. <li>香蕉</li>
  26. <li>柠檬</li>
  27. <li>桔子</li>
  28. </ol>
  29. <h4>小写罗马字母列表:</h4>
  30. <ol type="i">
  31. <li>苹果</li>
  32. <li>香蕉</li>
  33. <li>柠檬</li>
  34. <li>桔子</li>
  35. </ol>

相关页面

HTML DOM 参考手册:OL 对象