在 HTML 中建立巢狀列表

Subodh Poudel 2023年2月19日 2022年1月2日
在 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 標籤內寫入文字 DogsCatsHamsters,如下例所示。

在第一個 li 標籤內,建立一個 ul 標籤。在 ul 標籤內建立兩個 li 標籤,並將列表項寫為 Siberian HuskyGerman 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 中正確地編寫巢狀列表。

Subodh Poudel avatar Subodh Poudel avatar

Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.

LinkedIn