轻松上手,快乐学习!

HTML <li> 标签



实例

HTML 两个列表实例: 一个有序列表 (<ol>) 和 一个无序列表 (<ul>) :

<ol>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ol>

<ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>
亲自试一试 »

下面有更多实例。


定义和用法

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

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

在 <ul> 和 <menu>中,列表项通常显示为项目符号。

在 <ol>中,列表项通常以数字或字母显示。

提示: 使用CSS设置列表样式


浏览器支持

元素
<li> Yes Yes Yes Yes Yes

属性

属性 描述
value number 不赞成使用。请使用样式取代它。规定列表项目的数字。

全局属性

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


事件属性

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


更多实例

实例

在有序列表中使用 value 属性:

<ol>
  <li value="100">咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
  <li>水</li>
  <li>果汁</li>
  <li>啤酒</li>
</ol>
亲自试一试 »

实例

设置不同的列表样式类型 (使用 CSS):

<ol>
  <li>咖啡</li>
  <li style="list-style-type:lower-alpha">茶</li>
  <li>牛奶</li>
</ol>

<ul>
  <li>咖啡</li>
  <li style="list-style-type:square">茶</li>
  <li>牛奶</li>
</ul>
亲自试一试 »

实例

一个嵌套列表

<ul>
  <li>咖啡</li>
  <li>Tea
    <ul>
      <li>红茶</li>
      <li>绿茶</li>
    </ul>
  </li>
  <li>牛奶</li>
</ul>
亲自试一试 »

实例

创建更复杂的嵌套列表:

<ul>
  <li>咖啡</li>
  <li>Tea
    <ul>
      <li>红茶</li>
      <li>绿茶
        <ul>
          <li>中国</li>
          <li>非洲</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>牛奶</li>
</ul>
亲自试一试 »

相关页面

HTML 教程: HTML Lists

HTML DOM 参考手册: Li 对象

CSS 教程: Styling Lists


默认CSS设置

大多数浏览器将使用以下默认值显示 <li> 元素:

li {
  display: list-item;
}