HTML 中的有序列表与无序列表

2025年3月17日 | 阅读 8 分钟

有序列表

HTML 中的有序列表是指按照预定义顺序或渐进顺序显示一系列元素的列表。它使用 `

有序列表的基本语法如下：

<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<!-- Additional list items can be added as needed -->
</ol>

每个 `< li>` 元素代表有序列表中的一个特定项，而 `

有序列表有时用于项目顺序或分组很重要的情况，例如分步说明、排名或按顺序或渐进方式呈现数据。

以下是构建 HTML 有序列表所需的元素和属性。

1. 元素： 在 HTML 中，`

2. `< li>`： `< li>`（列表项）元素代表有序列表中的单个项目。每个 `< li>` 元素中都包含列表项的内容。

3. `

` 的属性

- `type` 属性

决定列表项使用的编号或标记的类型。可能的值有：“1”（默认的阿拉伯数字）、“A”（大写字母）、“a”（小写字母）、“I”（大写罗马数字）和“i”（小写罗马数字）。

- `start` 属性

设置有序列表的起始值。它允许您从特定位置开始编号。

. 嵌套有序列表

您还可以嵌套有序列表来表示信息的层级结构。

好处

i) 顺序表示

有序列表非常适合表示需要按精确顺序或分组显示的顺序数据。这对于说明、流程或其他要素顺序很重要的材料特别有用。

ii) 提高可读性

列表项的自动编号或编号可以提高所提供信息的阅读性和理解性。用户可以轻松地遵循分步过程或浏览有序的项目列表。

iii) 清晰的层级结构

有序列表支持嵌套，允许您创建清晰的信息层级结构。当以子步骤或类别呈现信息时，这非常有用，因为它提供了一个有助于理解的视觉框架。

iv) 样式和自定义

使用有序列表，开发人员可以应用 CSS 样式并更改列表项的外观，例如编号或字体样式。通过这种灵活性，设计人员可以将列表的视觉样式与主页的整体设计相匹配。

v) 可访问性

屏幕阅读器和其他辅助设备可以解析有序列表，使内容对残疾人士更加可访问。顺序编号或编号为读者提供了上下文，并帮助他们理解内容的排列。

局限性

i) 线性结构

有序列表具有线性结构，表示一系列项目。这可能不适用于没有清晰顺序或层级结构的内容。在这种情况下，无序列表或其他 HTML 结构可能更合适。

ii) 有限的样式选项

有序列表的默认样式（数字或字母）可能并不总是与网站所需的视觉设计一致。CSS 允许进行一些自定义，尽管与其他 HTML 元素相比，样式设置的程度是有限的。

iii) 不适用于所有类型的信息。

在某些情况下，顺序编号可能不是传达信息的最佳方式。使用无序列表、段落或其他 HTML 元素可能更适合无序或非顺序文本。

iv) 语义限制

虽然有序列表包含有关序列的语义信息，但它们并不表达元素之间关系的具体性质。对于更复杂的层级结构或关系，开发人员可能需要使用更多 HTML 元素或研究替代方法。

v) 屏幕阅读器的开销

屏幕阅读器在播报过多列表项时可能会增加额外开销，尤其是在编号策略复杂的情况下。这会影响依赖辅助技术的用户的用户体验。

示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ordered List Example</title>
</head>
<body>
<h2>Steps to Make a Sandwich</h2>
<ol>
<li>Gather ingredients</li>
<li>Spread mayo on bread slices</li>
<li>Add lettuce and tomatoes</li>
<li>Place your choice of protein (e.g., turkey, ham)</li>
<li>Top with another slice of bread</li>
<li>Cut the sandwich in half</li>
<li>Enjoy your sandwich!</li>
</ol>
</body>
</html>

输出

应用

1. 有序列表 (`

`)：

有序列表非常适合显示分步说明或流程信息，例如食谱、教程或组装手册。

2. 顺序信息

使用有序列表来精确呈现信息，例如历史时间线或按时间顺序发生的事件。

3. 排名或优先级

有序列表可以呈现排序或优先排序的数据，例如热门项目、最佳实践或优先级任务。

无序列表

在 HTML 中，无序列表是一种用于表示一系列元素列表的方法，这些元素的顺序并不重要。列表中的每个项目通常前面都会有一个列表标记、一个实心圆、一个空心圆或一个不表示特定顺序的图像。在 HTML 中，`

`（列表项）元素表示单个列表项。

以下是构建 HTML 无序列表所涉及的元素和属性的完整描述。

1. 元素：在 HTML 中，`

` 元素，每个元素代表一个特定的项目。与有序列表不同，无序列表没有固定的顺序，并且元素通常使用列表项进行显示。
2. `
` `
` 元素代表无序列表中的单个项目。每个 `

` 元素包含一个列表项的内容。

3. `

` 的属性

`type` 属性

确定列表项使用的标记类型。可能的选项有：“盘”（默认的实心圆）、“圆”（空心圆）和“方”（实心方块）。值得注意的是，可以使用 CSS 修改浏览器对这些标记的默认样式。

4. 嵌套无序列表：无序列表，就像有序列表一样，可以嵌套以创建多层结构。

使用 HTML 无序列表的优点

i) 提高可读性

在无序列表中使用项目符号或其他标记，通过视觉区分各个项目来提高内容的可读性。

ii) 易于理解

无序列表简单明了，是传达项目集合的便捷方式，而无需特定的顺序。

iii) 样式选项

可以使用 CSS 更改标记的外观，允许开发人员将列表的视觉样式与网页的整体设计相匹配。

iv) 灵活呈现

无序列表很灵活，可以用来显示信息，如果项目的顺序不重要的话。这使得它们适用于各种内容类别。

v) 可访问性

屏幕阅读器和其他辅助技术可以解析无序列表，为残障人士提供更易于访问的体验。

HTML 中无序列表的限制

i) 缺乏顺序信息。

无序列表不适用于描述遵循特定顺序或排列的信息。如果顺序很重要，请使用有序列表。

ii) 有限的样式选项

无序列表标记可以一定程度上进行装饰，但与其他 HTML 元素相比，自定义程度有限。

iii) 视觉单调

当需要更具视觉独特性或自定义标记时，无序列表可能显得单调。

iv) 不适用于说明

对于需要清晰顺序的分步说明或流程，无序列表可能不是最佳选择。

v) 屏幕阅读器的开销

与有序列表一样，过长的无序列表会给屏幕阅读器带来显着的开销，从而损害依赖辅助技术的用户的用户体验。

示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Unordered List Example</title>
</head>
<body>

<h2>Shopping List</h2>

<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Milk</li>
<li>Bread</li>
<li>Cheese</li>
<li>Eggs</li>
</ul>

</body>
</html>

代码

说明

无序列表示例显示了一个简单的购物列表，每个项目都用项目符号标记。您可以随意将这些示例重新排序到单独的 HTML 文档中，以查看它们在浏览器中的外观。

应用

1. 项目列表是无序列表 (`

非常适合呈现一组功能、优势或属性，而这些项目的顺序无关紧要。

2. 导航菜单

使用无序列表来创建导航菜单，提供清晰有组织的网站导航系统。

3. 特色亮点

无序列表非常适合突出产品、服务或优惠的重要方面。

注意事项

i) 内容性质：考虑信息是否遵循预定义的顺序或层级结构。如果顺序很重要，请使用有序列表；否则，请使用无序列表。

ii) 视觉设计：考虑您的网站设计偏好和样式要求。这两种样式都可以定制以补充整体设计。

iii) 可访问性：有序列表和无序列表都是可访问的，但请评估内容上下文以及辅助设备用户是否需要顺序信息。

iv) 评估材料的可读性：有序列表提供清晰的顺序，而无序列表提供更灵活、更具视觉特色的表示。

以下是 HTML 中有序列表与无序列表的区别

方面	有序列表	无序列表
语法	- ` `	- ` `
显示样式	- 以数字顺序（1, 2, 3,...）显示项目。	- 使用项目符号或其他指示符显示对象。
默认标记	- 数字（1, 2, 3 等）。	- 项目符号（•, ?, *, -）或其他指定标记
定制	- 可以使用 CSS 进行调整，以实现其他编号样式或标记。	- 可以使用 CSS 自定义各种标记样式。
语义含义	- 当顺序或排列至关重要时很有用，例如在流程或排名中。	- 适用于顺序不重要的项目，例如项目或选项列表。
属性	- ` 第一个项目第二个项目 `	- ` 项目 1 项目 2 `
嵌套	- 列表可以相互嵌套。	- 列表可以相互嵌套。
用例	- 最适合以特定顺序或层级结构显示信息	- 适用于呈现没有预定义顺序的信息。
示例	- 1. 第一个项目 2. 第二个项目 3. 第三个项目	- • 项目 1 • 项目 2 • 项目 3

结论

在 HTML 中，材料的性质和所需的显示会影响有序列表和无序列表之间的选择。有序列表（`'

下一个主题使用 Beautifulsoup 删除 HTML 标签

HTML 中的有序列表与无序列表

有序列表

好处

局限性

示例

应用

无序列表

使用 HTML 无序列表的优点

HTML 中无序列表的限制

示例

应用

注意事项

以下是 HTML 中有序列表与无序列表的区别

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

HTML 中的有序列表与无序列表

有序列表

好处

局限性

示例

应用

无序列表

使用 HTML 无序列表的优点

HTML 中无序列表的限制

示例

应用

注意事项

以下是 HTML 中有序列表与无序列表的区别

结论

相关帖子

HTML 结构

HTML 清洁器

HTML 深色模式样式

HTML 中的 Get 和 Post 方法

如何将 Word 转换为 HTML

HTML 扩展名

HTML 副标题

HTML 秒表

如何将 HTML 转换为 PDF

HTML CSS 初学者项目

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器