HTML <li> Merker
Voorbeeld
Een geordende (<ol>) en een ongeordende (<ul>) HTML-lys:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Meer "Probeer dit self" voorbeelde hieronder.
Definisie en gebruik
Die <li>merker definieer 'n lysitem.
Die <li>merker word gebruik in geordende lyste ( <ol> ), ongeordende lyste ( <ul> ), en in spyskaartlyste ( <menu> ).
In <ul> en <menu> sal die lysitems gewoonlik met kolpunte vertoon word.
In <ol> sal die lysitems gewoonlik met syfers of letters vertoon word.
Wenk: Gebruik CSS om lyste te styl .
Blaaierondersteuning
| Element | |||||
|---|---|---|---|---|---|
| <li> | Yes | Yes | Yes | Yes | Yes |
Eienskappe
| 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 |
Globale eienskappe
Die <li>merker ondersteun ook die Global Attributes in HTML .
Gebeurtenis eienskappe
Die <li>merker ondersteun ook die gebeurtenis-kenmerke in HTML .
Meer voorbeelde
Voorbeeld
Gebruik van die waarde-kenmerk in 'n geordende lys:
<ol>
<li value="100">Coffee</li>
<li>Tea</li>
<li>Milk</li>
<li>Water</li>
<li>Juice</li>
<li>Beer</li>
</ol>
Voorbeeld
Stel verskillende lysstyltipes (met CSS):
<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>
Voorbeeld
Skep 'n lys binne 'n lys ('n geneste lys):
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Voorbeeld
Skep 'n meer komplekse geneste lys:
<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>
Verwante bladsye
HTML-tutoriaal: HTML-lyste
HTML DOM verwysing: Li Object
CSS-tutoriaal: Stileerlyste
Verstek CSS-instellings
Die meeste blaaiers sal die <li>element met die volgende verstekwaardes vertoon:
li {
display: list-item;
}