HTML <li> Etiketi
Örnek
Bir sıralı (<ol>) ve bir sırasız (<ul>) HTML listesi:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Aşağıda daha fazla "Kendiniz Deneyin" örnekleri.
Tanım ve Kullanım
<li>etiketi bir liste öğesini tanımlar .
Etiket <li>, sıralı listelerde ( <ol> ), sırasız listelerde ( <ul> ) ve menü listelerinde ( <menu> ) kullanılır.
<ul> ve <menu>'de liste öğeleri genellikle madde işaretleriyle görüntülenir.
<ol> içinde, liste öğeleri genellikle sayılar veya harflerle görüntülenecektir.
İpucu: Listelere stil vermek için CSS kullanın .
Tarayıcı Desteği
| Element | |||||
|---|---|---|---|---|---|
| <li> | Yes | Yes | Yes | Yes | Yes |
Öznitellikler
| 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 |
Genel Özellikler
Etiket ayrıca HTML'deki Global Nitelikleri<li> de destekler .
Etkinlik Özellikleri
Etiket ayrıca HTML'deki Etkinlik Niteliklerini<li> de destekler .
Daha fazla örnek
Örnek
Sıralı bir listede value niteliğinin kullanımı:
<ol>
<li value="100">Coffee</li>
<li>Tea</li>
<li>Milk</li>
<li>Water</li>
<li>Juice</li>
<li>Beer</li>
</ol>
Örnek
Farklı liste stili türleri ayarlayın (CSS ile):
<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>
Örnek
Bir liste içinde bir liste oluşturun (iç içe liste):
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Örnek
Daha karmaşık bir iç içe liste oluşturun:
<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>
İlgili Sayfalar
HTML öğreticisi: HTML Listeleri
HTML DOM referansı: Li Nesnesi
CSS Eğitimi: Stil Listeleri
Varsayılan CSS Ayarları
Çoğu tarayıcı, <li>öğeyi aşağıdaki varsayılan değerlerle görüntüler:
li {
display: list-item;
}