码农教程 - 一技在手,衣食无忧! tools

HTML <li> 标签

❮上一节 完整的 HTML参考 下一节❯

示例

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

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
亲自试一试 »

下面有更多 "亲自试一试" 示例。

定义和用法

这个<li>标签定义一个列表项。

这个<li>标签在有序列表中使用（<ol>)、无序列表 (<ul>），并在菜单列表中（<菜单>）。

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

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

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

浏览器支持

Element
<li> Yes Yes Yes Yes Yes

属性

Attribute Value Description
value number Only for <ol> lists. Specifies the start value of a list item. The following list items will increment from that number

全局属性

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

事件属性

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

更多示例

示例

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

<ol>
  <li value="100">Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
  <li>Water</li>
  <li>Juice</li>
  <li>Beer</li>
</ol>
亲自试一试 »

示例

设置不同的列表样式类型（使用 CSS）：

<ol>
  <li>Coffee</li>
  <li style="list-style-type:lower-alpha">Tea</li>
  <li>Milk</li>
</ol>

<ul>
  <li>Coffee</li>
  <li style="list-style-type:square">Tea</li>
  <li>Milk</li>
</ul>
亲自试一试 »

示例

在列表内创建列表（嵌套列表）：

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>
亲自试一试 »

示例

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

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea
        <ul>
          <li>China</li>
          <li>Africa</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Milk</li>
</ul>
亲自试一试 »

相关页面

HTML 教程：HTML 列表

HTML DOM 参考：李对象

CSS 教程：CSS 列表

默认 CSS 设置

大多数浏览器都会显示<li>具有以下默认值的元素：

li {
  display: list-item;
}


❮上一节 完整的 HTML参考 下一节❯