2.2 列表

在制作網頁時，寫提綱和或品種說明書經常用到列表。通過列表標記的使用能使這些內容在網頁中條理清晰、層次分明、格式美觀地表現出來。本節將重點介紹列表標簽的使用。

列表的存在形式主要分為無序列表、有序列表、定義列表以及嵌套列表等。

2.2.1 無序列表

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

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

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

＜ul＞標簽的type屬性用來定義一個無序列表的前導字符，如果省略了type屬性，瀏覽器會默認顯示為“disc”前導字符。type取值可以為disc（實心圓）、circle（空心圓）、square（方框）。設置type屬性的方法有以下兩種。

1．在＜ul＞后指定符號的樣式

在＜ul＞后指定符號的樣式，可設定直到＜/ul＞的加重符號。例如：

＜ul type="disc"＞ 符號為實心圓點●

＜ul type="circle"＞ 符號為空心圓點〇

＜ul type="square"＞ 符號為方塊■

＜ul imgsrc="mygraph.gif"＞ 符號為指定的圖片文件

2．在＜li＞后指定符號的樣式

在＜li＞后指定符號的樣式，可以設置從該＜li＞起直到＜/ul＞的項目符號。格式就是將前面的ul換為li。

【演練2-7】制作“光影世界欄目類別”的無序列表，本例文件2-7.html在瀏覽器中顯示的效果如圖2-7所示。代碼如下。

【說明】由于在＜ul＞后指定符號的樣式為type="circle"，因此每個列表項顯示為空心圓點。

2.2.2 有序列表

有序列表是一個有特定順序的列表項的集合。在有序列表中，各個列表項有先后順序之分，它們之間以編號來標記。使用＜ol＞標簽可以建立有序列表，表項的標簽仍為＜li＞。格式：

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

有序的符號標識包括：阿拉伯數字、小寫英文字母、大寫英文字母、小寫羅馬數字、大寫羅馬數字。＜ol＞標簽的type屬性用來定義一個有序列表的符號樣式，在＜ol＞后指定符號的樣式，可設定直到＜/ol＞的表項加重記號。格式：

＜ol type="1"＞ 序號為數字

＜ol type="A"＞ 序號為大寫英文字母

＜ol type="a"＞ 序號為小寫英文字母

＜ol type="I"＞ 序號為大寫羅馬字母

＜ol type="i"＞ 序號為小寫羅馬字母

在＜li＞后指定符號的樣式，可設定該表項前的加重記號。格式只需把上面的ol改為li。

【演練2-8】制作“光影世界客照展示上傳文件步驟”的有序列表，本例文件2-8.html在瀏覽器中顯示的效果如圖2-8所示。代碼如下。

【說明】在＜ol＞后指定列表樣式為阿拉伯數字，因此每個列表項顯示為阿拉伯數字。

2.2.3 定義列表

定義列表又稱為釋義列表或字典列表，定義列表不是帶有前導字符的列項目，而是一列實物以及與其相關的解釋。當創建一個定義列表時，主要用到3個HTML標簽：＜dl＞標簽、＜dt＞和＜dd＞標簽。用戶可以使用dl創建自定義列表，使用dt和dd定義列表中具體的數據項。一般情況下使用dt定義列表的二級列表項，也可以認為是dd的一個概要信息，使用dd來定義最底層的列表項。格式：

默認情況下，瀏覽器一般會在左邊界顯示條目的名稱，并在下一行縮進顯示其定義或解釋。如果＜dd＞標簽中內容很多，可以嵌套＜p＞標簽使用。

【演練2-9】使用定義列表顯示光影世界客服中心聯系方式的頁面，本例文件2-9.html的瀏覽效果如圖2-9所示。

代碼如下。

【說明】在上面的示例中，＜dl＞列表中每一項的名稱不再是＜li＞標簽，而是用＜dt＞標簽進行標記，后面跟著由＜dd＞標簽標記的條目定義或解釋。

2.2.4 嵌套列表

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

【演練2-10】制作光影世界欄目簡介頁面，在無序列表中嵌套無序列表和有序列表，本例文件2-10.html在瀏覽器中顯示的效果如圖2-10所示。代碼如下。