HTML <li> etiket

Definition og brug

<li> etiketten definerer listeemner.

<li> etiketten bruges til numeriske lister (<ol>)、usortert liste (<ul>) og menu-liste (<menu>)

I <ul> og <menu>, vises listeelementer normalt med punkttegn.

I <ol>, vises listeelementer normalt med tal eller bogstaver.

Tip:Brug CSS tilIndstil listeens stil.

Se også:

HTML-undervisning:HTML liste

HTML DOM referencehåndbog:Li-objektet

CSS-undervisning:Indstil listeens stil

Eksempel

Eksempel 1

en sortert (<ol>) og en usortert (<ul>) som en HTML-liste:

<ol>
  <li>Kaffe
  <li>Te</li>
  <li>Mejeri
</ol>
<ul>
  <li>Kaffe
  <li>Te</li>
  <li>Mejeri
</ul>

Prøv det selv

Eksempel 2

Brug value-attributten i en numerisk liste:

<ol>
  <li value="100">Kaffe</li>
  <li>Te</li>
  <li>Mejeri
  <li>Ren vand</li>
  <li>Fruktjuice</li>
  <li>Øl</li>
</ol>

Prøv det selv

Eksempel 3

Indstil forskellige listestiletyper (brug CSS):

<ol>
  <li>Kaffe
  <li style="list-style-type:lower-alpha">Te</li>
  <li>Mejeri
</ol>
<ul>
  <li>Kaffe
  <li style="list-style-type:square">Te</li>
  <li>Mejeri
</ul>

Prøv det selv

Eksempel 4

Opret en liste i en liste (indlejret liste):

<ul>
  <li>Kaffe
  <li>Té
    <ul>
      <li>Pu'er
      <li>Grøn te</li>
    </ul>
  </li>
  <li>Mejeri
</ul>

Prøv det selv

Eksempel 5

Opret en mere kompleks indlejret liste:

<ul>
  <li>Kaffe
  <li>Té
    <ul>
      <li>Pu'er
      <li>Grøn te
        <ul>
          <li>Biluochun
          <li>Longjing
        </ul>
      </li>
    </ul>
  </li>
  <li>Mejeri
</ul>

Prøv det selv

Egenskab

Egenskab Værdi Beskrivelse
value Tal Kun tilgængelig for <ol> lister. Angiver startværdien for listenemner. Følgende listenemner vil øge fra denne værdi.

Globale egenskaber

<li> Etiketterne understøtter også Globale egenskaber i HTML.

event egenskaber

<li> Etiketterne understøtter også Event egenskaber i HTML.

Standard CSS indstilling

De fleste browsere vil bruge følgende standardværdier til visning <li> Element:

li {
  display: list-item;
}

Browser support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support