HTML <li> tag

Definitie en gebruik

<li> tag definieert een lijstitem.

<li> tag wordt gebruikt voor genummerde lijsten (<ol>)、ongenummerde lijst (<ul>) en menu-lijst (<menu>) gebruikt.

In <ul> en <menu>, worden lijstitems meestal weergegeven met lijstpunten.

In <ol>, worden lijstitems meestal weergegeven met cijfers of letters.

Tip:Gebruik CSS omStel lijststijl in.

Zie ook:

HTML Tutorial:HTML lijst

HTML DOM Referentiehandleiding:Li Object

CSS Tutorial:Stel de lijststijl in

Voorbeeld

Voorbeeld 1

een genummerde (<ol>) en een ongenummerde (<ul>) van de HTML-lijst:

<ol>
  <li>Koffie</li>
  <li>thee</li>
  <li>melk</li>
</ol>
<ul>
  <li>Koffie</li>
  <li>thee</li>
  <li>melk</li>
</ul>

Probeer het zelf

Voorbeeld 2

Gebruik de value-eigenschap in een genummerde lijst:

<ol>
  <li value="100">koffie</li>
  <li>thee</li>
  <li>melk</li>
  <li>zuiver water</li>
  <li>frisdrank</li>
  <li>bier</li>
</ol>

Probeer het zelf

Voorbeeld 3

Stel verschillende lijststijltypen in (gebruik CSS):

<ol>
  <li>Koffie</li>
  <li style="list-style-type:lower-alpha">thee</li>
  <li>melk</li>
</ol>
<ul>
  <li>Koffie</li>
  <li style="list-style-type:square">thee</li>
  <li>melk</li>
</ul>

Probeer het zelf

Voorbeeld 4

Maak een lijst in de lijst (geïntegreerde lijst):

<ul>
  <li>Koffie</li>
  <li>Thee</li>
    <ul>
      <li>Pu'er</li>
      <li>groene thee</li>
    </ul>
  </li>
  <li>melk</li>
</ul>

Probeer het zelf

Voorbeeld 5

Maak een complexere geneste lijst:

<ul>
  <li>Koffie</li>
  <li>Thee</li>
    <ul>
      <li>Pu'er</li>
      <li>groene thee
        <ul>
          <li>Biluochun</li>
          <li>Longjing</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>melk</li>
</ul>

Probeer het zelf

Eigenschap

Eigenschap Waarde Beschrijving
waarde Getal Alleen van toepassing op <ol> lijsten. Stelt de startwaarde van de lijstitems vast. Volgende lijstitems worden hiervan afgeleid.

Globale eigenschappen

<li> De tag ondersteunt ook Globale eigenschappen in HTML.

event eigenschappen

<li> De tag ondersteunt ook Event eigenschappen in HTML.

Standaard CSS instellingen

De meeste browsers zullen de volgende standaardwaarden weergeven <li> Element:

li {
  display: list-item;
}

Browserondersteuning

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Ondersteuning Ondersteuning Ondersteuning Ondersteuning Ondersteuning