HTML <li> 标签

实例

  1. <ol>
  2.    <li>Coffee</li>
  3.    <li>Tea</li>
  4.    <li>Milk</li>
  5. </ol>
  7. <ul>
  8.    <li>Coffee</li>
  9.    <li>Tea</li>
  10.    <li>Milk</li>
  11. </ul>

（请在页面底部查看更多实例）

浏览器支持

元素 Chrome Internet Explorer / Edge Firefox Safari Opera
<li> Yes Yes Yes Yes Yes

所有主流浏览器都支持 <li> 标签。

定义和用法

<li> 标签定义列表项目。

<li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中。

HTML 与 XHTML 之间的差异

在 HTML 4.01 中，li 元素的 “type” 和 “value” 属性是不被赞成使用的。

在 XHTML 1.0 Strict DTD 中，li 元素的 “type” 和 “value” 属性是不被支持的。

提示和注释：

提示：请使用 CSS 来定义列表和列表项目的类型。

可选的属性

属性 值 描述
type A
a
I
i
1
disc
square
circle		 不赞成使用。请使用样式取代它。
规定使用哪种项目符号。
value number 不赞成使用。请使用样式取代它。
规定列表项目的数字。

全局属性

<li> 标签支持 HTML 中的全局属性。

事件属性

<li> 标签支持 HTML 中的事件属性。

TIY 实例

一个无序列表

本例演示一个无序列表。

  1. <h4>一个无序列表：</h4>
  2. <ul>
  3.   <li>咖啡</li>
  4.   <li>茶</li>
  5.   <li>牛奶</li>
  6. </ul>

不同类型的无序列表

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

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

一个有序列表

本例演示一个有序列表。

  1. <ol>
  2.   <li>咖啡</li>
  3.   <li>牛奶</li>
  4.   <li>茶</li>
  5. </ol>
  7. <ol start="50">
  8.   <li>咖啡</li>
  9.   <li>牛奶</li>
  10.   <li>茶</li>
  11. </ol>

不同类型的有序列表

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

  1. <h4>数字列表：</h4>
  2. <ol>
  3.  <li>苹果</li>
  4.  <li>香蕉</li>
  5.  <li>柠檬</li>
  6.  <li>桔子</li>
  7. </ol>  
  9. <h4>字母列表：</h4>
  10. <ol type="A">
  11.  <li>苹果</li>
  12.  <li>香蕉</li>
  13.  <li>柠檬</li>
  14.  <li>桔子</li>
  15. </ol>  
  17. <h4>小写字母列表：</h4>
  18. <ol type="a">
  19.  <li>苹果</li>
  20.  <li>香蕉</li>
  21.  <li>柠檬</li>
  22.  <li>桔子</li>
  23. </ol>  
  25. <h4>罗马字母列表：</h4>
  26. <ol type="I">
  27.  <li>苹果</li>
  28.  <li>香蕉</li>
  29.  <li>柠檬</li>
  30.  <li>桔子</li>
  31. </ol>  
  33. <h4>小写罗马字母列表：</h4>
  34. <ol type="i">
  35.  <li>苹果</li>
  36.  <li>香蕉</li>
  37.  <li>柠檬</li>
  38.  <li>桔子</li>
  39. </ol>

嵌套列表

本例演示如何嵌套列表。

  1. <h4>一个嵌套列表：</h4>
  2. <ul>
  3.   <li>咖啡</li>
  4.   <li>茶
  5.     <ul>
  6.     <li>红茶</li>
  7.     <li>绿茶</li>
  8.     </ul>
  9.   </li>
  10.   <li>牛奶</li>
  11. </ul>

嵌套列表 2

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

  1. <h4>一个嵌套列表：</h4>
  2. <ul>
  3.   <li>咖啡</li>
  4.   <li>茶
  5.     <ul>
  6.     <li>红茶</li>
  7.     <li>绿茶
  8.       <ul>
  9.       <li>中国茶</li>
  10.       <li>非洲茶</li>
  11.       </ul>
  12.     </li>
  13.     </ul>
  14.   </li>
  15.   <li>牛奶</li>
  16. </ul>

相关页面

HTML DOM 参考手册：Li 对象