# 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> 代替它。 |