在 HTML 中建立巢狀列表

我們將介紹在 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 中正確地編寫巢狀列表。