HTML <li> etiketi

Tanım ve Kullanım

<li> etiketi liste öğelerini tanımlar.

<li> etiketi sıralı listeler için kullanılır (<ol>) ve sırasız listeler (<ul>) ve menü listeleri (<menu>) içinde.

<ul> ve <menu> içinde, liste öğeleri genellikle sembollerle gösterilir.

<ol> içinde, liste öğeleri genellikle rakam veya harf ile gösterilir.

İpucu:CSS kullanarak:Liste tarzını ayarlayın.

Ayrıca bakınız:

HTML Eğitimi:HTML Listesi

HTML DOM Referans Kılavuzu:Li nesnesi

CSS Eğitimi:Liste tarzını ayarlayın

Örnek

Örnek 1

Bir sıralı (<ol>) ve bir sırasız (<ul>) HTML listesi:

<ol>
  <li>Kahve
  <li>Çay</li>
  <li>Śoklat
</ol>
<ul>
  <li>Kahve
  <li>Çay</li>
  <li>Śoklat
</ul>

Kendi Kendine Deneyin

Örnek 2

Sıralı listede value özelliğini kullanın:

<ol>
  <li value="100">Coffee</li>
  <li>Çay</li>
  <li>Śoklat
  <li>Pure Water</li>
  <li>Juice</li>
  <li>Beers</li>
</ol>

Kendi Kendine Deneyin

Örnek 3

Farklı liste tarzı türlerini ayarlayın (CSS kullanarak):

<ol>
  <li>Kahve
  <li style="list-style-type:lower-alpha">Çay</li>
  <li>Śoklat
</ol>
<ul>
  <li>Kahve
  <li style="list-style-type:square">Çay</li>
  <li>Śoklat
</ul>

Kendi Kendine Deneyin

Örnek 4

Listede bir liste oluşturun (dahili liste):

<ul>
  <li>Kahve
  <li>Çay
    <ul>
      <li>Pu'er
      <li>绿茶</li>
    </ul>
  </li>
  <li>Śoklat
</ul>

Kendi Kendine Deneyin

Örnek 5

Daha karmaşık bir içeren liste oluşturma:

<ul>
  <li>Kahve
  <li>Çay
    <ul>
      <li>Pu'er
      <li>Yeşil Çay
        <ul>
          <li>Biluochun
          <li>Longjing
        </ul>
      </li>
    </ul>
  </li>
  <li>Śoklat
</ul>

Kendi Kendine Deneyin

Özellik

Özellik Değer Açıklama
value Sayı Yalnızca <ol> listeleri için geçerlidir. Liste elemanlarının başlangıç değerini belirler. Sonraki liste elemanları bu sayıdan artarak belirlenir.

Global Özellikler

<li> Bu etiketler ayrıca HTML'deki Global Özellikler.

event özelliklerini destekler

<li> Bu etiketler ayrıca HTML'deki Event Özellikleri.

Varsayılan CSS Ayarları

Çoğu tarayıcı aşağıdaki varsayılan değerleri kullanarak görüntüleyecektir <li> Eleman:

li {
  display: list-item;
}

Tarayıcı Desteği

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Destek Destek Destek Destek Destek