HTML <li> Tag

Definition und Verwendung

<li> Tag definiert den Listeneintrag.

<li> Tag wird für geordnete Listen verwendet (<ol>) und Aufzählungslisten (<ul>) und Menülisten (<menu>) angezeigt.

In <ul> und <menu>, werden die Listeinträge in der Regel mit Punkten angezeigt.

In <ol>, werden die Listeinträge in der Regel mit Ziffern oder Buchstaben angezeigt.

Hinweis:Verwenden Sie CSS, umStellen Sie den Stil der Liste ein.

Weitere Informationen:

HTML-Tutorial:HTML Liste

HTML DOM-Referenzhandbuch:Li-Objekt

CSS-Tutorial:Stellen Sie den Stil der Liste ein

Beispiel

Beispiel 1

eine geordnete (<ol>) und eine unsortierte (<ul>) als HTML-Liste:

<ol>
  <li>Kaffee</li>
  <li>Tee</li>
  <li>Milch</li>
</ol>
<ul>
  <li>Kaffee</li>
  <li>Tee</li>
  <li>Milch</li>
</ul>

Versuchen Sie es selbst

Beispiel 2

Verwenden Sie das Attribut value in geordneten Listen:

<ol>
  <li value="100">Kaffee</li>
  <li>Tee</li>
  <li>Milch</li>
  <li>Reines Wasser</li>
  <li>Saft</li>
  <li>Bier</li>
</ol>

Versuchen Sie es selbst

Beispiel 3

Verschiedene Arten von Listen-Stilen einstellen (verwenden Sie CSS):

<ol>
  <li>Kaffee</li>
  <li style="list-style-type:lower-alpha">Tee</li>
  <li>Milch</li>
</ol>
<ul>
  <li>Kaffee</li>
  <li style="list-style-type:square">Tee</li>
  <li>Milch</li>
</ul>

Versuchen Sie es selbst

Beispiel 4

Eine Liste in der Liste erstellen (eingerückte Liste):

<ul>
  <li>Kaffee</li>
  <li>Tee
    <ul>
      <li>Pu'er
      <li>Grüntee</li>
    </ul>
  </li>
  <li>Milch</li>
</ul>

Versuchen Sie es selbst

Beispiel 5

Erstellen Sie eine komplexere verschachtelte Liste:

<ul>
  <li>Kaffee</li>
  <li>Tee
    <ul>
      <li>Pu'er
      <li>Grüntee
        <ul>
          <li>Biluochun</li>
          <li>Longjing</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Milch</li>
</ul>

Versuchen Sie es selbst

Attribute

Attribute Wert Beschreibung
value Zahl Gilt nur für <ol>-Listen. Legt den Startwert der Liste fest. Die folgenden Listenelemente erhöhen sich von dieser Zahl ab.

Globale Attribute

<li> Der Tag unterstützt auch Globale Attribute in HTML.

Ereignisattribute

<li> Der Tag unterstützt auch Ereignisattribute in HTML.

Standardmäßige CSS-Einstellungen

Die meisten Browser verwenden folgende Standardwerte zur Anzeige <li> Element:

li {
  display: list-item;
}

Browserkompatibilität

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Unterstützung Unterstützung Unterstützung Unterstützung Unterstützung