Welches Tag wird zum Erstellen der Definitionsliste verwendet? HTML: Nummerierte und Aufzählungsliste. Spezielle und verschachtelte Listen im HTML-Code

Listen gehören zum Alltag. Die To-Do-Liste definiert, was erledigt wird. Navigationsrouten bieten eine Schritt-für-Schritt-Liste mit Wegbeschreibungen. Für Rezepte sind eine Zutatenliste und eine Anleitungsliste erforderlich. Listen sind fast überall zu finden, daher ist es leicht zu erkennen, warum sie auch im Internet beliebt sind.

Wenn wir eine Liste auf einer Website verwenden möchten, bietet HTML drei verschiedene Typen zur Auswahl: Liste mit Aufzählungszeichen, Liste mit Nummerierung und Beschreibungsliste. Welche Art von Liste verwendet werden soll und ob überhaupt eine Liste verwendet werden soll, hängt vom Inhalt und der semantisch am besten geeigneten Option für die Anzeige ab.

Zusätzlich zu den drei verschiedenen Arten von Listen, die in HTML verfügbar sind, gibt es mehrere Möglichkeiten, diese Listen über CSS zu formatieren. Wir können beispielsweise auswählen, welche Art von Aufzählungszeichen wir für die Liste angeben möchten. Die Markierung kann ein Quadrat, ein Kreis, eine Zahl, ein Buchstabe oder möglicherweise auch keine Markierung sein. Darüber hinaus können wir entscheiden, wie die Liste angezeigt werden soll – vertikal oder horizontal. Alle diese Optionen spielen eine wichtige Rolle bei der Gestaltung unserer Webseiten.

Listen mit Aufzählungszeichen

Eine Liste mit Aufzählungszeichen oder eine ungeordnete Liste ist einfach eine Liste zusammengehöriger Elemente, bei denen die Reihenfolge keine Rolle spielt. Das Erstellen einer Aufzählungsliste in HTML erfolgt mithilfe eines Blocklistenelements

. Jedes einzelne Element in der Liste ist mit einem Element gekennzeichnet
• .

  Standardmäßig fügen die meisten Browser dem Element einen vertikalen Rand und einen linken Abstand hinzu

  , und vor jedem Element
  • setzt einen einfarbigen Punkt. Dieser Punkt wird als Listenmarkierung bezeichnet und kann mithilfe von CSS geändert werden.
    • Orange
    • Grün
    • Blau

    Aufzählungsliste anzeigen

    Nummerierte Listen

    Nummerierte oder geordnete Artikelliste

    Ganz ähnlich wie bei einer Liste mit Aufzählungszeichen werden einzelne Aufzählungspunkte auf die gleiche Weise erstellt. Der Hauptunterschied zwischen Listen besteht darin, dass es bei einer geordneten Liste auf die Reihenfolge ankommt, in der die Elemente angezeigt werden.

    Da die Reihenfolge wichtig ist, verwendet eine nummerierte Liste standardmäßig Zahlen anstelle eines Punkts.

    1. Gehen Sie die Apricot Street entlang
    2. Biegen Sie in die Winogradnaja ein

    Demonstration der nummerierten Liste

    Für nummerierte Listen stehen auch eindeutige Attribute zur Verfügung, einschließlich Start und Umkehrung.

    Startattribut

    Das Startattribut gibt die Nummer an, bei der die nummerierte Liste beginnen soll. Standardmäßig beginnen Listen bei 1, es kann jedoch Situationen geben, in denen die Liste bei 30 oder einer anderen Zahl beginnen sollte. Wenn wir das Startattribut für ein Element verwenden

    , dann können wir genau bestimmen, ab welcher Zahl die Zählung der nummerierten Liste beginnen soll.

    Das Startattribut akzeptiert nur ganzzahlige Werte, obwohl nummerierte Listen möglicherweise andere Nummerierungssysteme verwenden, z. B. römische Ziffern.

    30. Gehen Sie die Apricot Street entlang
    31. Biegen Sie in die Winogradnaja ein
    32. Halten Sie in der Shady Street an

    Demonstration des Startattributs

    umgekehrtes Attribut

    Das umgekehrte Attribut, wenn es einem Element hinzugefügt wird

    ermöglicht die Anzeige der Liste in umgekehrter Reihenfolge. Eine Liste mit fünf Elementen mit den Nummern 1 bis 5 kann umgekehrt und von 5 bis 1 nummeriert werden.

    Das umgekehrte Attribut ist ein boolesches Attribut und nimmt als solches keinen Wert an. Es kann wahr oder falsch sein. False ist der Standardwert. Der Wert wird true, wenn das umgekehrte Attribut auf dem Element erscheint

    .
    1. Gehen Sie die Apricot Street entlang
    2. Biegen Sie in die Winogradnaja ein
    3. Halten Sie in der Shady Street an

    Demonstration des umgekehrten Attributs

    Wertattribut

    Das Wertattribut kann auf einzelne Elemente angewendet werden

    1. in einer nummerierten Liste, um seinen Wert in der Liste zu ändern. Die Nummer jedes Listenelements, das unter einem Listenelement mit einem Wertattribut erscheint, wird entsprechend neu berechnet.

       Wenn beispielsweise das Wertattribut des zweiten Listenelements auf 9 gesetzt ist, wird die Nummer dieses Listenelements so ausgegeben, als wäre es das neunte. Alle nachfolgenden Listenelemente werden beginnend mit 9 nummeriert.

       1. Gehen Sie die Apricot Street entlang
       9. Biegen Sie in die Winogradnaja ein
       10. Halten Sie in der Shady Street an

       Demonstration von Wertattributen

       Beschreibungslisten

       Eine andere Art von Liste, die Sie online sehen (aber nicht so oft wie Listen mit Aufzählungszeichen oder Nummern), ist eine Liste mit Beschreibungen. Solche Listen dienen der Identifizierung mehrerer Begriffe und deren Beschreibungen, beispielsweise in einem Glossar.

       Die Erstellung einer Beschreibungsliste in HTML erfolgt über ein Blockelement

       . Anstatt element zu verwenden

       Um Listenelemente auszuzeichnen, benötigt eine Beschreibungsliste zwei Blockelemente:

       für den Begriff und

       zur Beschreibung.

       Eine Beschreibungsliste kann nacheinander viele Begriffe und Beschreibungen enthalten. Darüber hinaus kann eine solche Liste mehrere Begriffe pro Beschreibung sowie mehrere Beschreibungen pro Begriff enthalten. Ein einzelner Begriff kann mehrere Bedeutungen haben und mehreren Beschreibungen unterliegen. Umgekehrt kann eine Beschreibung auf mehrere Begriffe passen.

       Beim Hinzufügen eines Beschreibungslistenelements

       muss zum Element gehen

       . Der Begriff und die unmittelbar darauffolgende Beschreibung stehen in einem Zusammenhang zueinander. Daher ist die Reihenfolge dieser Elemente wichtig.

       Standardmäßig Element

       Enthält vertikale Polsterung, ähnliche Elemente

       Und
       . Darüber hinaus das Element
       Beinhaltet standardmäßig den linken Rand.
       Studien
       Zeit und Aufmerksamkeit darauf verwenden, sich Kenntnisse über das Unterrichtsfach anzueignen, insbesondere durch Bücher.
       Projekt
       Ein eingereichter Plan oder eine Zeichnung, die zeigt, wie ein Gebäude, eine Kleidung oder ein anderer Gegenstand aussehen und funktionieren wird, bevor er gebaut oder hergestellt wird.
       Bestehende Ziele, Pläne oder Absichten, bevor sie in einem greifbaren Objekt verkörpert oder verwirklicht werden.
       Geschäft
       Arbeit
       Der reguläre Beruf, Beruf oder das Handwerk einer Person.
       Beschreibungsliste Demonstration
       Verschachtelte Listen
       Die Funktion, die Listen sehr leistungsfähig macht, ist die Verschachtelungsfunktion. Jede Liste kann in einer anderen Liste verschachtelt werden und sie können mehrfach verschachtelt werden. Aber die Möglichkeit, Listen endlos zu verschachteln, gibt Ihnen nicht die Freiheit dazu. Listen sollten speziell dort reserviert werden, wo sie die größte semantische Bedeutung behalten.
       Der Trick beim Verschachteln von Listen besteht darin, zu wissen, wo jede Liste und jedes Listenelement beginnt und endet. Konkret geht es um Aufzählungslisten und nummerierte Listen, das einzige Element, das direkt darin erscheinen kann
       Und
       ist ein Element
       1. . Wiederholen wir es noch einmal – das einzige Element, das wir als direkten Nachkommen der Elemente bezeichnen können
          Und
          , Ist
          1. .

             Allerdings innerhalb des Elements

          2. Es kann ein Standardsatz von Elementen hinzugefügt werden, einschließlich beliebiger Elemente
             oder
             .

             Um eine Liste zu verschachteln, beginnen Sie eine neue Liste, bevor Sie das Listenelement schließen. Sobald die verschachtelte Liste vollständig und geschlossen ist, schließen Sie das umschließende Listenelement und fahren Sie mit der ursprünglichen Liste fort.

             1. Gehen Sie mit dem Hund spazieren
             2. Wäsche zusammenlegen
             3. Gehen Sie in den Laden und kaufen Sie:
                • Milch
                • Brot
                • Käse
             4. Den Rasen mähen
             5. Abendessen kochen

             Demonstration verschachtelter Listen

             Da verschachtelte Listen etwas verwirrend sein können und bei falscher Ausführung unerwünschte Stile anzeigen können, werfen wir einen kurzen Blick darauf. Elemente

             Und
             kann nur Elemente enthalten
             1. . Element
             2. kann jedes gewünschte reguläre Element enthalten. Allerdings ist das Element
             3. muss ein direkter Nachkomme eines der beiden Elemente sein
                , oder
                .

                Beachten Sie außerdem, dass sich die Markierungen von Listen, wenn sie in anderen Listen verschachtelt sind, je nach Verschachtelungstiefe ändern. Im vorherigen Beispiel verwendet eine Liste mit Aufzählungszeichen, die in einer nummerierten Liste verschachtelt ist, einen Kreis anstelle eines Punktes als Markierung. Diese Änderung tritt auf, weil die Liste mit Aufzählungszeichen eine Ebene innerhalb der nummerierten Liste verschachtelt ist.

                Glücklicherweise können wir steuern, wie Aufzählungspunkte auf jeder Ebene aussehen, worauf wir uns als Nächstes einlassen.

                Styling-Listenelemente

                Aufzählungslisten und nummerierte Listen verwenden standardmäßig Aufzählungszeichen für Listenelemente. Bei Listen mit Aufzählungszeichen handelt es sich dabei in der Regel um einfarbige Punkte, während es sich bei nummerierten Listen eher um Zahlen handelt. Mithilfe von CSS können Stil und Position dieser Markierungen angepasst werden.

                Eigenschaft vom Typ „Listenstil“.

                Die Eigenschaft list-style-type wird verwendet, um den Inhalt der Listenelementmarkierung festzulegen. Die verfügbaren Werte reichen von Quadraten und Dezimalzahlen bis hin zu armenischen Nummerierungen und CSS-Stilen können zu Elementen hinzugefügt werden

                ,
                oder
                1. .

                   Jeder Wert für die Eigenschaft „list-style-type“ kann einer Aufzählungsliste oder einer nummerierten Liste hinzugefügt werden. Vor diesem Hintergrund können Sie Nummerierung in einer Liste mit Aufzählungszeichen und nicht numerische Aufzählungszeichen in einer nummerierten Liste verwenden.

                   • Orange
                   • Grün
                   • Blau

                   Ul ( Listenstiltyp: Quadrat; )

                   Demonstration der List-Style-Type-Eigenschaft

                   Werte im Listenstil

                   Wie bereits erwähnt, enthält die Eigenschaft list-style-type eine Handvoll verschiedener Werte. Die folgende Tabelle zeigt diese Werte und ihre entsprechenden Inhalte.

                   Ein Bild als Listenmarkierung verwenden

                   Es kann vorkommen, dass die Standardwerte für die List-Style-Type-Eigenschaft nicht ausreichen und wir unsere eigene Listenmarkierung definieren möchten. Dies geschieht am häufigsten durch Platzieren eines Hintergrundbilds für jedes Element.

                2. .

                   Der Prozess umfasst das Entfernen aller standardmäßigen Eigenschaftswerte im Listenstil und das Hinzufügen eines Hintergrundbilds und von Rändern zum Element

                3. .

                   Weitere Details: Wenn Sie die Eigenschaft „list-style-type“ auf „none“ setzen, werden vorhandene Listenmarkierungen entfernt. Die Eigenschaft „Hintergrund“ legt das Hintergrundbild zusammen mit seiner Position fest und wiederholt es bei Bedarf. Und die Eigenschaft padding stellt links vom Text Platz für das Hintergrundbild bereit.

                   • Orange
                   • Grün
                   • Blau

                   Li (Hintergrund: URL("arrow.png") 0 50 % keine Wiederholung; Listenstiltyp: keine; linker Abstand: 12 Pixel;)

                   Ein Bild als Markierung anzeigen

                   list-style-position-Eigenschaft

                   Standardmäßig werden Listenaufzählungszeichen links vom Inhalt im Element positioniert

                4. . Dieser Positionierungsstil wird als „outside“ bezeichnet, was bedeutet, dass der gesamte Inhalt direkt rechts außerhalb der Listenmarkierung angezeigt wird. Mit der Eigenschaft „list-style-position“ können wir den Standardwert von „outside“ in „inside“ oder „inherit“ ändern.

                   Outside platziert die Listenmarkierung links vom Element

                5. und lassen Sie keinen Inhalt unterhalb dieser Markierung fließen. Der Innenwert (der selten verwendet wird und sichtbar ist) platziert die Listenmarkierung in der ersten Zeile des Elements
                6. und ermöglicht, dass sich der Inhalt bei Bedarf um die Markierung wickelt.
                   • Cupcakes...
                   • Streuen...

                   Ul ( list-style-position: inside; )

                   Demonstration der Positionseigenschaft im Listenstil

                   Allgemeiner Eigenschaftenlistenstil

                   Die kürzlich besprochenen Listeneigenschaften list-style-type und list-style-position können zu einer generischen Eigenschaft list-style kombiniert werden. In dieser Eigenschaft können wir einen oder alle Listeneigenschaftswerte gleichzeitig verwenden. Die Reihenfolge dieser Werte sollte sein: list-style-type gefolgt von list-style-position .

                   Ul ( Listenstil: Kreis innen; ) ol ( Listenstil: niederromanisch; )

                   Horizontale Listenanzeige

                   Manchmal möchten wir Listen horizontal statt vertikal anzeigen. Vielleicht möchten wir die Liste in mehrere Spalten unterteilen, um eine Navigationsliste zu erstellen, oder mehrere Listenelemente in einer Zeile platzieren. Je nach Inhalt und gewünschtem Erscheinungsbild gibt es mehrere Möglichkeiten, Listen als einzelne Zeile anzuzeigen, beispielsweise indem der Anzeigeeigenschaftswert der Elemente übernommen wird

                7. wie inline oder inline-block oder über die float-Eigenschaft.

                   Listenanzeige

                   Der schnellste Weg, eine Liste in einer Zeile anzuzeigen, besteht darin, die Elemente anzugeben

                8. display-Eigenschaft mit dem Wert inline oder inline-block . Dadurch werden alle Elemente platziert
                9. in einer Zeile mit gleichem Abstand zwischen den einzelnen Listenelementen.

                   Wenn die Leerzeichen zwischen Elementen

                10. Probleme verursachen, können sie mit denselben Techniken entfernt werden, die wir in Lektion 5, Positionierung von Inhalten, besprochen haben.

                    Viel häufiger verwenden wir den Inline-Block-Wert anstelle des Inline-Werts. Der Inline-Block-Wert erleichtert das Hinzufügen vertikaler Polsterung und anderer Leerzeichen zu Elementen

                11. , während der Inline-Wert dies nicht tut.

                    Wenn der Wert der Anzeigeeigenschaft in inline oder inline-block geändert wird, wird die Listenmarkierung, unabhängig davon, ob es sich um einen Punkt, eine Zahl oder etwas anderes handelt, entfernt.

                    • Orange
                    • Grün
                    • Blau

                    Li ( display: inline-block; margin: 0 10px; )

                    Demonstration einer Liste mit Inline-Block

                    Listen mit Float

                    Das Ändern der Anzeigeeigenschaft in „inline“ oder „inline-block“ geht schnell, entfernt aber die Listenmarkierungen. Wenn sie benötigt werden, fügen Sie jedem Element einen Float hinzu

                12. ist eine bessere Option als das Ändern der Anzeigeeigenschaft.

                    Installation für alle Elemente

                13. Float-Eigenschaften wie left richten alle Elemente horizontal aus
                14. direkt nebeneinander ohne Lücken dazwischen. Wenn wir float für verwenden
                15. , wird die Listenmarkierung standardmäßig angezeigt und über dem Element positioniert
                16. neben ihm. Um zu verhindern, dass die Listenmarkierung über anderen Elementen angezeigt wird
                17. , horizontaler Rand oder Abstand müssen hinzugefügt werden.
                    • Orange
                    • Grün
                    • Blau

                    Li ( float: left; margin: 0 20px; )

                    Demonstration einer Liste mit Float

                    Wie bei allen schwebenden Elementen unterbricht dies den Seitenfluss. Wir dürfen nicht vergessen, den Float zu löschen und die Seite wieder in den normalen Fluss zu versetzen – die gebräuchlichste Methode ist Clearfix.

                    Beispiel für eine Navigationsliste

                    Wir entwerfen und finden häufig Navigationsmenüs, die ungeordnete Listen verwenden. Diese Listen werden normalerweise horizontal mit einer der beiden zuvor genannten Methoden angeordnet. Hier ist zum Beispiel ein horizontales Navigationsmenü, das anhand einer ungeordneten Liste aufgebaut ist, in der die Elemente enthalten sind

                18. werden als inline-block angezeigt.

                    Navigation ul ( Schriftart: fett 11px „Helvetica Neue“, Helvetica, Arial, serifenlos; Rand: 0; Polsterung: 0; Texttransformation: Großbuchstaben; ) .navigation li ( Anzeige: inline-block; ) .navigation a ( Hintergrund: #395870; Hintergrund: linearer Farbverlauf (#49708f, #293f50); Rand rechts: 1 Pixel einfarbig rgba (0, 0, 0, .3); Farbe: #fff; Polsterung: 12 Pixel 20 Pixel; Textdekoration: keine; ) .navigation a:hover ( Hintergrund: #314b60; box-shadow: inset 0 0 10px 1px rgba(0, 0, 0, .3); ) .navigation li:first-child a ( border-radius: 4px 0 0 4px; ) .navigation li:last-child a ( border-right: 0; border-radius: 0 4px 4px 0; )

                    Demonstration der Navigationsliste

                    Zur Praxis

                    Nachdem wir nun wissen, wie man Listen in HTML und CSS erstellt, werfen wir einen Blick auf unsere Styles Conference-Website und sehen, wo wir Listen verwenden können.

                    Jetzt Navigationsmenüs in Elementen

                    Und