HTML
Listen

Einführung

Syntax

• <ol> ordered list items </ol>
• <ul> unordered list items </ul>
• <li> list item (ordered and not) </li>
• <dl> description list items </dl>
• <dt> description list title </dt>
• <dd> description list description </dd>

Bemerkungen

Ungeordnete Liste

Eine ungeordnete Liste kann mit dem Tag <ul> und jedes Listenelement kann mit dem Tag <li> wie im folgenden Beispiel gezeigt:

<ul>
  <li>Item</li>
  <li>Another Item</li>
  <li>Yet Another Item</li>
</ul>

Dadurch wird eine Liste mit Aufzählungszeichen (Standardstil) erstellt:

• Artikel
• Ein anderer Artikel
• Noch ein weiterer Artikel

Sie sollten ul , um eine Liste von Elementen anzuzeigen, bei denen die Reihenfolge der Elemente nicht wichtig ist. Wenn die Liste durch Ändern der Reihenfolge falsch ist, sollten Sie <ol> .

Bestellliste

Mit dem <ol> -Tag kann eine geordnete Liste erstellt werden. Jedes Listenelement kann mit dem <li> -Tag wie im folgenden Beispiel erstellt werden:

<ol>
  <li>Item</li>
  <li>Another Item</li>
  <li>Yet Another Item</li>
</ol>

Dadurch wird eine nummerierte Liste erstellt (Standardeinstellung):

1. Artikel
2. Ein anderer Artikel
3. Noch ein weiterer Artikel

Manuelles Ändern der Zahlen

Es gibt verschiedene Möglichkeiten, wie Sie mit den Nummern auf den Listenelementen einer geordneten Liste spielen können. Die erste Möglichkeit besteht darin, eine Startnummer mithilfe des start festzulegen. Die Liste beginnt bei dieser definierten Nummer und wird wie gewohnt um eins erhöht.

<ol start="3">
  <li>Item</li>
  <li>Some Other Item</li>
  <li>Yet Another Item</li>
</ol>

Dadurch wird eine nummerierte Liste erstellt (Standardeinstellung):

3. Artikel
4. Einige andere Artikel
5. Noch ein weiterer Artikel

Sie können einen bestimmten Listeneintrag auch explizit auf eine bestimmte Nummer setzen. Weitere Listenelemente nach einem mit einem bestimmten Wert werden um einen weiteren Wert von diesem Listenelement erhöht, wobei die Position der übergeordneten Liste ignoriert wird.

<li value="7"></li>

Es ist auch erwähnenswert, dass Sie durch Verwendung des value Attributs direkt für ein Listenelement das vorhandene Nummerierungssystem einer geordneten Liste überschreiben können, indem Sie die Nummerierung mit einem niedrigeren Wert erneut starten. Wenn also die übergeordnete Liste bereits den Wert 7 erreicht hat und ein Listenelement mit dem Wert 4 gefunden wurde, wird dieses Listenelement immer noch als 4 angezeigt und von diesem Punkt an weiter gezählt.

<ol start="5">
  <li>Item</li>
  <li>Some Other Item</li>
  <li value="4">A Reset Item</li>
  <li>Another Item</li>
  <li>Yet Another Item</li>
</ol>

Im obigen Beispiel wird also eine Liste erstellt, die dem Nummerierungsmuster von 5, 6, 4, 5, 6 folgt - beginnend mit einer niedrigeren Nummer als der vorherigen und mit der Nummer 6 in der Liste.

Hinweis: Die start und value - Attribute akzeptieren nur eine Zahl - auch wenn die geordnete Liste gesetzt wird , wie römische Ziffern oder Buchstaben angezeigt werden soll .

<ol reversed>
  <li>Item</li>
  <li>Some Other Item</li>
  <li value="4">A Reset Item</li>
  <li>Another Item</li>
  <li>Yet Another Item</li>
</ol>

Die Art der Ziffer ändern

Sie können den Typ der in der Listenelementmarkierung angezeigten Zahl einfach mit dem type Attribut ändern

<ol type="1|a|A|i|I">

Sie sollten ol , um eine Liste von Artikeln anzuzeigen, bei denen die Artikel absichtlich bestellt wurden und die Reihenfolge hervorgehoben werden sollte. Wenn das Ändern der Reihenfolge der Elemente die Liste NICHT falsch macht, sollten Sie <ul> .

Beschreibungsliste

Eine Beschreibungsliste (oder Definitionsliste , wie sie vor HTML5 aufgerufen wurde) kann mit dem dl Element erstellt werden. Es besteht aus Name-Wert-Gruppen, wobei der Name im dt Element und der Wert im dd Element angegeben ist.

<dl>
  <dt>name 1</dt>
  <dd>value for 1</dd>
  <dt>name 2</dt>
  <dd>value for 2</dd>
</dl>

Live-Demo

Eine Name-Wert-Gruppe kann mehr als einen Namen und / oder mehr als einen Wert haben (die Alternativen darstellen):

<dl>

  <dt>name 1</dt>
  <dt>name 2</dt>
  <dd>value for 1 and 2</dd>

  <dt>name 3</dt>
  <dd>value for 3</dd>
  <dd>value for 3</dd>

</dl>

Live-Demo

Verschachtelte Listen

Sie können Listen verschachteln, um Unterelemente eines Listenelements darzustellen.

<ul>
  <li>item 1</li>
  <li>item 2
    <ul>
      <li>sub-item 2.1</li>
      <li>sub-item 2.2</li>
    </ul>
  </li>
  <li>item 3</li>
</ul>

• Gegenstand 1
• Punkt 2
  • Unterposition 2.1
  • Unterposition 2.2
• Punkt 3

Die verschachtelte Liste muss ein Kind des Elements li .

Sie können auch verschiedene Arten von Listen verschachteln:

<ol>
    <li>Hello, list!</li>
    <li>
        <ul>
            <li>Hello, nested list!</li>
        </ul>
    </li>
</ol>