迹忆客 专注技术分享

我们将介绍在 HTML 中创建嵌套列表的正确方法。

在 HTML 中创建嵌套列表

我们可以创建一个带有 ol 标签的有序列表和一个带有 ul 标签的无序列表。在这些标签中，我们使用 li 标签来创建项目列表。

有时我们必须在另一个项目列表中制作一个项目列表。这种列表结构称为嵌套列表，在本文中，我们将探讨编写嵌套列表的正确方法。

无序列表的结构如下。

<ul>
 <li> Item 1 </li>
 <li> Item 2 </li>
 <li> Item 3 </li> 
</ul> 

假设我们必须在 Item 1 下添加一些列表项。在这种情况下，我们应该在特定的 li 标签内使用 ul 标签。然后，我们可以使用 li 标签在 ul 标签内写入项目列表。

例如，创建一个 ul 标签，并在 ul 标签内创建三个 li 标签。在 li 标签内写入文本 Dogs、Cats 和 Hamsters，如下例所示。

在第一个 li 标签内，创建一个 ul 标签。在 ul 标签内创建两个 li 标签，并将列表项写为 Siberian Husky 和 German Shepherd。

这是在 HTML 中编写嵌套列表的正确方法。

示例代码：

<ul>
 <li> Dogs 
 <ul>
 <li> Siberian Husky </li>
 <li> German Shepherd </li>
 </ul> 
 </li>
 
 <li> Cats </li>
 <li> Hamster </li> 
</ul> 

在创建嵌套列表时，我们应该避免在关闭 li 标签后编写嵌套的 ul 标签。这种做法不涉及任何嵌套列表。

编写嵌套列表的错误做法如下所示。

<ul>
 <li> Dogs </li>
 <ul>
 <li> Siberian Husky </li>
 <li> German Shepherd </li>
 </ul> 
 <li> Cats </li>
 <li> Hamsters </li> 
</ul> 

在编写子列表之前，我们已经关闭了 Dog 项目列表的 li 标签。然后，我们创建了一个 ul 标签来添加子列表。

尽管在上面的两个示例中结果看起来相同，但我们应该遵循第一种方法。我们应该确保 ul 标签是它所属的 li 标签的子标签。

因此，我们可以在 HTML 中正确地编写嵌套列表。