HTML 列表

HTML 列表是用于以有序且视觉吸引人的方式在网页上排列相似项目的基本构建块。列表可增强可读性、可访问性和内容组织。HTML 支持三种主要的列表类型：

• 有序列表（<ol>）- 列表中按数字或字母顺序排列的项目。
• 无序列表（<ul>）- 不具有自然顺序的带项目符号的项目。
• 定义列表（<dl>）- 术语-描述关联，如词汇表或字典。

HTML 中的列表也可以是嵌套的，也就是说，一个列表可以包含在另一个列表中。

1. HTML 有序列表（编号列表）

有序列表是按特定顺序显示项目的列表，通常使用数字、字母或罗马数字。它以 <ol> 标签开始，每个列表项都包含在 <li> 标签中。

语法

输出

1. Aries
2. Bingo
3. Leo
4. Oracle

<ol> 的属性

<ol> 属性示例

输出

C. HTML
B. CSS
A. JS

说明

Type = A 表示列表中使用大写字母，start = 3 指定列表从 C 开始，并且列表以相反的顺序打印。

2. HTML 无序列表（项目符号列表）

无序列表最适合用于不需要排序的项目。它以 <ul> 标签开始，每个列表项再次包含在 <li> 标签中。项目的默认标记为黑色圆点。

语法

输出

• Aries
• Bingo
• Leo
• Oracle

输出

Grocery List
• Bread
• Eggs
• Milk
• Coffee

<ul> 的属性

3. HTML 定义列表（术语列表）

当需要呈现术语列表及其定义时，可以使用定义列表（<dl>）。它通常用作词汇表、常见问题解答或键值对。

结构

<dl>：定义列表容器

<dt>：定义术语（名称）

<dd>：定义描述（详细信息）

输出

白羊座

- 十二星座之一。

宾果

- 我晚上的一种零食

狮子座

- 也是十二星座之一。

Oracle

- 这是一家跨国技术公司。

4. HTML 嵌套列表

嵌套列表是包含在列表中的列表。当需要表示分层或分组信息（如主题和子主题）时，它们特别有用。

输出

1. 德里
   • 新德里
2. 哈里亚纳邦
   • 昌迪加尔
3. 古吉拉特邦
   • 甘地讷格尔
4. 拉贾斯坦邦
   • 斋浦尔
5. 马哈拉施特拉邦
   • 孟买
6. 北方邦
   • 勒克瑙

您可以嵌套 <ul> 和 <ol> 以创建自定义列表结构。

HTML 列表标签摘要

HTML 列表最佳实践

在处理 HTML 列表时，应遵循最佳实践，使其清晰且可访问。为内容应用适当的语义标签，例如，为一系列步骤使用 <ol>，为功能或项目的无序列表使用 <ul>。这种语义正确性不仅有益于可读性，还使您的 HTML 对屏幕阅读器等辅助技术有意义。此外，列表需要组织良好，因为屏幕阅读器就是通过这些格式来阅读和发音给视障用户的。

样式最好使用 CSS 进行，这样可以在项目符号类型、编号、缩进和间距方面进行更多控制，而不会导致代码混乱且 不符合语义的 HTML。不要将列表用作缩进或布局；这会滥用它们的用途。在需要嵌套时，请确保子列表放置在正确的位置，即在 <li> 标签内，以便标记保持有效，并且跨浏览器渲染保持一致。

支持的浏览器

元素	Chrome	IE	Firefox	Opera	Safari
<ol><ul><dl>	是的	是的	是的	是的	是的

结论

以正确的方式使用 HTML 列表可以增强内容的结构、清晰度和可访问性。将正确的列表类型应用于上下文，使用 CSS 进行样式设置，并确保语义和有效的标记，您不仅可以使网页更好用、更易用，还可以确保其功能和严格遵守标准。