Für die Implementierung wird das ol-Tag verwendet. Zeilennummern (Ziffern) in geordneten Listen formatieren ol. Schöne und richtige Art und Weise

Hallo, liebe Leser! Als Fortsetzung der Artikelreihe im Bereich „HTML-Grundlagen“ möchte ich Ihnen heute den Algorithmus zum Erstellen vorstellen listet HTML auf mittels Tags ul und li (Bullet-Liste), ol und li (nummerierte Liste), dl, dt, dd (Definitionsliste).

Jetzt werde ich Ihnen weiterhin die am häufigsten verwendeten vorstellen mit HTML-Tags, die zum Erstellen von Listen auf Site-Seiten verwendet werden. Wenn jemand nicht weiß, was das ist, wird er nach den unten erhaltenen Informationen sicherlich sofort verstehen, wovon wir sprechen, da diese Form der Präsentation des Materials sehr verbreitet ist.

HTML-Listen mit Aufzählungszeichen – ul- und li-Tags

Die Aufzählungsliste wird durch das ul-Tag definiert. Zwischen den öffnenden und schließenden ul-Tags liegen Listenelemente, deren Inhalte wiederum jeweils zwischen den öffnenden und schließenden li-Tags liegen müssen. Ich möchte sofort darauf hinweisen, dass das ul-Tag gepaart ist (das Vorhandensein eines öffnenden und schließenden Tags) und auch auf Blockebene, das heißt, es bildet einen Container, der Elemente (Linien) enthält, die jedes Mal durch das li-Tag gebildet werden. Dementsprechend ist das li-Tag gepaart und kleingeschrieben.

Das Standarderscheinungsbild einer Markierung ist ein gefüllter Kreis. Sie können das Erscheinungsbild jedoch ändern, indem Sie das Attribut „type“ verwenden, das die folgenden Werte hat: Scheibe, Kreis, Quadrat. Der Disc-Wert (der das Erscheinungsbild der Markierung als gefüllten Kreis bestimmt) ist die Standardeinstellung. Das heißt, wenn das Typattribut nicht angegeben ist, sieht die Markierung wie ein gefüllter Kreis aus. Wenn wir diese Attribute zum ul-Tag hinzufügen, erhalten wir die folgenden Optionen:

Natürlich ist jeder Marker ein separates Element Liste mit Aufzählungszeichen Sie können ihm Ihr eigenes Aussehen verleihen, indem Sie die entsprechenden Werte für das Typattribut angeben.

Nummerierte HTML-Listen – ol- und li-Tags

Sehen wir uns nun an, wie eine nummerierte Liste mithilfe von ol-Tags (einem Block- und Paar-Tag ähnlich ul) erstellt wird. Der li-Tag wird hier auch als Tag verwendet, der die Elemente einer nummerierten Liste in HTML definiert. Eine nummerierte Liste ist eine Sammlung nummerierter Elemente. Die Art der Nummerierung wird durch das Attribut type bestimmt, das folgende Werte annehmen kann:

• A - lateinische Großbuchstaben;
• a - lateinische Kleinbuchstaben;
• I – große römische Ziffern;
• i – römische Kleinbuchstaben;
• 1 - Arabische Ziffern

Sie können auch eine nummerierte Liste bereitstellen, in der die Elemente in umgekehrter Reihenfolge nummeriert sind, zum Beispiel: 3, 2, 1. Dies erfolgt mithilfe des Reserveattributs des ol-Tags.

Es besteht auch die Möglichkeit, eine Liste mit Aufzählungszeichen mit einer anderen Zahl als 1 zu beginnen. Zu diesem Zweck können Sie das Startattribut verwenden. Dabei spielt es keine Rolle, auf welchen Wert das Typattribut gesetzt ist. Sehen Sie sich ein Beispiel für die Verwendung des Namensattributs in Verbindung mit verschiedenen Typattributwerten (1 und I) an:

HTML-Definitionslisten – dl-, dd-, dt-Tags

Eine andere Art von HTML-Liste ist eine Definitionsliste. Es wird wie folgt gebildet. Der Inhalt dieser Liste liegt zwischen den öffnenden und schließenden dl-Tags, die den Container bilden. Das dt-Tag definiert einen Begriff und das dd-Tag beschreibt diesen Begriff.

Wie Sie sehen können, wird der Inhalt des dt-Tags, bei dem es sich um einen Begriff handelt, nach links verschoben, und der Inhalt des dd-Tags, bei dem es sich um die Definition dieses Begriffs handelt, wird kursiv geschrieben. All dies wird durch die Verwendung verschiedener CSS-Stile erreicht, über die wir sicherlich in kommenden Veröffentlichungen sprechen werden.

Übrigens sind die modernen Realitäten so Sprache HTML kann nicht isoliert betrachtet werden. Um diese wichtigen Materialien nicht zu verpassen, abonnieren Sie daher Blog-Updates per RSS-Feed oder per E-Mail. Damit ist das Thema des heutigen Artikels abgeschlossen. Wenn Sie die erforderlichen Informationen erhalten haben, lehnen Sie die Nutzung der Schaltflächen des sozialen Netzwerks nicht ab.

Die Hypertext-Auszeichnungssprache HTML verfügt über ein Tag

, wird zum Erstellen von Listen mit Aufzählungszeichen verwendet. Es wird von allen modernen Browsern unterstützt und ermöglicht die Anzeige von Elementen in einer Reihenfolge, die keine Nummerierung erfordert. Beispielsweise werden sehr oft Menüpunkte und alles, was mit Listen zu tun hat, auf der Seite angezeigt: Gerichte, Produkte, Geräte, Werkzeuge und vieles mehr, was aufgelistet werden muss, ohne die Priorität eines bestimmten Artikels anzugeben.

Tag-Syntax

• Element Nr. 1
• Element Nr. 2
• Element Nr. 3
• ...

Dieser Code wird in eine Liste mit Aufzählungszeichen auf der Website übersetzt:

• Element Nr. 1
• Element Nr. 2
• Element Nr. 3

Etikett

erfordert die obligatorische Verwendung eines schließenden Tags
.

Um Listenelemente zu bilden, wird ein gepaartes Tag verwendet. Zwischen den öffnenden und schließenden Tags befinden sich einzelne Wörter, Phrasen, Absätze, Bilder, Codeteile und vieles mehr, die den Inhalt der Aufzählungsliste bilden.

Was kann der Inhalt einer Aufzählungsliste sein?

Dabei kann es sich um eine Vielzahl von Texten handeln, darunter einzelne Wörter, Phrasen und Absätze, Bilder, verschachtelte Listen, Teile von PHP-Code und vieles mehr, die einer einfachen Markierung bedürfen.

Jedes Listenelement mit Aufzählungszeichen ist standardmäßig um 40 Pixel nach rechts eingerückt. Benutzen CSS-Stile, können wir die Anzeige dieser Liste nach unserem Ermessen ändern. Etikett

ist blockbasiert, nimmt also die gesamte ihm zur Verfügung stehende Fläche ein, begrenzt durch den Bildschirmrand, den Tabellenrahmen oder andere Seitenelemente.
Listenanhänge innerhalb einer Liste sind zulässig.

Zum Beispiel

• Element Nr. 1
• • Punkt Nr. 2-1
  • Element Nr. 2-2
  • Element Nr. 2-3
• Element Nr. 3
• ...

Tag-Attribute und -Eigenschaften

Weit verbreitetes Tag-Attribut

ist ein Typattribut, das angibt, wie die Listenmarkierung aussehen wird. Kann die folgenden Werte annehmen

1. type="disc" – Markierung in Form eines gefüllten Kreises (dieser Wert ist der Standardwert). Das Festplattenbeispiel war etwas höher.

2. type="circle" – Markierung in Form eines transparenten Kreises

Zum Beispiel:

• Element Nr. 1
• Element Nr. 2

• Element Nr. 1
• Element Nr. 2

3. type="square" – Markierung in Form eines Quadrats

Zum Beispiel:

• Element Nr. 1
• Element Nr. 2

Und so sieht es auf der Seite aus:

• Element Nr. 1
• Element Nr. 2
Anmerkung 1

In CSS wird der Aufzählungstyp mithilfe des list-style-type-Attributs angegeben:

• ...

Schauen wir uns an, welche Werte list-style-type annehmen kann:

• Scheibe – Markierung in Form eines Kreises (Beispiel oben)
• Kreis – Markierung in Form eines transparenten Kreises (Beispiel oben)
• Quadrat – Markierung in Form eines Quadrats (Beispiel oben)
• Dezimalzahl - Markierung in Form einer nummerierten Liste in arabischen Ziffern: 1, 2, 3, ...
• decimal-leading-zero – eine Markierung in Form einer nummerierten Liste in arabischen Ziffern mit einer führenden Null: 01, 02, 03, ...
• niederromanisch – eine Markierung in Form einer nummerierten Liste im römischen Alphabet in Kleinbuchstaben: i, ii, iii, iv, v
• Oberrömisch - Markierung in Form einer nummerierten Liste im römischen Alphabet in Großbuchstaben: I, II, III, IV, V
• Niederlatein - Markierung in Form einer Liste im lateinischen Alphabet in Kleinbuchstaben: a, b, c, d, ...
• Oberlatein - Markierung in Form einer Liste im lateinischen Alphabet in Großbuchstaben: A, B, C, D, ...
• Niedergriechisch – eine Markierung in Form einer Liste im griechischen Alphabet in Kleinbuchstaben
• Obergriechisch – eine Markierung in Form einer Liste im griechischen Alphabet in Großbuchstaben
Anmerkung 2

Das Attribut kann dem Tag selbst zugewiesen werden

, und Tags
• . Beim Festlegen eines Attributs für ein Tag
  Alle Listenelemente werden wie durch das Attribut angegeben angezeigt. Aber wir können diesem oder jenem Element eine eigene Darstellung geben. Beispiel im Bild:

  Der Code sieht so aus:

  • Element Nr. 1
  • Element Nr. 2
  • Element Nr. 3

  • Element Nr. 1
  • Element Nr. 2
  • Element Nr. 3

  Tag-Markierungen ändern

  mit CSS

  Nach Tag erstellte Aufzählungslistenelemente

  , kann mit beliebigen Bildern markiert werden. CSS wird verwendet, um den Markierungstyp zu ändern. Zum Beispiel

  • Element Nr. 1
  • Element Nr. 2
  • Element Nr. 3

  Und so sieht es auf der Seite aus:

  • Element Nr. 1
  • Element Nr. 2
  • Element Nr. 3

  C mit CSS Wir können andere Arten der Markierungsanzeige festlegen. Aber Sie müssen das bedenken, wenn Sie einen Stil für ein Tag angeben

  , gilt es für alle Elemente der Liste.

  Der einzige Unterschied besteht darin, dass dieses Tag ausschließlich für Nummerierungslisten gedacht ist. Der Name des Tags leitet sich von der englischen Abkürzung „Ordered List“ ab – einer nummerierten Liste.

  Tag-Syntax

  1. Element Nr. 1
  2. Element Nr. 2
  3. Element Nr. 3
  4. ...

  Dabei kann das Attribut type="value" die folgenden Werte annehmen

  • A – setzt Markierungen in Form von lateinischen Großbuchstaben (A, B, C...);
  • a – setzt Markierungen in Form von lateinischen Kleinbuchstaben (a, b, c..);
  • I – setzt Markierungen in Form großer römischer Ziffern (I, II, III, IV..);
  • i – setzt Markierungen in Form kleiner römischer Ziffern (i, ii, iii, iv..);
  • 1 (Standard) – setzt Markierungen in Form arabischer Ziffern (1, 2, 3...);

  Das Attribut start="value" gibt den Anfangswert (Startwert) des Berichts an.

  Das umgekehrte Attribut gibt die umgekehrte Zählung an (falls erforderlich).

  Etikett

  erfordert die obligatorische Verwendung eines schließenden Tags

  Um Listenelemente zu bilden, wird ein gepaartes Tag verwendet

  • . Zwischen den öffnenden und schließenden Tags befinden sich einzelne Wörter, Phrasen, Absätze, Bilder, Codeteile und vieles mehr, die den Inhalt der Aufzählungsliste bilden.

    Notiz

    Innerhalb der Liste können Sie das Konto in Ihr eigenes ändern. Zu diesem Zweck gibt es auf dem Tag ein spezielles Attribut value="".

  • , dem ein numerischer Wert zugewiesen ist. Zum Beispiel

    1. Element Nr. 1
    10. Element Nr. 2
    11. Element Nr. 3

  Beispiele mit nummerierten Listen in HTML (

  )

  Beispiel 1. HTML-nummerierte Liste in lateinischen Buchstaben

  Beispiel mit Großbuchstaben

  1. Element Nr. 1
  2. Element Nr. 2
  3. Element Nr. 3

  1. Element Nr. 1
  2. Element Nr. 2
  3. Element Nr. 3

  Beispiel mit Kleinbuchstaben

  1. Element Nr. 10
  2. Element Nr. 11
  3. Element Nr. 12

  So sieht es auf der Seite aus:

  1. Element Nr. 1
  2. Element Nr. 2
  3. Element Nr. 3

  Beispiel 2. HTML-nummerierte Liste in lateinischen Buchstaben

  Beispiel mit Großbuchstaben

  1. Element Nr. 1
  2. Element Nr. 2
  3. Element Nr. 3

  So sieht es auf der Seite aus:

  1. Element Nr. 1
  2. Element Nr. 2
  3. Element Nr. 3

  Beispiel mit Kleinbuchstaben

  1. Element Nr. 1
  2. Element Nr. 2
  3. Element Nr. 3

  So sieht es auf der Seite aus:

  1. Element Nr. 1
  2. Element Nr. 2
  3. Element Nr. 3

  Beispiel 3. Nummerierte HTML-Liste mit unterschiedlicher Startposition

  Ein Beispiel, das die Fähigkeiten des Startattributs zeigt, mit dem Sie den Startwert des Zählers festlegen können.

  50. Element Nr. 1
  51. Element Nr. 2
  52. Element Nr. 3

  So sieht es auf der Seite aus:

  1. Element Nr. 1
  2. Element Nr. 2
  3. Element Nr. 3

  Beispiel 4. Ändern der Anzahl in nummerierten HTML-Listen

  Unten finden Sie ein Beispiel mit der Möglichkeit, Zählerwerte mithilfe des Wertattributs zu ändern, wenn neue Elemente in Tags angezeigt werden

  • .

    10. Element Nr. 1
    11. Element Nr. 2
    100. Element Nr. 3
    101. Element Nr. 4

    So sieht es auf der Seite aus:

    1. Element Nr. 1
    2. Element Nr. 2
    3. Element Nr. 3
    4. Element Nr. 4

    Beispiel 5. Umgekehrt nummerierte Liste in HTML

    Nachfolgend finden Sie ein Beispiel für eine umgekehrt nummerierte Liste (Zählung in umgekehrter Reihenfolge).

    10. Element Nr. 1
    11. Element Nr. 2
    12. Element Nr. 3
    13. Element Nr. 4

    So sieht es auf der Seite aus:

    1. Element Nr. 1
    2. Element Nr. 2
    3. Element Nr. 3
    4. Element Nr. 4
    Wenn Sie sich entscheiden, die Standard-UL- und LI-Listen zu ändern, wird dieses Thema für Sie interessant sein. Denn hier erfahren Sie mehrere originelle Lösungen. Was Ihnen auf jeden Fall bei der Veränderung helfen wird Standard Ansicht zu einem einzigartigen, wo der CSS-Stil geht, für die Gestaltung von Listen. Der Vorteil besteht darin, dass wir durchgehend nur eine Klasse verwenden, was das Erscheinungsbild radikal verändern wird. Zusätzlich zu diesen Parametern können Sie festlegen, bei welcher Nummer die Liste beginnen soll; hier können Sie alles selbst machen. Der Standardstartwert für nummerierte Listen liegt beim ersten oder Buchstaben A.

    Nachdem wir die Grundlagen geklärt haben, werfen wir nun einen genaueren Blick auf die Elemente, die den verschiedenen Teilen eines Designs Struktur und Bedeutung verleihen. Wenn es jemand nicht weiß, dann sind ul und li eine viel bessere Option als einfach Texttext denn wenn Text umbrochen wird, insbesondere in Mobiltelefon, es rückt perfekt ein und wickelt sich nicht um den Marker.

    Listen gelten als eine hervorragende Möglichkeit, Informationen auf Seiten darzustellen, da sie leicht zu lesen sind und gut aussehen. Viele Leute scheinen zu denken, dass Aufzählungspunkte kleine Bilder sind, aber tatsächlich werden sie alle durch ziemlich einfachen HTML-Code erstellt. Sie können einbetten verschiedene Typen Wenn Sie möchten, können Sie Listen ineinander verschieben. Denken Sie jedoch daran, sie korrekt zu schließen. Sie können in allen diesen Listenbefehlen mit dem gewünschten Text spielen.

    Sie müssen außerdem wissen, dass Listen zunächst mehrere Elemente enthalten:

    1 . Unorganisierte Informationen.
    2 . Organisierte Informationen.
    3 . Definitionen.

    Beginnen wir mit der Installation:

    1. Option:

    
    
    • Listenpunkt
    
    
    • Einzigartige Liste
    
    
    • Originallisten
    
    
    • ZORNET.RU - Webmaster
    
    
    • Eine weitere Liste
    
    
    
    CSS

    Ksangelopan (
    Rand: 19px 0 0;
    Polsterung:0;
    Listenstil: keiner;
    Zähler-Reset: li;
    }
    .ksangelopan li (
    Rand: 2 Pixel durchgehend #3575ad;
    Hintergrund: #d7dee4;
    Position: relativ;
    Rand unten: 17px;
    Polsterung: 15px 9px;
    }
    .ksangelopan li:hover (
    Z-Index: 1;
    }
    .ksangelopan li:before (
    Rand: 2px solide #2270b3;
    Position: absolut;
    oben: -14px;
    Polsterung: 3px 9px;
    Schriftgröße: 11px;
    Schriftdicke: fett;
    Farbe: #246eaf;
    Hintergrund: #f2f4f7;
    Zählerinkrement: li;
    Inhalt: counter(li);
    -Webkit-Übergangsdauer: 0,4 s;
    Übergangsdauer: 0,4 s;
    }
    .ksangelopan li:hover:before (
    Hintergrund: #2672b3;
    Farbe: #f7f9fb;
    -webkit-transform: Translate(-11px, 0);
    -ms-transform: Translate(-11px, 0);
    -o-transform: Translate(-11px, 0);
    transform: Translate(-11px, 0);
    }
    .ksangelopan li:after (
    Inhalt: "";
    Position: absolut;
    Übergangsdauer: 0,3 s;
    -webkit-transition-property: width;
    Übergangseigenschaft: Breite;
    Z-Index: -1;
    Hintergrund: #FFF;
    Höhe: 100 %;
    links: 0;
    oben: 0;
    Breite: 0;
    }
    .ksangelopan li:hover:after (
    Breite: 100 %;
    }

    
    Das ist alles für die Installation.

    2 Zweite Möglichkeit:

    

    
    
    • Listenpunkt
    
    
    • Einzigartige Liste
    
    
    • Originallisten
    
    
    • ZORNET.RU - Webmaster
    
    
    • Eine weitere Liste
    
    
    
    CSS

    Beleduzlopamges (
    Rand unten: 8px;
    Polsterung:0;
    Listenstil: keiner;
    Zähler-Reset: li;
    }
    .beleduzlopamges li (
    Position: relativ;
    Rand: 2 Pixel durchgehend #195588;
    Hintergrund: #eff3f7;
    Polsterung: 15px 19px 15px 27px;
    Rand: 12px 0 12px 40px;
    -Webkit-Übergangsdauer: 0,3 s;
    Übergangsdauer: 0,3 s;
    }
    .beleduzlopamges li:hover (
    Hintergrund: #FFF;
    }
    .beleduzlopamges li:before (
    Zeilenhöhe: 32px;
    Position: absolut;
    oben: 4px;
    links: -39px;
    Breite: 39px;
    Textausrichtung: Mitte;
    Schriftgröße: 16px;
    Schriftdicke: fett;
    Farbe: #f9f5f5;
    Hintergrund: #275b88;
    Zählerinkrement: li;
    Inhalt: counter(li);
    Übergangsdauer: 0,2 s;
    }
    .beleduzlopamges li:hover:before (
    Breite:46px;
    }
    .beleduzlopamges li:after (
    Position: absolut;
    links: 0;
    oben: 4px;
    Inhalt: "";
    Höhe: 0;
    Breite: 0;
    Rand: 16 Pixel durchgehend transparent;
    Rand-Links-Farbe: #275b88;
    -Webkit-Übergangsdauer: 0,2 s;
    Übergangsdauer: 0,2 s;
    }
    .beleduzlopamges li:hover:after (
    Rand links: 6px;
    }

    
    Sie können den mittleren Gammawert unabhängig voneinander so einstellen, dass er zum Hauptstil der Website passt.

    3 Dritte Möglichkeit:

    

    
    
    • Skripte für uCoz
    
    
    • Vorlagen für uCoz
    
    
    • Website design
    
    
    • Website-Stile
    
    
    • Styling mit CSS
    
    
    
    CSS

    Nizualisanelag (
    Polsterung:0;
    Listenstil: keiner;
    Zähler-Reset: li;
    }
    .nizualisanelag li (
    Position: relativ;
    Polsterung: 9px 17px 17px 25px;
    Rand links: 39px;
    Übergangsdauer: 0,2 s;
    Cursor: Zeiger;
    Schriftdicke: fett;
    Farbe: #343638;
    }
    .nizualisanelag li:before (
    Rand: 3 Pixel durchgehend transparent;
    Zeilenhöhe: 35px;
    Position: absolut;
    oben: 0;
    links:-29px;
    Breite:41px;
    text-align:center;
    Schriftgröße: 14px;
    Schriftdicke: fett;
    Farbe: #619dce;
    Zählerinkrement: li;
    Inhalt: counter(li);
    Übergangsdauer: 0,3 s;
    
    Boxgröße: border-box;
    }
    .nizualisanelag li:hover:before (
    Farbe: #337AB7;
    }
    .nizualisanelag li:after (
    Position: absolut;
    oben: 0;
    links: -29px;
    Breite: 41px;
    Höhe: 41px;
    Rand: 5 Pixel fest #468bd0;
    Randradius: 50 %;
    Inhalt: "";
    Deckkraft: 0,5;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    Boxgröße: border-box;
    }
    .nizualisanelag li:hover:after (
    Animation: 500 ms Ease-in-out 0 s bounceIn;
    Deckkraft: 1;
    }

    @keyframes bounceIn (
    0% {
    Deckkraft: 0;
    transformieren: scale3d(.3, .3, .3);
    }
    20% {
    transformieren: scale3d(1.3, 1.3, 1.3);
    }
    40% {
    transform: scale3d(.9, .9, .9);
    }
    60% {
    Deckkraft: 1;
    transformieren: scale3d(1.03, 1.03, 1.03);
    }
    80% {
    transformieren: scale3d(.97, .97, .97);
    }
    Zu (
    Deckkraft: 1;
    transformieren: scale3d(1, 1, 1);
    }
    }

    
    Kommt mit schöner Animation.

    4 Vierte Möglichkeit:

    

    
    
    • Das erste Element für die Site
    
    
    • Zweites Element für die Site
    
    
    • Drittes Element für die Website
    
    
    • Das vierte Element für die Site
    
    
    • Das fünfte Element für die Site
    
    
    
    CSS

    Polsterung:0;
    Listenstil: keiner;
    }
    .kudezamuden li(
    Polsterung:6px;
    }
    .kudezamuden li:before (
    padding-right: 11px;
    Schriftdicke: fett;
    Farbe: #4979a0;
    Inhalt: "\2606";
    Übergangsdauer: 0,4 s;
    }
    .kudezamuden li:hover:before (
    Farbe: #235e90;
    Inhalt: "\2605";
    }

    
    Ähnlich vorherige Versionen, nur das Symbol selbst wurde geändert.

    Im Allgemeinen handelt es sich hierbei um eine kleine Auswahl an Listen, die der Webmaster erstellen kann schöne Liste auf dem Portal, wo er es selbst mehr gestalten kann, als er es selbst sehen möchte.

    Wenn Sie Elemente in eine nummerierte Liste statt in eine Liste mit Aufzählungszeichen einfügen müssen, wird geordneter HTML-Code verwendet. Diese Liste wird mit dem ol-Tag erstellt. Die Nummerierung beginnt bei eins und erhöht sich für jedes nachfolgende geordnete Listenelement mit dem li-Tag um eins.

    HTML-Listen Wird verwendet, um zusammengehörige Informationen zu gruppieren. Es gibt drei Arten von Listen:

    Liste mit Aufzählungszeichen —

    - jedes Element der Liste
    • mit einem Marker markiert,
      nummerierte Liste —
      - jedes Element der Liste
      1. mit einer Nummer gekennzeichnet
         Liste der Definitionen- - besteht aus Begriffspaaren
         —
         Definition.

         Jede Liste ist ein Container, in dem sich Listenelemente oder Begriffsdefinitionspaare befinden. Listenelemente verhalten sich wie Blockelemente, sie sind untereinander gestapelt und nehmen die gesamte Breite des Containerblocks ein. Jedes Listenelement verfügt über einen zusätzlichen Block an der Seite, der nicht am Layout beteiligt ist.

         HTML-Listen erstellen

         1. Aufzählungsliste

         Liste mit Aufzählungszeichen ist eine ungeordnete Liste (aus der englischen ungeordneten Liste). Erstellt mit Tag-Paar

         . Die Markierung eines Listenelements ist eine Beschriftung, beispielsweise ein ausgefüllter Kreis.

         Browser fügen dem Listenblock standardmäßig die folgende Formatierung hinzu:

         Jedes Listenelement wird mithilfe eines gepaarten Tags erstellt

      2. (aus dem englischen List Item).
      verfügbar .
      • Microsoft
      • Google
      • Apfel
      Reis. 1. Aufzählungsliste

      2. Nummerierte Liste

      Nummerierte Liste wird mithilfe eines gepaarten Tags erstellt. Jedes Listenelement wird ebenfalls mithilfe des Elements erstellt

    • . Der Browser nummeriert die Elemente automatisch der Reihe nach. Wenn Sie ein oder mehrere Elemente einer solchen Liste löschen, werden die verbleibenden Nummern automatisch neu berechnet.

      Der Listenblock verfügt auch über Standardbrowserstile:

    • Das Wertattribut ist verfügbar, mit dem Sie die Standardnummer für das ausgewählte Listenelement ändern können. Zum Beispiel, wenn Sie für das erste Element in der Liste festlegen
    • , dann wird die verbleibende Nummerierung relativ zum neuen Wert neu berechnet.

      Für Tag

      Folgende Attribute stehen zur Verfügung:
      Tabelle 1. Tag-Attribute

      Attribut	Beschreibung, akzeptierter Wert
      umgedreht	Das umgekehrte Attribut bewirkt, dass die Liste in umgekehrter Reihenfolge angezeigt wird (z. B. 9, 8, 7...).
      Start	Das Startattribut gibt den Anfangswert an, ab dem die Nummerierung beginnen soll, beispielsweise eine Konstruktion Dem ersten Artikel wird die Seriennummer „10“ zugewiesen. Sie können auch gleichzeitig die Art der Nummerierung angeben, z.B. .
      Typ	Das Typattribut gibt den Typ der in der Liste zu verwendenden Markierung an (Buchstaben oder Zahlen). Akzeptierte Werte: 1 – Standardwert, Dezimalnummerierung. A – Listennummerierung in alphabetischer Reihenfolge, Großbuchstaben (A, B, C, D). a – Listennummerierung in alphabetischer Reihenfolge, Kleinbuchstaben (a, b, c, d). I – Nummerierung in römischen Großbuchstaben (I, II, III, IV). i – Nummerierung in römischen Kleinbuchstaben (i, ii, iii, iv).

      1. Microsoft
      2. Google
      3. Apfel
      Reis. 2. Nummerierte Liste

      3. Liste der Definitionen

      Listen mit Definitionen werden mithilfe eines Tags erstellt

      . Um einen Begriff hinzuzufügen, verwenden Sie ein Tag
      , und um eine Definition einzufügen – das Tag
      .

      Der Definitionslistenblock verfügt über die folgenden Standardbrowser-Stile:

      Für Tags

      ,

      Und

      verfügbar .

      Direktor:

      Peter Tochilin

      Gießen:

      Andrey Gaidulyan

      Alexey Gavrilov

      Vitaly Gogunsky

      Mariya Kozhevnikova

      
      Reis. 3. Liste der Definitionen

      4. Verschachtelte Liste

      Oftmals reichen die Möglichkeiten einfacher Listen nicht aus; beispielsweise bei der Erstellung eines Inhaltsverzeichnisses führt kein Weg daran vorbei verschachtelte Elemente. Das Markup für die verschachtelte Liste würde wie folgt aussehen:

      • Absatz 1.
      • Punkt 2.
        • Unterabschnitt 2.1.
        • Unterabschnitt 2.2.
          • Unterabschnitt 2.2.1.
          • Unterabschnitt 2.2.2.
        • Unterabschnitt 2.3.
      • Punkt 3.

      
      Reis. 4. Verschachtelte Liste

      5. Mehrstufige nummerierte Liste

      Eine mehrstufige Liste wird verwendet, um Listenelemente auf verschiedenen Ebenen mit unterschiedlichen Einrückungen anzuzeigen. Das Markup für eine mehrstufige nummerierte Liste würde wie folgt aussehen:

      1. Absatz
      2. Absatz
         1. Absatz
         2. Absatz
         3. Absatz
            1. Absatz
            2. Absatz
            3. Absatz
         4. Absatz
      3. Absatz
      4. Absatz

      Dieses Standard-Markup erstellt eine neue Nummerierung für jede verschachtelte Liste, beginnend mit eins. Um eine verschachtelte Nummerierung zu erstellen, müssen Sie die folgenden Eigenschaften verwenden:
      counter-reset setzt einen oder mehrere Zähler zurück und gibt den zurückzusetzenden Wert an;
      Counter-Inkrement gibt den Zählerinkrementwert an, d. h. in welchen Schritten jedes nachfolgende Element nummeriert wird;
      Inhalt – generierter Inhalt, in diesem Fall ist er für die Anzeige der Nummer vor jedem Listenelement verantwortlich.

      Ol ( /* entferne die Standardnummerierung */ list-style: none; /* Identifiziere den Zähler und gib ihm den Namen li. Der Zählerwert wird nicht angegeben – standardmäßig ist er 0 */ counter-reset: li; ) li :before ( /* Wir definieren das Element, das nummeriert wird – li. Das Before-Pseudoelement gibt an, dass der über die Content-Eigenschaft eingefügte Inhalt vor den Listenelementen platziert wird. Hier legen wir auch den Wert des Zählerinkrements fest (Standard). ist 1). */ counter-increment: li; / * Die Content-Eigenschaft zeigt die Nummer des Listenelements an. counters() bedeutet, dass der generierte Text die Werte aller Zähler mit diesem Namen darstellt. Ein Punkt in Anführungszeichen fügt einen trennenden Punkt zwischen Zahlen hinzu, und vor dem Inhalt jedes Listenelements wird ein Punkt mit einem Leerzeichen hinzugefügt */ content: counters(li,".") "."; )
      Reis. 5. Mehrstufige nummerierte Liste