2.2 列表元素

把相關內容用列表的形式展示，可以使內容顯得更加有條理性。HTML5提供了3種列表模式，即無序列表、有序列表和定義列表。本節主要介紹對應的三種列表元素。

2.2.1 無序列表元素ul

無序列表中每項的前綴都顯示一個項目符號（如●、○等符號）。用﹤ul﹥標簽定義無序列表，用﹤li﹥定義列表項。﹤ul﹥標簽支持全局標準屬性和全局事件屬性。定義無序列表元素的格式為：

﹤/ul﹥

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

HTML5推薦用CSS樣式來定義列表的類型。

【例2-5】 無序列表示例。本例文件2-5.html在瀏覽器中的顯示效果如圖2-5所示。

2.2.2 有序列表元素ol

有序列表的前綴通常為序號標志（如數字、字母等），通過帶序號的列表可以更清楚地表達信息的順序。使用﹤ol﹥標簽可以建立有序列表，表項的標簽仍為﹤li﹥。定義有序列表元素的格式為：

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

HTML5推薦使用樣式表CSS改變有序列表中的序號類型。

【例2-6】 有序列表示例。本例文件2-6.html在瀏覽器中的顯示效果如圖2-6所示。

2.2.3 定義列表元素dl

定義列表又稱為釋義列表或字典列表，用﹤dl﹥標簽定義。它的內容不僅僅是一列項目，而是項目及其注釋的組合。定義列表的內部可以有多個列表項標題，每個列表項標題用﹤dt﹥標簽定義，列表項標題內部又可以有多個列表項描述，用﹤dd﹥標簽定義。定義列表元素的格式為：

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

【例2-7】 使用列表顯示高分電影排行榜。本例文件2-7.html在瀏覽器中的顯示效果如圖2-7所示。

在上面的示例中，﹤dl﹥列表中每一項的名稱用﹤dt﹥標簽，后面跟由﹤dd﹥標簽標記的條目定義或解釋。默認情況下，瀏覽器在左邊界顯示條目的名稱，并在下一行縮進顯示其定義或解釋。

2.2.4 嵌套列表

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

【例2-8】在無序列表中嵌套無序列表、有序列表和定義列表。本例文件2-8.html在瀏覽器中的顯示效果如圖2-8所示。