当我们构建网页内容时,经常需要展示具有特定顺序的项目。HTML 有序列表正是为此而生,它通过使用 INLINECODE1d5e5f3b 标签来创建,通常以数字或字母顺序显示项目。列表中的每一项都由 INLINECODEee088f82(列表项)标签定义。有序列表广泛应用于操作说明、排名展示以及分步指南中——在超过 60% 的需要清晰顺序格式的结构化网页内容中,我们都能看到它的身影。
在浏览器中,HTML 有序列表会显示为以下形式:
- 项目 a
- 项目 b
- 项目 c
列表的编号会由浏览器自动生成,但我们也可以通过属性和 CSS 来调整编号的样式。
语法:
- 牛奶
- 鸡蛋
- 面包
- 黄油
基础有序列表
index.html
CODEBLOCK_184b4b8c
HTML 有序列表中不同的 type 属性
- 标签的 type 属性允许我们指定想要的列表顺序类型。
描述
—
使用数字列表项目(默认)
使用大写字母列表项目。
使用小写字母列表项目。
使用大写罗马数字列表项目。
使用小写罗马数字列表项目。### 1. 数字有序列表
要在 HTML 中创建带有数字标记的有序列表(这是有序列表的默认行为),我们只需使用
- (有序列表)标签,而无需指定 type 属性。
示例:
index.html
CODEBLOCK_bb08ae81
2. 大写字母有序列表
要在 HTML 中创建使用大写字母作为列表标记的有序列表,我们可以在
- 标签上使用 INLINECODEc1447297 属性并将其设置为 INLINECODE39ada968。
示例:
index.html
CODEBLOCK_53841a50
3. 小写字母有序列表
要在 HTML 中创建使用小写字母作为列表标记的有序列表,我们可以在
- 标签上使用 INLINECODEcaacf463 属性并将其设置为 INLINECODE703d5387。
示例:
index.html
CODEBLOCK_d2baef93
4. 大写罗马数字有序列表
要在 HTML 中创建使用大写罗马数字作为标记的有序列表,我们可以在
- 标签上使用 type 属性并将其设置为 "I"。
示例:
index.html
CODEBLOCK_2bc532ce
5. 小写罗马数字有序列表
要在 HTML 中创建使用小写罗马数字作为标记的有序列表,我们可以在
- 标签上使用 type 属性并将其设置为 "i"。
示例:
index.html
CODEBLOCK_b0e3c01c
HTML 中的反向有序列表
要在 HTML 中创建反向排序的列表,我们可以 使用 ‘INLINECODE39c75f30 属性 在 INLINECODEa1a11d76 标签中。这将使列表从最大数字开始倒数。
示例:
HTML
CODEBLOCK_a38b61e6
关于 HTML 列表嵌套
我们经常需要在列表项中包含另一个列表,这称为列表嵌套。嵌套列表通过在 INLINECODE8e29a835 标签内部放置一个新的 INLINECODE2dcb21f0 或
- (无序列表)来实现。浏览器会自动缩进嵌套的列表,以清晰地显示层级关系。
示例:
index.html
CODEBLOCK_0d90ba4b