HTML <li> 标籤

定義和用法

<li> 標籤定義清單項目。

<li> 標籤用於有序清單 (<ol>)、無序列表 (<ul>) 和菜單清單 (<menu>) 中。

在 <ul> 和 <menu> 中，清單項目通常會用項目符號顯示。

在 <ol> 中，清單項目通常會以數字或字母顯示。

提示：請使用 CSS 來設置清單樣式.

另請參考：

HTML 教程：Senarai HTML

HTML DOM 參考手冊：Li 對象

CSS 教程：設置清單的樣式

實例

範例 1

一個有序 (<ol>) 和一個無序 (<ul>) 的 HTML 清單：

<ol>
  <li>Kopi</li>
  <li>茶</li>
  <li>Lebah</li>
</ol>
<ul>
  <li>Kopi</li>
  <li>茶</li>
  <li>Lebah</li>
</ul>

Cuba Sendiri

範例 2

在有序清單中使用 value 屬性：

<ol>
  <li value="100">咖啡</li>
  <li>茶</li>
  <li>Lebah</li>
  <li>純水</li>
  <li>果汁</li>
  <li>啤酒</li>
</ol>

Cuba Sendiri

範例 3

設置不同的清單樣式類型（使用 CSS）：

<ol>
  <li>Kopi</li>
  <li style="list-style-type:lower-alpha">茶</li>
  <li>Lebah</li>
</ol>
<ul>
  <li>Kopi</li>
  <li style="list-style-type:square">茶</li>
  <li>Lebah</li>
</ul>

Cuba Sendiri

範例 4

在清單中創建一個清單（嵌套清單）：

<ul>
  <li>Kopi</li>
  <li>Tea</li>
    <ul>
      <li>Pu'er</li>
      <li>茶</li>
    </ul>
  </li>
  <li>Lebah</li>
</ul>

Cuba Sendiri

Contoh 5

Cipta senarai yang lebih kompleks:

<ul>
  <li>Kopi</li>
  <li>Tea</li>
    <ul>
      <li>Pu'er</li>
      <li>Tea Hijau</li>
        <ul>
          <li>Biluochun</li>
          <li>Longjing</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Lebah</li>
</ul>

Cuba Sendiri

Properti

Properti Nilai Penerangan
value Nombor Hanya untuk senarai <ol>. Menentukan nilai permulaan item senarai. Item senarai berikutnya akan bertambah dari angka ini.

Properti Global

<li> Tanda ini juga menyokong Properti Global HTML.

Properti Acara

<li> Tanda ini juga menyokong Properti Acara HTML.

Pengaturan CSS lalai

Bersamaan dengan kebanyakan pelayar, akan digunakan nilai lalai berikut untuk dipaparkan <li> Elenган:

li {
  display: list-item;
}

Dukungan Pemerosahan

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Dukungan Dukungan Dukungan Dukungan Dukungan