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