有序列表使用 <ol>
(ordered list)标签创建,其中包含 <li>
(list item)标签表示列表项。编号自动生成,从 1 开始。
语法:
<ol>
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
</ol>
2. 自定义编号
要自定义编号类型,使用 type
属性。支持以下类型:
- 1:数字(默认)
- a:小写字母
- A:大写字母
- i:小写罗马数字
- I:大写罗马数字
语法:
<ol type="a">
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
</ol>
3. 自定义编号起点
使用 start
属性可自定义编号起点。
语法:
<ol start="3">
<li>项目 3</li>
<li>项目 4</li>
<li>项目 5</li>
</ol>
4. 嵌套列表
列表可以嵌套,使用 <ul>
(unordered list)或 <ol>
标签创建。
语法:
<ul>
<li>列表项 1
<ol>
<li>子列表项 1</li>
<li>子列表项 2</li>
</ol>
</li>
<li>列表项 2</li>
</ul>
5. 样式
有序列表的样式可以使用 CSS 样式表控制。一些常用的样式属性包括:
list-style-type
:设置编号类型list-style-position
:设置编号的位置(inside 或 outside)list-style-image
:使用图像作为编号padding-left
:设置编号和文本之间的间距
6. 辅助功能
为了改善辅助功能,使用 aria-label
或 aria-labelledby
属性为有序列表提供描述性文本。
语法:
<ol aria-label="产品功能">
<li>功能 1</li>
<li>功能 2</li>
</ol>
7. 浏览器兼容性
有序列表在所有主要浏览器中均获得广泛支持。但是,在自定义编号时,不同的浏览器可能存在细微的兼容性差异。
8. 用途
有序列表通常用于表示步骤、步骤或序列。例如:
- 步骤说明
- 购物清单
- 任务列表
- 优先级等级