HTML 列表

HTML 支持有序、无序和定义列表

实例

无序列表

本例演示无序列表。 

  1. <html>
  3. <body>
  5. <h4>一个无序列表：</h4>
  6. <ul>
  7.   <li>咖啡</li>
  8.   <li>茶</li>
  9.   <li>牛奶</li>
  10. </ul>
  12. </body>
  13. </html>

有序列表

本例演示有序列表。 

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <ol>
  6.   <li>咖啡</li>
  7.   <li>牛奶</li>
  8.   <li>茶</li>
  9. </ol>
  11. <ol start="50">
  12.   <li>咖啡</li>
  13.   <li>牛奶</li>
  14.   <li>茶</li>
  15. </ol>
  17. </body>
  18. </html>

（更多实例。）

无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表始于 <ul> 标签。每个列表项始于 <li>。

  1. <ul>
  2. <li>Coffee</li>
  3. <li>Milk</li>
  4. </ul>

浏览器显示如下：

  • Coffee
  • Milk

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

  1. <ol>
  2. <li>Coffee</li>
  3. <li>Milk</li>
  4. </ol>

浏览器显示如下：

  • Coffee
  • Milk

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

  1. <dl>
  2. <dt>Coffee</dt>
  3. <dd>Black hot drink</dd>
  4. <dt>Milk</dt>
  5. <dd>White cold drink</dd>
  6. </dl>

浏览器显示如下：

  • Coffee
  • Black hot drink
  • Milk
  • White cold drink

定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

更多实例

不同类型的无序列表

本例演示一个无序列表。 

  1. <html>
  2. <body>
  4. <h4>Disc 项目符号列表：</h4>
  5. <ul type="disc">
  6.  <li>苹果</li>
  7.  <li>香蕉</li>
  8.  <li>柠檬</li>
  9.  <li>桔子</li>
  10. </ul>  
  12. <h4>Circle 项目符号列表：</h4>
  13. <ul type="circle">
  14.  <li>苹果</li>
  15.  <li>香蕉</li>
  16.  <li>柠檬</li>
  17.  <li>桔子</li>
  18. </ul>  
  20. <h4>Square 项目符号列表：</h4>
  21. <ul type="square">
  22.  <li>苹果</li>
  23.  <li>香蕉</li>
  24.  <li>柠檬</li>
  25.  <li>桔子</li>
  26. </ul>  
  28. </body>
  29. </html>

不同类型的有序列表

本例演示不同类型的有序列表。 

  1. <html>
  2. <body>
  4. <h4>数字列表：</h4>
  5. <ol>
  6.  <li>苹果</li>
  7.  <li>香蕉</li>
  8.  <li>柠檬</li>
  9.  <li>桔子</li>
  10. </ol>  
  12. <h4>字母列表：</h4>
  13. <ol type="A">
  14.  <li>苹果</li>
  15.  <li>香蕉</li>
  16.  <li>柠檬</li>
  17.  <li>桔子</li>
  18. </ol>  
  20. <h4>小写字母列表：</h4>
  21. <ol type="a">
  22.  <li>苹果</li>
  23.  <li>香蕉</li>
  24.  <li>柠檬</li>
  25.  <li>桔子</li>
  26. </ol>  
  28. <h4>罗马字母列表：</h4>
  29. <ol type="I">
  30.  <li>苹果</li>
  31.  <li>香蕉</li>
  32.  <li>柠檬</li>
  33.  <li>桔子</li>
  34. </ol>  
  36. <h4>小写罗马字母列表：</h4>
  37. <ol type="i">
  38.  <li>苹果</li>
  39.  <li>香蕉</li>
  40.  <li>柠檬</li>
  41.  <li>桔子</li>
  42. </ol>  
  44. </body>
  45. </html>

嵌套列表

本例演示如何嵌套列表。 

  1. <html>
  3. <body>
  5. <h4>一个嵌套列表：</h4>
  6. <ul>
  7.   <li>咖啡</li>
  8.   <li>茶
  9.     <ul>
  10.     <li>红茶</li>
  11.     <li>绿茶</li>
  12.     </ul>
  13.   </li>
  14.   <li>牛奶</li>
  15. </ul>
  17. </body>
  18. </html>

嵌套列表 2

本例演示更复杂的嵌套列表。 

  1. <html>
  3. <body>
  5. <h4>一个嵌套列表：</h4>
  6. <ul>
  7.   <li>咖啡</li>
  8.   <li>茶
  9.     <ul>
  10.     <li>红茶</li>
  11.     <li>绿茶
  12.       <ul>
  13.       <li>中国茶</li>
  14.       <li>非洲茶</li>
  15.       </ul>
  16.     </li>
  17.     </ul>
  18.   </li>
  19.   <li>牛奶</li>
  20. </ul>
  22. </body>
  23. </html>

定义列表

本例演示一个定义列表。 

  1. <html>
  3. <body>
  5. <h2>一个定义列表：</h2>
  7. <dl>
  8.    <dt>计算机</dt>
  9.    <dd>用来计算的仪器 ... ...</dd>
  10.    <dt>显示器</dt>
  11.    <dd>以视觉方式显示信息的装置 ... ...</dd>
  12. </dl>
  14. </body>
  15. </html>

列表标签

标签 描述
<ol> 定义有序列表。
<ul> 定义无序列表。
<li> 定义列表项。
<dl> 定义定义列表。
<dt> 定义定义项目。
<dd> 定义定义的描述。
<dir> 已废弃。使用 <ul> 代替它。
<menu> 已废弃。使用 <ul> 代替它。