HTML <ol> 标签 详解
HTML基础 2022-06-02 09:42:04小码哥的IT人生shichen
HTML <ol> 标签
实例
有序 HTML 列表：
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<body>
<ol>
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
<ol start="50">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
</body>
</html>可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
浏览器支持
| 元素 | Chrome | IE | 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 | reversed | 规定列表顺序为降序。(9,8,7...) |
| start | number | 规定有序列表的起始值。 |
| type |
|
规定在列表中使用的标记类型。 |
全局属性
<ol> 标签支持 HTML 中的全局属性。
事件属性
<ol> 标签支持 HTML 中的事件属性。
TIY 实例
完整实例【有序列表】：
<!DOCTYPE html>
<html>
<body>
<ol>
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
<ol start="50">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
</body>
</html>可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
本例演示一个有序列表。
完整实例【不同类型的有序列表】：
<html>
<body>
<h4>数字列表：</h4>
<ol>
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>
<h4>字母列表：</h4>
<ol type="A">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>
<h4>小写字母列表：</h4>
<ol type="a">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>
<h4>罗马字母列表：</h4>
<ol type="I">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>
<h4>小写罗马字母列表：</h4>
<ol type="i">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>
</body>
</html>可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
本例演示不同类型的有序列表。
相关页面
HTML DOM 参考手册：Ol 对象
