Die Webentwicklung expandiert unendlich und immer mehr Menschen zeigen Interesse an diesem Bereich. Wenn Sie ein angehender Webentwickler sind, sind Sie wahrscheinlich bereits auf die Verwendung von Listen in HTML gestoßen. Aber wussten Sie, dass Listen verschachtelt werden können? In diesem Artikel informieren wir Sie über verschachtelte Listen in HTML und zeigen Ihnen Beispiele für deren Verwendung.
Eine verschachtelte Liste ist eine Liste, die eine oder mehrere andere Listen innerhalb der Listenelemente enthält. Dadurch können Sie eine strukturierte Informationshierarchie erstellen, in der Listenelemente ihre eigenen Listenelemente haben können.
Um eine verschachtelte Liste in HTML zu erstellen, wird ein Tag (eine nicht nummerierte Liste) oder ein Tag (eine geordnete Liste) innerhalb eines Listenelements verwendet. Verschachtelte Listen können durch Hinzufügen zusätzlicher Tags oder innerhalb von Listenelementen unterschiedliche Verschachtelungsebenen festgelegt werden.
Betrachten Sie ein Beispiel für eine verschachtelte Liste:
- Listenelement 1
- Listenelement 2
- Listenelement 3
- Unterlistenelement 1
- Verschachteltes Listenelement 2
In diesem Beispiel haben wir eine Hauptliste, die drei Listenelemente enthält. Das dritte Listenelement enthält eine verschachtelte Liste mit zwei Listenelementen. Wie Sie sehen können, werden verschachtelte Listen mit einem Abstand von der Hauptliste angezeigt, um ihre hierarchische Struktur anzuzeigen.
Was ist eine verschachtelte Liste in HTML?
Eine verschachtelte Liste ist eine Liste, in der ein oder mehrere Listenelemente innerhalb eines anderen Listenelements platziert werden. Dadurch können Sie eine hierarchische Listenstruktur erstellen, in der die Elemente der inneren Liste Unterelemente eines externen Listenelements sind.
-
(nicht nummerierte Liste) oder
(nummerierte Liste) in Kombination mit dem Tag
(Listenelement).
Beispiel für eine verschachtelte, nicht nummerierte Liste:
- Element 1
- Element 2
- Unterelement 1
- Unterelement 2
In diesem Beispiel sind Element 1, Element 2 und Element 3 die Hauptelemente der Liste, und Unterelement 1 und Unterelement 2 sind verschachtelte Elemente der Liste. Die Unterelemente werden eingerückt angezeigt, um die Beziehung zum Hauptelement anzuzeigen.
Verschachtelte Listen können unendlich ineinander verschachtelt werden, wodurch komplexe Strukturen einer hierarchischen Liste erstellt werden. Die Verwendung von verschachtelten Listen verbessert das Verständnis und die Organisation von Informationen auf einer Webseite.
Beispiele für die Verwendung einer verschachtelten Liste
Beispiel 1:
Erstellen einer hierarchischen Liste, mit der Sie Informationen organisieren können:
- Hauptkurse:
- Mathematik
- Physik
- Chemie
- Astronomie
- Biologie
- Informatik
Beispiel 2:
Erstellen einer Aufgabenliste:
- Frühstück zubereiten
- Mit dem Hund spazieren gehen
- Geschirr abwaschen
- Lektionen machen
- Ein Buch lesen
Beispiel 3:
Beispiel 4:
Erstellen einer Legende für ein Diagramm:
- Indikator A
- Unteranzeige 1
- Daten 1
- Daten 2
- Unteranzeige 2
- Daten 1
- Daten 2
- Unteranzeige 1
- Daten 1
- Daten 2
- Unteranzeige 2
- Daten 1
- Daten 2
Beispiel 5:
Erstellen einer Kommentarhierarchie:
Achtung: Unterlisten können mit den Tags (sortierte Liste) und (ungeordnete Liste) sowie Kombinationen dieser Tags erstellt werden.
Mit verschachtelten Listen können Sie eine Hierarchie organisieren, Informationen strukturieren und die Wahrnehmung von Inhalten verbessern.
Wie erstelle ich eine verschachtelte Liste in HTML?
-
für eine nummerierte oder Aufzählungsliste, und fügen Sie innerhalb dieses Tags neue Tags hinzu
- Listenelement
- Listenelement
- Unterelement einer Liste
- Unterelement einer Liste
-
, die drei Listenelemente enthält. Das zweite Listenelement enthält eine verschachtelte Liste
- Hauptpunkt 1
- Unterabsatz 1
- Unterabsatz 2
- Unterabsatz 2.1
- Unterabsatz 2.2
2. Listen stilisieren:
Sie können verschachtelte Listen auch mit CSS formatieren. Sie können beispielsweise die Position der Aufzählungszeichen oder Listenpunktnummern ändern, die Schriftgröße ändern oder ein Hintergrundbild hinzufügen.
3. Nummerierte Listen:
-
anstatt
. Alle anderen Funktionen bleiben gleich.
4. Listenattribute:
-
um den Anfangswert der Nummerierung zu ändern oder die Nummerierungsreihenfolge zu ändern.
-
mit zwei Unterelementen.
Wenn die Unterliste auf einer Webseite angezeigt wird, wird die Unterliste je nach den verwendeten Stilen als eingerückt oder mit einem anderen visuellen Anzeigestil angezeigt.
Verschachtelte Listen können verwendet werden, um Informationen auf Webseiten zu strukturieren und zu organisieren. Sie helfen Ihnen, Inhalte zu organisieren und zu organisieren, wodurch sie für die Nutzer verständlicher und benutzerfreundlicher werden.
Erweiterte Funktionen für verschachtelte Listen
Verschachtelte Liste HTML bietet eine Vielzahl von Möglichkeiten, Informationen zu organisieren und strukturierte Listen zu erstellen. Schauen wir uns einige erweiterte Funktionen an, mit denen Sie verschachtelte Listen anpassen und stylen können.
1. Verschachtelte Ebenen:
Verschachtelte Listen können von unbegrenzter Tiefe sein, dh Sie können eine Verschachtelung beliebig oft erstellen. Sie können beispielsweise eine Liste mit Hauptpunkten erstellen und jeden Hauptpunkt um zusätzliche Unterpunkte erweitern.
-
oder
um verschachtelte Listen zu erstellen.
Beispiel zum Erstellen einer verschachtelten Liste:
- Unteranzeige 1