HTML <ol> Tag

Definition und Verwendung

<ol> Der Tag definiert eine geordnete Liste. Eine geordnete Liste kann numerisch oder alphabetisch sein.

<li> Der Tag wird verwendet, um jeden Listeneintrag zu definieren.

Hinweis:Verwenden Sie CSS, um Listenstile zu setzen.

Hinweis:Für unordnete Listen verwenden Sie <ul>-Tag.

Siehe auch:

HTML-Tutorial:HTML Liste

HTML DOM Referenzhandbuch:Ol-Objekt

CSS-Tutorial:Listenstilen einstellen

Beispiel

Beispiel 1

Zwei verschiedene geordnete Listen (der erste Listeneintrag beginnt bei 1, der zweite bei 50):

<ol>
  <li>Kaffee</li>
  <li>Tee</li>
  <li>Milch</li>
</ol>
<ol start="50">
  <li>Kaffee</li>
  <li>Tee</li>
  <li>Milch</li>
</ol>

Probieren Sie es selbst aus

Beispiel 2

Verschiedene Listenarten einstellen (verwenden Sie CSS):

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

Probieren Sie es selbst aus

Beispiel 3

Durch CSS werden alle verfügbaren verschiedenen Listenarten angezeigt:

<style>
ol.a {list-style-type: armenian;}
ol.b {list-style-type: cjk-ideographic;}
ol.c {list-style-type: decimal;}
ol.d {list-style-type: decimal-leading-zero;}
ol.e {list-style-type: georgian;}
ol.f {list-style-type: hebrew;}
ol.g {list-style-type: hiragana;}
ol.h {list-style-type: hiragana-iroha;}
ol.i {list-style-type: katakana;}
ol.j {list-style-type: katakana-iroha;}
ol.k {list-style-type: lower-alpha;}
ol.l {list-style-type: lower-greek;}
ol.m {list-style-type: lower-latin;}
ol.n {list-style-type: lower-roman;}
ol.o {list-style-type: upper-alpha;}
ol.p {list-style-type: upper-latin;}
ol.q {list-style-type: upper-roman;}
ol.r {list-style-type: none;}
ol.s {list-style-type: inherit;}
</style>

Probieren Sie es selbst aus

Beispiel 4

Verkleinern und Vergrößern der Zeilenhöhe der Liste (verwenden Sie CSS):

<ol style="line-height:80%">
  <li>Kaffee</li>
  <li>Tee</li>
  <li>Milch</li>
</ol>
<ol style="line-height:180%">
  <li>Kaffee</li>
  <li>Tee</li>
  <li>Milch</li>
</ol>

Probieren Sie es selbst aus

Beispiel 5

Einfügen einer ungerichteten Liste in eine geordnete Liste:

<ol>
  <li>Kaffee</li>
  <li>Tee</li>
    <ul>
      <li>Longjing</li>
      <li>Pu'er</li>
    </ul>
  </li>
  <li>Milch</li>
</ol>

Probieren Sie es selbst aus

Eigenschaft

Eigenschaft Wert Beschreibung
umgekehrt umgekehrt Definiert, dass die Liste in umgekehrter Reihenfolge sein sollte (9,8,7 ...).
start Zahlen Definiert den Startwert einer geordneten Liste.
Art
  • 1
  • A
  • a
  • I
  • i
 legt den zu verwendenden Markentyp für die Liste fest.

Globale Attribute

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

Ereignisattribute

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

Standard CSS-Einstellungen

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

ol {
  display: block;
  list-style-type: decimal;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;
}

Probieren Sie es selbst aus

Browserkompatibilität

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