# HTML 列表 **HTML 支持有序、無序和定義列表** ## 實例 [無序列表](/tiy/t.asp?f=html_list_unordered) ``` &lt;html&gt; &lt;body&gt; &lt;h4&gt;一個無序列表：&lt;/h4&gt; &lt;ul&gt; &lt;li&gt;咖啡&lt;/li&gt; &lt;li&gt;茶&lt;/li&gt; &lt;li&gt;牛奶&lt;/li&gt; &lt;/ul&gt; &lt;/body&gt; &lt;/html&gt; ``` [有序列表](/tiy/t.asp?f=html_list_ordered) ``` &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;body&gt; &lt;ol&gt; &lt;li&gt;咖啡&lt;/li&gt; &lt;li&gt;牛奶&lt;/li&gt; &lt;li&gt;茶&lt;/li&gt; &lt;/ol&gt; &lt;ol start="50"&gt; &lt;li&gt;咖啡&lt;/li&gt; &lt;li&gt;牛奶&lt;/li&gt; &lt;li&gt;茶&lt;/li&gt; &lt;/ol&gt; &lt;/body&gt; &lt;/html&gt; ``` （[可以在本頁底端找到更多實例](#more_examples)。） ## 無序列表 無序列表是一個項目的列表，此列項目使用粗體圓點（典型的小黑圓圈）進行標記。 無序列表始于 &lt;ul&gt; 標簽。每個列表項始于 &lt;li&gt;。 ``` <ul> <li>Coffee</li> <li>Milk</li> </ul> ``` 瀏覽器顯示如下： * Coffee * Milk 列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。 ## 有序列表 同樣，有序列表也是一列項目，列表項目使用數字進行標記。 有序列表始于 &lt;ol&gt; 標簽。每個列表項始于 &lt;li&gt; 標簽。 ``` <ol> <li>Coffee</li> <li>Milk</li> </ol> ``` 瀏覽器顯示如下： 1. Coffee 2. Milk 列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。 ## 定義列表 自定義列表不僅僅是一列項目，而是項目及其注釋的組合。 自定義列表以 &lt;dl&gt; 標簽開始。每個自定義列表項以 &lt;dt&gt; 開始。每個自定義列表項的定義以 &lt;dd&gt; 開始。 ``` <dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl> ``` 瀏覽器顯示如下： Coffee Milk 定義列表的列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。 ## &lt;a id="more_examples"&gt;更多實例&lt;/a&gt; [不同類型的無序列表](/tiy/t.asp?f=html_lists_unordered) ``` &lt;html&gt; &lt;body&gt; &lt;h4&gt;Disc 項目符號列表：&lt;/h4&gt; &lt;ul type="disc"&gt; &lt;li&gt;蘋果&lt;/li&gt; &lt;li&gt;香蕉&lt;/li&gt; &lt;li&gt;檸檬&lt;/li&gt; &lt;li&gt;桔子&lt;/li&gt; &lt;/ul&gt; &lt;h4&gt;Circle 項目符號列表：&lt;/h4&gt; &lt;ul type="circle"&gt; &lt;li&gt;蘋果&lt;/li&gt; &lt;li&gt;香蕉&lt;/li&gt; &lt;li&gt;檸檬&lt;/li&gt; &lt;li&gt;桔子&lt;/li&gt; &lt;/ul&gt; &lt;h4&gt;Square 項目符號列表：&lt;/h4&gt; &lt;ul type="square"&gt; &lt;li&gt;蘋果&lt;/li&gt; &lt;li&gt;香蕉&lt;/li&gt; &lt;li&gt;檸檬&lt;/li&gt; &lt;li&gt;桔子&lt;/li&gt; &lt;/ul&gt; &lt;/body&gt; &lt;/html&gt; ``` [不同類型的有序列表](/tiy/t.asp?f=html_lists_ordered) ``` &lt;html&gt; &lt;body&gt; &lt;h4&gt;數字列表：&lt;/h4&gt; &lt;ol&gt; &lt;li&gt;蘋果&lt;/li&gt; &lt;li&gt;香蕉&lt;/li&gt; &lt;li&gt;檸檬&lt;/li&gt; &lt;li&gt;桔子&lt;/li&gt; &lt;/ol&gt; &lt;h4&gt;字母列表：&lt;/h4&gt; &lt;ol type="A"&gt; &lt;li&gt;蘋果&lt;/li&gt; &lt;li&gt;香蕉&lt;/li&gt; &lt;li&gt;檸檬&lt;/li&gt; &lt;li&gt;桔子&lt;/li&gt; &lt;/ol&gt; &lt;h4&gt;小寫字母列表：&lt;/h4&gt; &lt;ol type="a"&gt; &lt;li&gt;蘋果&lt;/li&gt; &lt;li&gt;香蕉&lt;/li&gt; &lt;li&gt;檸檬&lt;/li&gt; &lt;li&gt;桔子&lt;/li&gt; &lt;/ol&gt; &lt;h4&gt;羅馬字母列表：&lt;/h4&gt; &lt;ol type="I"&gt; &lt;li&gt;蘋果&lt;/li&gt; &lt;li&gt;香蕉&lt;/li&gt; &lt;li&gt;檸檬&lt;/li&gt; &lt;li&gt;桔子&lt;/li&gt; &lt;/ol&gt; &lt;h4&gt;小寫羅馬字母列表：&lt;/h4&gt; &lt;ol type="i"&gt; &lt;li&gt;蘋果&lt;/li&gt; &lt;li&gt;香蕉&lt;/li&gt; &lt;li&gt;檸檬&lt;/li&gt; &lt;li&gt;桔子&lt;/li&gt; &lt;/ol&gt; &lt;/body&gt; &lt;/html&gt; ``` [嵌套列表](/tiy/t.asp?f=html_lists_nested) ``` &lt;html&gt; &lt;body&gt; &lt;h4&gt;一個嵌套列表：&lt;/h4&gt; &lt;ul&gt; &lt;li&gt;咖啡&lt;/li&gt; &lt;li&gt;茶 &lt;ul&gt; &lt;li&gt;紅茶&lt;/li&gt; &lt;li&gt;綠茶&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;牛奶&lt;/li&gt; &lt;/ul&gt; &lt;/body&gt; &lt;/html&gt; ``` [嵌套列表 2](/tiy/t.asp?f=html_lists_nested2) ``` &lt;html&gt; &lt;body&gt; &lt;h4&gt;一個嵌套列表：&lt;/h4&gt; &lt;ul&gt; &lt;li&gt;咖啡&lt;/li&gt; &lt;li&gt;茶 &lt;ul&gt; &lt;li&gt;紅茶&lt;/li&gt; &lt;li&gt;綠茶 &lt;ul&gt; &lt;li&gt;中國茶&lt;/li&gt; &lt;li&gt;非洲茶&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;牛奶&lt;/li&gt; &lt;/ul&gt; &lt;/body&gt; &lt;/html&gt; ``` [定義列表](/tiy/t.asp?f=html_list_definition) ``` &lt;html&gt; &lt;body&gt; &lt;h2&gt;一個定義列表：&lt;/h2&gt; &lt;dl&gt; &lt;dt&gt;計算機&lt;/dt&gt; &lt;dd&gt;用來計算的儀器 ... ...&lt;/dd&gt; &lt;dt&gt;顯示器&lt;/dt&gt; &lt;dd&gt;以視覺方式顯示信息的裝置 ... ...&lt;/dd&gt; &lt;/dl&gt; &lt;/body&gt; &lt;/html&gt; ``` ## 列表標簽 | 標簽 | 描述 | | --- | --- | | [`<ol>`](/tags/tag_ol.asp) | 定義有序列表。 | | [`<ul>`](/tags/tag_ul.asp) | 定義無序列表。 | | [`<li>`](/tags/tag_li.asp) | 定義列表項。 | | [`<dl>`](/tags/tag_dl.asp) | 定義定義列表。 | | [`<dt>`](/tags/tag_dt.asp) | 定義定義項目。 | | [`<dd>`](/tags/tag_dd.asp) | 定義定義的描述。 | | [`<dir>`](/tags/tag_dir.asp) | 已廢棄。使用 <ul> 代替它。 | | [`<menu>`](/tags/tag_menu.asp) | 已廢棄。使用 <ul> 代替它。 |