<ol> - HTML(超文本标记语言) 编辑
HTML <ol>
元素表示有序列表,通常渲染为一个带编号的列表。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
内容类别 | Flow content, and if the <ol> element's children include at least one <li> element, palpable content. |
---|---|
允许的内容 | Zero or more <li> , <script> and <template> elements. |
标签省略 | 不允许,开始标签和结束标签都不能省略。 |
允许的父级 | Any element that accepts flow content. |
隐含的 ARIA 角色 | list |
允许的 ARIA 角色 | directory , group , listbox , menu , menubar , none , presentation , radiogroup , tablist , toolbar , tree |
DOM 接口 | HTMLOListElement |
属性
此元素支持全局属性。
reversed
- 此布尔值属性指定列表中的条目是否是倒序排列的,即编号是否应从高到低反向标注。
start
- 一个整数值属性,指定了列表编号的起始值。此属性的值应为阿拉伯数字,尽管列表条目的编号类型
type
属性可能指定为了罗马数字编号等其他类型的编号。比如说,想要让元素的编号从英文字母 "d" 或者罗马数字 "iv" 开始,都应当使用start="4"
。 Note: 这个属性在 HTML4中弃用,但是在 HTML5 中被重新引入。 type
- 设置编号的类型:
a
表示小写英文字母编号A
表示大写英文字母编号i
表示小写罗马数字编号I
表示大写罗马数字编号1
表示数字编号(默认)
编号类型适用于整个列表,除非在
Note: 这个属性在 HTML4中弃用,但是在 HTML5 中被重新引入。除非列表中序号很重要(比如,在法律或者技术文件中条目通常被需要所引用),否则请使用 CSS<ol>
元素的<li>
元素中使用不同的type
属性。list-style-type
属性替代。
使用备注
通常,有序列表的条目会和它前面的编号标记一起显示,编号标记可以是数字或者字母。
<ol>
和 <ul>
元素两者可以无限嵌套,既可以同类嵌套,也可以互相嵌套。
<ol>
和 <ul>
元素都表示列表。区别在于,<ol>
元素的有序列表的顺序是有意义的。举一些例子:
- 烹饪食谱中的各个步骤
- 指路时的各处转弯方向
- 营养信息标签上 按含量排序的成分列表
至于如何确定该选择哪一个列表元素,可以尝试更改列表项的顺序,如果其含义会发生改变,那么就应当使用 <ol>
元素,否则使用 <ul>
更合适。
译者注:“更改顺序”时,不应当算上一些固定位于列表最前或最后的项,比如未完成的列表最后的占位项。
如果只有一个元素,以至于根本不存在什么顺序可言,可能最好先考虑是否应当使用列表元素,以及是否要在列表最后增加一些占位的空项。
示例
简单示例
<ol>
<li>Fee</li>
<li>Fi</li>
<li>Fo</li>
<li>Fum</li>
</ol>
以上 HTML 输出如下:
使用小写罗马数字编号
<ol type="i">
<li>Introduction</li>
<li>List of Greivances</li>
<li>Conclusion</li>
</ol>
以上 HTML 输出如下:
使用 start 属性
<p>Finishing places of contestants not in the winners’ circle:</p>
<ol start="4">
<li>Speedwalk Stu</li>
<li>Saunterin’ Sam</li>
<li>Slowpoke Rodriguez</li>
</ol>
以上 HTML 输出如下:
嵌套列表
<ol>
<li>first item</li>
<li>second item <!-- closing </li> tag not here! -->
<ol>
<li>second item first subitem</li>
<li>second item second subitem</li>
<li>second item third subitem</li>
</ol>
</li> <!-- Here's the closing </li> tag -->
<li>third item</li>
</ol>
以上 HTML 输出如下:
嵌套有序列表和无序列表
<ol>
<li>first item</li>
<li>second item <!-- closing </li> tag not here! -->
<ul>
<li>second item first subitem</li>
<li>second item second subitem</li>
<li>second item third subitem</li>
</ul>
</li> <!-- Here's the closing </li> tag -->
<li>third item</li>
</ol>
以上 HTML 输出如下:
规范
规范 | 状态 | 备注 |
---|---|---|
HTML Living Standard <ol> | Living Standard | No change since last W3C snapshot, HTML5. |
HTML5 HTMLOListElement | Recommendation | Added reversed and start attributed; un-deprecated type |
HTML 4.01 Specification <ol> | Recommendation | Deprecated compact and type . |
浏览器兼容性
BCD tables only load in the browser
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.相关
- 其他列表相关的 HTML 元素:
<ul>
,<li>
,<menu>
and the obsolete<dir>
; - 对
<ol>
元素常用的 CSS 属性:- the
list-style
属性, 有用的选择序数的显示方式, - CSS计数器, 用于处理复杂的嵌套列表,
line-height
属性,可以模拟过时的compact
属性;margin
属性,用来控制列表的缩进。
- the
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论