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
支持 支持 支持 支持 支持