HTML li

在 HTML 中，li 是用于创建列表的列表标签。本文将讨论 HTML <li> 标签。

在开始制作网页时，有时您会遇到需要列出一些要点的情况。也许您需要在某些段落下添加一些要点，例如市场上可用的笔记本电脑型号、撰写最佳交互式内容的 10 个技巧、软件工程职业生涯的 5 大课程等等。对于上述所有用途，您都可以使用 HTML 中的 <li> 标签。让我们来仔细理解 <li> 标签。

<li> 标签

它在 HTML 中定义列表项。它是一个块级元素，占据全部宽度并从新行开始。

语法

在上面提供的语法中，<li> 是开始标签，</li> 是结束标签。列表项的名称写在 HTML 列表元素的开始和结束标签之间。

<li> 标签写在三种不同类型的列表中，这意味着 HTML 中有 3 种类型的列表，如下所示：

1. 无序列表/非编号列表/项目符号列表
2. 有序列表/编号列表
3. 定义列表/描述列表

我们将逐一理解所有这 3 种类型的列表。

1. 无序列表

无序列表也称为非编号列表或项目符号列表。列表项前不使用数字，而是使用圆圈、实心圆、方块和无等符号。

语法

在上面提供的语法中，<ul> 是无序列表的开始标签，</ul> 是无序列表的结束标签。<li> 标签包含每个列表项，并用于 <ul> 标签内。无序列表包含一个名为 "type" 的属性，其默认值为 disc，即实心圆。

在无序列表中，"type" 属性还有许多其他值，我们可以根据自己的选择定义这些值来创建符号，这些值是 circle、disc、square 和 none。这些 "type" 属性的值在下表中定义：

演示 1

在此演示中，我们将展示无序列表的用法。

代码

输出

我们可以在列表项前面看到实心圆符号。

演示 2

此演示将展示使用 "type" 属性的无序列表中的符号。

代码

输出

在下面的输出中，我们可以看到 4 种不同类型的无序列表。

2. 有序列表

有序列表也称为编号列表。它是一种使用数字显示列表项的列表。

语法

在上面提供的语法中，<ol> 是有序列表的开始标签，</ol> 是结束标签。<li> 标签在 <ul> 标签内使用。有序列表有一个名为 "type" 的属性，其默认值为 1。有序列表中的 "type" 属性有多种值，例如 "1"、"I"、"i"、"A" 和 "a"。这些 "type" 属性的值在下表中定义：

我们可以在有序列表中使用更多属性，例如 "reversed" 属性，用于反转列表顺序；以及 "start" 属性，用于定义列表的起始值。

演示 1

在此演示中，我们将使用 <ol> 标签来构建有序列表。

代码

输出

我们可以看到每个列表项前面都有类型 "1" 的数字。

演示 2

在此演示中，我们将展示各种类型的有序列表。

代码

输出

在各种有序列表中，我们可以看到不同类型的数字。

演示 3

此演示将展示使用 "reversed" 和 "start" 属性的有序列表。

代码

输出

我们可以看到一个反向排序的列表和一个从 101 开始的列表。

3. 定义列表

定义列表也称为描述列表。它是一种用于描述术语的列表。定义此列表使用的三个标签如下：

• <dl> 标签：用于定义列表。
• <dt> 标签：用于定义术语。它写在 <dl> 标签内。
• <dd> 标签：用于定义术语的描述。它也写在 <dl> 标签内。

语法

在上面提供的语法中，<dl> 是定义列表的开始标签，</dl> 是定义列表的结束标签。<dt> 是术语的开始标签，</dt> 是术语的结束标签。<dd> 是术语定义的开始标签，</dd> 是术语定义的结束标签。

演示 1

在此演示中，我们将展示如何构建定义列表。

代码

输出

在所示的输出中，我们可以看到定义列表。

演示 2

我们将展示定义列表的另一个示例。

代码

输出

在下面的输出中，我们可以看到定义列表。

嵌套列表

一个列表可以放在另一个列表里面，即一个列表在其下。因此，它被称为嵌套列表。

嵌套列表有两种类型，如下所示：

1. 嵌套无序列表
2. 嵌套有序列表

让我们通过示例来理解这两种嵌套列表。

1. 嵌套无序列表

当使用符号创建嵌套列表时，它被称为嵌套无序列表。

演示 1

在此演示中，我们将展示嵌套无序列表。

代码

输出

在下面的输出中，我们可以看到嵌套无序列表。

演示 2

在此演示中，我们将在一个无序列表下构建另一个无序列表。

代码

输出

在下面的输出中，我们可以看到一个无序列表在其下有另一个无序列表。

2. 嵌套有序列表

当使用符号创建嵌套列表时，它被称为嵌套无序列表。

演示 1

在此演示中，我们将展示嵌套有序列表。

代码

输出

在下面的输出中，我们可以看到嵌套有序列表。

演示 2

在此演示中，我们将构建一个有序列表在其下有另一个有序列表，即嵌套有序列表。

代码

输出

在下面的输出中，我们可以看到一个有序列表在其下有另一个有序列表。

浏览器兼容性

以下是支持 <li>、<ol>、<ul>、<dl>、<dt> 和 <dd> 标签的浏览器

• 谷歌浏览器
• 火狐
• Internet Explorer
• Opera
• Safari

结论

我们在本文中已掌握 HTML <li> 标签。以下是我们上面讨论过的要点：

• <li> 是用于创建列表的列表标签。
• 有 3 种类型的列表：有序、无序和定义。
• 有序列表是编号列表，用于在列表项前添加数字。在 HTML 中用 <ol> 标签表示。
• 无序列表是项目符号列表，用于在列表项前添加符号。在 HTML 中用 <ul> 标签表示。
• 定义列表用于定义列表的术语。在 HTML 中用 <dl> 标签表示。
• 定义列表中有三个标签：<dl> 用于创建定义列表，<dt> 用于编写术语，<dd> 用于定义术语。
• 嵌套列表是创建在另一个列表之下的列表。
• 嵌套列表有 2 种类型：嵌套有序列表和嵌套无序列表。
• 嵌套有序列表是使用数字创建嵌套列表的列表。
• 嵌套无序列表是使用符号创建嵌套列表的列表。