HTML 无序列表

HTML 无序列表，或者许多人称之为项目符号列表，是 HTML 的基本功能之一，它使您能够在不建议任何特定顺序的情况下组织相似的项目。这些在网页中很受欢迎，它们用于显示菜单、功能集、分组信息等。

什么是 HTML 中的无序列表？

在 HTML 中，无序列表是通过使用 <ul> 标签创建的。每个列表项都包含在 <li> (列表项) 标签中。浏览器默认以项目符号形式显示无序列表。

语法

输出

•	Item 1
•	Item 2

这种结构简单有效，可用于呈现非顺序数据。

使用 CSS 设置列表标记样式

HTML 中的列表默认显示为项目符号，我们可以使用 CSS 中的 list-style-type 属性来更改项目符号。这些是您通常可以选择的值

1. Disc (默认)

输出

•	Coffee
•	Tea
•	Milk

2. Circle

输出

◦ HTML
◦ CSS
◦ JavaScript

3. Square

输出

■ HTML
■ CSS
■ React

4. none

输出

(no bullets)
HTML
CSS
JavaScript

注意： HTML5 版本不支持 <ul> 中的 type 属性。而是使用 CSS 中的 list-style-type。

嵌套无序列表

HTML 无序列表可以嵌套，允许列表出现在列表项中。这在呈现分层数据时非常有用。

输出

•	Programming Languages
o	HTML
o	CSS
•	Tools

您可以根据需要嵌套列表到任何级别，但可读性必须始终被考虑在内。

水平无序列表 (菜单)

CSS 允许将无序列表格式化为水平显示。这种结构通常用于导航菜单。

输出

//Horizontal nav menu with hover effect.

使用无序列表进行导航

无序列表的另一个广泛应用是 Web 导航。这些列表不需要有特定的顺序，因此 <ul> 在语义上是可访问的。

简单的内联导航示例

输出

//Horizontal text-based menu.

可访问性和语义

无序列表不仅仅是视觉上对项目进行分组，而且还为屏幕阅读器和其他辅助技术提供了语义含义。这使用户能够依赖这些工具来理解分组列表项之间的关系。

可访问列表的技巧

• 对于不需要排序的项目使用 <ul>，当顺序很重要时，则使用 <ol>。
• 确保每个 <li> 都包含有意义的内容。
• 如果存在链接，请使锚文本具有描述性。
• 不要让列表太深；它们可能会让屏幕阅读器感到困惑。

样式技巧和窍门

除了项目符号类型的更改外，通过将其他 CSS 技术应用于无序列表，还可以对其布局和设计进行进一步的改进。

使用图片自定义项目符号:

响应式菜单：通过使用 flexbox 或 grid 以及 <ul> 和 <li> 可以实现响应式水平/垂直菜单。

间距和填充：调整 <ul> 的 padding-left 和 <li> 的 margin 以获得清晰的间距。

根据需要填充 <ul> 和 <li> 以进行整理，并为 li 设置 margin 和为 <ul> 设置 padding-left。

使用无序列表的最佳实践

这些自定义使我们能够使用无序列表来适应当今的 Web 设计，而不会牺牲语义。无序列表最合适的应用是导航菜单、功能列表或分组信息。而不是使用 type 等已弃用的 HTML 属性，CSS 的 list-style-type 属性提供了灵活的值来指定项目符号类型，例如 circle、square 或将其移除以获得更简洁的设计。

使用嵌套无序列表可以更容易地组织复杂或分层的无序列表，尽管在其他时间，应避免嵌套无序列表以创建结构和易于理解的结构。

根据可访问性原则，每个包含链接的列表项都应使用描述性的锚文本。此外，在创建包括导航栏在内的水平列表时，请使用 CSS 媒体查询使其具有移动响应性。此实践将确保跨所有大小和设备的连续用户体验。

浏览器兼容性

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

结论

当需要以某种列表形式呈现项目，但又不需要任何顺序时，HTML 无序列表 (<ul>) 非常有用。任何内容都包含在 <li> 标签中，并使用 list-style-type 属性进行格式化。如果您正在使用项目符号列表或构建下拉菜单，或设计 导航栏，<ul> 是您的首选标签。采用嵌套和 CSS 样式约定来创建结构化、可访问且美观的内容。