试一试
<ol>
<li>Mix flour, baking powder, sugar, and salt.</li>
<li>In another bowl, mix eggs, milk, and oil.</li>
<li>Stir both mixtures together.</li>
<li>Fill muffin tray 3/4 full.</li>
<li>Bake for 20 minutes.</li>
</ol>
li {
font:
1rem "Fira Sans",
sans-serif;
margin-bottom: 0.5rem;
}
属性
此元素也接受全局属性。
compact已弃用 非标准-
这个布尔属性暗示列表应以紧凑的样式呈现。对此属性的解释取决于浏览器。请改用 CSS：要实现与
compact属性类似的效果，可以使用 CSS 属性line-height并将其值设置为80%。 reversed-
这个布尔属性指定列表中的项目是反向排序的。项目将从高到低编号。
start-
一个整数，用于指定列表项从哪个数字开始计数。它始终是阿拉伯数字（1、2、3 等），即使编号
type是字母或罗马数字。例如，要从字母“d”或罗马数字“iv”开始编号，请使用start="4"。 type-
设置编号类型
a表示小写字母A表示大写字母i表示小写罗马数字I表示大写罗马数字1表示数字（默认值）
指定的类型将用于整个列表，除非在嵌套的
<li>元素上使用了不同的type属性。注意：除非列表编号的类型很重要（例如在法律或技术文档中，项目会通过其编号/字母被引用），否则应改用 CSS 的
list-style-type属性。
用法说明
通常，有序列表项会显示一个前置的标记，例如数字或字母。
<ol> 和 <ul>（或其同义词 <menu>）元素可以根据需要任意深度地嵌套，并在 <ol>、<ul>（或 <menu>）之间交替使用。
<ol> 和 <ul> 元素都表示一个项目列表。区别在于 <ol> 元素的顺序是有意义的。例如：
- 食谱中的步骤
- 分步导航指示
- 营养信息标签上按含量递减排列的成分列表
要确定使用哪种列表，可以尝试更改列表项的顺序；如果含义改变了，就使用 <ol> 元素——否则你可以使用 <ul>，或者如果你的列表是菜单，则使用 <menu>。
示例
基本示例
html
<ol>
<li>Fee</li>
<li>Fi</li>
<li>Fo</li>
<li>Fum</li>
</ol>
结果
使用罗马数字类型
html
<ol type="i">
<li>Introduction</li>
<li>List of Grievances</li>
<li>Conclusion</li>
</ol>
结果
使用 start 属性
html
<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 is 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 is 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 # the-ol-element |
浏览器兼容性
加载中…
另见
- 其他与列表相关的 HTML 元素：
<ul>、<li>、<menu> - 可能对
<ol>元素样式设置特别有用的 CSS 属性：list-style属性，用于选择序号的显示方式。- CSS 计数器，用于处理复杂的嵌套列表。
line-height属性，用于模拟已弃用的compact属性。margin属性，用于控制列表的缩进。