【HTML教程】HTML的li标签|html入门知识

攻城狮与产品喵

发布于 2025-11-19 17:05:03

550

文章被收录于专栏：攻城狮与产品喵攻城狮与产品喵

【定义和用法】

li 标签定义列表项。

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

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

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

提示：请使用 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>