X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

HTML-Tag <li>

Das Tag <li> definiert die einzelnen Punkte der HTML-Liste. Der Listentyp wird durch entsprechende Tags definiert: <ul> - ungeordnete Liste, <ol> - geordnete Liste, <menu> - Kontextmenü.

Syntax

Das Tag <li> wird gepaart verwendet. In HTML5-Specification kann man das Endtag nicht verwenden.

Das Tag <li> ist ein Block-Element, d.h., dass sein Inhalt eine ganze Zeile braucht, alle weiteren Elemente werden auf andere Zeile übertragen.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
  </head>
  <body>
       <p>Geordnete Liste:</p>
       <ol>
  	 <li>Büfett</li>
	 <li>Hauptgericht</li>
  	 <li>Salate</li>
	</ol>
	<p>Ungeordnete Liste</p>
	<ul>
  	   <li>Erfrischungsgetränke</li>
  	   <li>Heiße Getränke</li>
  	   <li>Eis</li>
	</ul>
   </body>
</html>

Ergebnis

Um das Tag <li> zu gestalten, verwenden Sie die CSS-Eigenschaft list-style-type.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      ul.a {
       list-style-type: circle;
      }
      ul.b {
        list-style-type: square;
      }
      ol.c {
        list-style-type: upper-roman;
      }
      ol.d {
        list-style-type: lower-alpha;
      }
    </style>
  </head>
  <body>
    <h1>Die Eigenschaft list-style-type</h1>
    <p>Ein Beispiel für ungeordnete Liste:</p>
    <ul class="a">
      <li>Kaffee</li>
      <li>Tee</li>
      <li>Coca Cola</li>
    </ul>
    <ul class="b">
      <li>Kaffee</li>
      <li>Tee</li>
      <li>Coca Cola</li>
    </ul>
    <p>Ein Beispiel für geordnete Liste:</p>
    <ol class="c">
      <li>Kaffee</li>
      <li>Tee</li>
      <li>Coca Cola</li>
    </ol>
    <ol class="d">
      <li>Kaffee</li>
      <li>Tee</li>
      <li>Coca Cola</li>
    </ol>
  </body>
</html>

Ergebnis

Attribute

Attribut Wert Beschreibung
type 1
A
a
I
i
disc
square
circle
Es definiert den Typ des Aufzählungszeichens.
Dieses Attribut wird nicht mehr verwendet. Stattdessen empfehlen wir Ihnen die CSS-Eigenschaft list-style-type oder list-style-image, wodurch man Bilder verwenden kann.
value number Es definiert die Zahl, von dem geordnete Liste anfangen wird. Es können negative Werte verwendet werden.
Es funktioniert nur mit der geordneten Liste.

Das Tag <li> unterschtützt Globale Attribute und Globale Eventhandler.


Browser-Support



Finden Sie das nützlich?

Ähnliche Artikel