HTML <li> 标签

定义和用法

<li> 标签定义列表项。

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

在 <ul> 和 <menu> 中，列表项通常会用项目符号显示。

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

提示：请使用 CSS 来设置列表样式。

另请参阅：

HTML 教程：HTML 列表

HTML DOM 参考手册：Li 对象

CSS 教程：设置列表的样式

实例

例子 1

一个有序 (<ol>) 和一个无序 (<ul>) 的 HTML 列表：

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

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

亲自试一试

例子 2

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

<ol>
  <li value="100">咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
  <li>纯水</li>
  <li>果汁</li>
  <li>啤酒</li>
</ol>

亲自试一试

例子 3

设置不同的列表样式类型（使用 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>

亲自试一试

例子 4

在列表中创建一个列表（嵌套列表）：

<ul>
  <li>咖啡</li>
  <li>茶
    <ul>
      <li>普洱</li>
      <li>绿茶</li>
    </ul>
  </li>
  <li>牛奶</li>
</ul>

亲自试一试

例子 5

创建一个更复杂的嵌套列表：

<ul>
  <li>咖啡</li>
  <li>茶
    <ul>
      <li>普洱</li>
      <li>绿茶
        <ul>
          <li>碧螺春</li>
          <li>龙井</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>牛奶</li>
</ul>

亲自试一试

属性

属性 值 描述
value 数字 仅适用于 <ol> 列表。规定列表项的起始值。随后的列表项将从该数字递增。

全局属性

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

事件属性

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

默认的 CSS 设置

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

li {
  display: list-item;
}

浏览器支持

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
支持 支持 支持 支持 支持