HTML 中的 UL 标签

UL 标签

“无序列表”的缩写 <ul> 标签是 HTML 中用于创建列表项顺序无关紧要的列表的关键组成部分。

当列表项的顺序不重要时，并且您希望使用项目符号或其他标记来表示分隔，而不是使用表示具有定义顺序的列表的有序列表（<ol>）时，就会使用无序列表（<ul>）。

目的

• <ul> 标签的主要目的是以非顺序的方式构建和排列内容。
• 它经常用于创建不需要严格顺序的内容，例如项目列表和导航菜单。列表项（<li>）在 <ul> 元素中使用，以定义列表中的每个项。
• 默认情况下，列表项显示为项目符号；但是，这可以使用 CSS 进行更改。

基本语法和结构

语法

无序列表将 <ul> 标签与 <li> 元素结合使用。列表中的一个项目由每个 <li> 元素表示。

以下是如何使用 HTML <ul> 标签创建无序列表的简单示例

此示例通过将三个列表项（<li>）包含在 <ul> 标签中来创建带有项目符号的无序列表，如下所示：

UL 标签的属性

HTML <ul> 标签支持多个属性，可用于修改无序列表的外观和行为。以下是一些常用属性及其结果：

1. type 属性

type 属性描述列表项使用的项目符号或标记。

常见的“disc”（默认实心圆）、“circle”（空心圆）和“square”（实心方块）值都是示例。

示例：此示例使用带有不同值的 type 属性。

输出

2. class 属性

class 属性允许您为 <ul> 元素提供一个 CSS 类，该类可用于使用 CSS 设置列表的样式或定位列表。

示例

输出

在 HTML 中创建嵌套无序列表

您可以通过嵌套无序列表创建分层结构，其中子列表包含在外层列表的某个项中。通过将 <ul>（无序列表）或 <ol>（有序列表）元素插入到 <li>（列表项）元素内来实现此目的。要构建嵌套无序列表，请遵循以下步骤：

• 要开始使用外层无序列表，请打开一个外层 <ul> 元素。
• 在外层列表的 <li> 元素内打开第二个 <ul> 元素，以生成内层无序列表。
• 要指定内层 <ul> 中的项，请添加 <li> 元素。

嵌套无序列表示例

为了演示嵌套无序列表，我们来创建一个简单的示例。考虑创建一个包含每个动物类别的子列表的动物列表。

示例

输出

样式化无序列表

您可以使用 CSS（层叠样式表）为无序列表设置样式，使其在您的网站上看起来符合您的要求。您可以更改许多功能，例如文本属性、列表标记（项目符号）以及项之间的距离。以下是如何使用 CSS 为无序列表设置样式：

1. 更改列表标记（项目符号）

list-style-type 属性允许您更改列表标记的外观。Disc（默认实心圆）、circle（空心圆）、square（实心方块）以及自定义图像都是常见值的示例。

2. 自定义列表标记位置

要更改列表标记的位置，请使用 list-style-position 属性。当设置为 inside 时，标记放置在列表项的 content-box 内部；当设置为 outside（默认值）时，标记在外部。

3. 修改文本属性

通过定位 <ul> 中的 <li> 元素，您可以更改列表项内的文本属性，例如颜色、字体和大小。

4. 间距

使用 margin 或 padding 属性，更改列表项之间的间距。例如，要添加列表项之间的间距：

5. 自定义图像作为列表标记

通过将自定义图像的 URL 包含在 list-style-image 属性中，您可以使用它作为列表标记。

以下是用于样式化无序列表的完整 CSS 代码示例：

输出

网页设计中无序列表的实际应用场景

无序列表（在网页设计中通常简称为“ul”）是灵活的元素，可用于改进网站上内容的组织和呈现方式。无序列表通常在以下实际情况中使用：

1. 站点地图：站点地图或站点索引页面有时使用无序列表来显示网站的整体结构。用户可以更轻松地导航和查找特定内容或部分。
2. 网站导航菜单：无序列表通常用于网站导航菜单。列表项内的链接允许导航到站点的不同部分，每个列表项（li>）都充当菜单项。
3. 项目符号列表：当以项目符号形式显示内容时，无序列表是最佳选择。这通常用于网站的功能、优势、要点或常见问题解答。
4. 链接：无序列表可用于构建相似链接的列表，例如社交网络链接、资源链接或相关文章的链接。
5. 内容组织：无序列表有助于在网页上组织和安排内容。它们可用于对相关对象或信息进行分组。

支持的浏览器

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