2.5 列表元素

列表是以結構化、易讀性的方式提供信息的方法。列表不但使用戶可以方便地查找重要的信息，而且使文檔結構更加清晰明了。在制作網頁時，列表經常用于寫提綱和品種說明書。通過列表標簽的使用能使這些內容在網頁中條理清晰、層次分明、格式美觀地表現出來。本節將重點介紹列表元素的使用。列表按形式主要分為：無序列表、有序列表、定義列表以及嵌套列表等。

2.5.1 無序列表

無序列表就是列表中列表項的前導符號沒有一定的次序，而是用黑點、圓圈、方框等一些特殊符號標識。無序列表使列表項的結構更清晰，更合理。

當創建一個無序列表時，主要使用HTML的<ul>標簽和<li>標簽來標記。其中，<ul>標簽標識一個無序列表的開始；<li>標簽標識一個無序列表項。無序列表標簽的格式如下。

從瀏覽器上看，無序列表的特點是列表作為一個整體，與上下文本段間各有一行空白；列表項向右縮進并左對齊，每行前面有項目符號。

【例2-12】 使用無序列表顯示愛心樂園的文章分類。本例在瀏覽器中的顯示效果如圖2-12所示。

2.5.2 有序列表

有序列表是一個有特定順序的列表項的集合。在有序列表中，各個列表項有先后順序之分，因此以編號來標記各列表項。使用<ol>標簽可以創建有序列表，列表項的標簽仍為<li>。有序列表標簽的格式如下。

在瀏覽器中顯示時，有序列表中整個列表與上下文本段之間各有一行空白；列表項向右縮進并左對齊；各列表項前帶順序號。

【例2-13】使用有序列表顯示愛心學堂注冊步驟。本例在瀏覽器的顯示效果如圖2-13所示。

2.5.3 定義列表

定義列表又稱為釋義列表或字典列表，定義列表不是帶有前導字符的列項目，而是一系列術語以及與其相關的解釋。當創建一個定義列表時，主要用到3個HTML標簽：<dl>標簽、<dt>標簽和<dd>標簽。定義列表標簽的格式如下。

在<dl>、<dt>和<dd>3個標簽的組合中，<dt>是標題，<dd>是內容，<dl>可以看作承載標題和內容的容器。當出現多組這樣的標簽組合時，應盡量使用一個<dt>標簽搭配一個<dd>標簽的方法。如果<dd>標簽中內容很多，可以嵌套<p>標簽使用。

【例2-14】 使用定義列表顯示愛心學堂聯系方式。本例在瀏覽器中的顯示效果如圖2-14所示。

【說明】在本例中，<dl>列表中每一個列表項的名稱不再用<li>標簽，而是用<dt>標簽進行標記，后面跟著由<dd>標簽標記的條目定義或解釋。默認情況下，瀏覽器一般會在左邊界顯示條目的名稱，并在下一行以縮進形式顯示其定義或解釋。

2.5.4 嵌套列表

嵌套列表就是無序列表與有序列表嵌套混合使用。嵌套列表可以把頁面分為多個層次，給人以層次感。有序列表和無序列表不僅可以自身嵌套，而且可以彼此互相嵌套。嵌套方式可分為：無序列表中嵌套無序列表、有序列表中嵌套有序列表、無序列表中嵌套有序列表、有序列表中嵌套無序列表等方式，讀者需要靈活掌握。

【例2-15】制作愛心樂園頁面。本例在瀏覽器中的顯示效果如圖2-15所示。