Verschachtelte Listen
Teil des Abschnitts Fundamentals der HTML-Journey von Coddy — Lektion 14 von 60.
Sie können eine Liste in eine andere einfügen – dies wird als verschachtelte Liste bezeichnet. Dies ist nützlich für die Erstellung hierarchischer Strukturen, wie z. B. Gliederungen oder mehrstufige Menüs.
Um eine verschachtelte Liste zu erstellen, platzieren Sie einfach ein <ul>- oder <ol>-Element innerhalb eines <i><li></i>-Elements einer anderen Liste.
Hier ist ein Beispiel für eine verschachtelte ungeordnete Liste:
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Subitem 2.1</li>
<li>Subitem 2.2</li>
</ul>
</li>
<li>Item 3</li>
</ul>Das zweite Element enthält eine verschachtelte Liste mit zwei Unterelementen. Im Browser wird es so angezeigt:
- Element 1
- Element 2
- Unterelement 2.1
- Unterelement 2.2
- Element 3
Sie können geordnete Listen auch verschachteln oder beides mischen.
Aufgabe
EinfachErstellen Sie ein HTML-Dokument mit einer verschachtelten Liste. Die Liste sollte wie folgt aussehen:
- Fruits
- Apple
- Banana
- Orange
- Vegetables
- Carrot
- Broccoli
- Spinach
- Grains
Spickzettel
Eine verschachtelte Liste wird erstellt, indem ein <ul>- oder <ol>-Element innerhalb eines <li>-Elements einer anderen Liste platziert wird:
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Subitem 2.1</li>
<li>Subitem 2.2</li>
</ul>
</li>
<li>Item 3</li>
</ul>Sie können geordnete Listen verschachteln oder sowohl geordnete als auch ungeordnete Listen miteinander kombinieren.
Probier es selbst
<!DOCTYPE html>
<html>
<body>
<!-- Hier Code schreiben -->
</body>
</html>
Teste dich selbstDiese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.
Alle Lektionen in Fundamentals
2Text und Formatierung
ÜberschriftenAbsätzeZeilenumbrücheFetter und kursiver TextNochmals fett und kursivWiederholung – Formatierung8Formulare und Eingaben Teil 1
Formular-GrundlagenTexteingabenInput-AttributePasswortfeldLabels für EingabenZusammenfassung – Einfaches Formular11Event-Registrierungsseite
ProjektübersichtHeader-Bereich
Event-Details-BereichRegistrierungsformularFooter-Bereich6Seitenlayout
Bereiche (Divisions)Inline-SpansSemantische TagsSections und ArticlesZusammenfassung – Layout9Formulare und Eingaben Teil 2
Radio-ButtonsCheckboxenDropdownsButtonsButtons in FormularenWiederholung - Formulare #1Wiederholung - Formulare #212Abschlussherausforderungen
Einfache ProfilkarteEvent-EinladungskarteEinfache ArtikelseiteLieblingsbücher-Liste