Manchmal möchten, werden Sie Konturen oder andere Arten von komplexen Daten in HTML5-Seiten zu erstellen. Sie können ganz einfach ineinander Nest Listen, wenn Sie möchten. Sie können eine komplexere Liste beschreibt beliebte Katzennamen in den USA und Australien zu sehen.

Dieses Beispiel verwendet eine Kombination von Listen ihre Arbeit zu tun. Diese enthält eine Liste von zwei Ländern: den USA und Australien. Jedes Land hat eine H3 Überschrift und eine andere (geordnete) Liste in seinem Inneren. Sie nisten können verschiedene Elemente in einer Liste, aber Sie haben es sorgfältig zu tun, wenn Sie die Seite validieren möchten.

In diesem Beispiel gibt es eine ungeordnete Liste mit nur zwei Elementen. Jedes dieser Elemente enthält eine Überschrift und eine geordnete Liste. Die Seite behandelt alle diese Daten in einer relativ saubere Art und Weise und validiert richtig.

Die verschachtelte Liste Beispiel

Der gesamte Code für nestedList.html wird hier wiedergegeben:

Verschachtelte Listen
Beliebte Katze-Namen
USA
 
Tigger
Tiger
Max
Smokey
Sam
 
Australien
 
Oscar
Max
Tiger
Sam
neblig

Hier sind ein paar Dinge, die Sie in diesem Codeauflistung bemerken könnte:

• Es gibt eine große

stellen Sie die gesamte Hauptliste umgibt.

• Die Hauptliste hat nur zwei Listeneinträge.

• Jedes dieser Elemente repräsentiert ein Land aus.

• Jedes Land hat ein Element, beschreibt den Namen des Landes innerhalb der

• .

• Jedes Land hat auch eine Reihe mit einer Liste von Namen.

• Die Vertiefung wirklich hilft Ihnen, zu sehen, wie die Dinge sind miteinander verbunden.

Wie Sie den Code einrücken

Sie haben vielleicht bemerkt, dass HTML-Code in der Regel eingekerbt ist. Die Browser ignorieren alle Einbuchtung, aber es ist immer noch ein wichtiger Codierung Gewohnheit.

Es gibt viele Meinungen darüber, wie Code formatiert werden soll, aber das Standardformat wird Ihnen gut, bis Sie Ihren eigenen Stil zu entwickeln.

Im Allgemeinen werden die folgenden Regeln für indent HTML-Code angewandt:

• Einrücken jedes verschachtelte Element. Da der Tag innerhalb des Elements ist, können Sie einrücken um dies anzuzeigen. Ebenso ist die

• Elemente sind immer innen eingekerbt
oder Paare.

• Richten Sie Ihre Elemente. Wenn ein Element mehr als eine Zeile einnimmt, säumen den End-Tag mit dem Anfang-Tag auf. Auf diese Weise wissen Sie, was was endet.

• Benutzen Sie Leerzeichen, nicht Registerkarten. Die Tab-Zeichen verursacht häufig Probleme im Quellcode. Verschiedene Editoren Format Registerkarten anders, und eine Mischung aus Tabs und Leerzeichen können Ihre sorgfältig formatiert Seite sehen schrecklich, wenn Sie es in einem anderen Editor anzuzeigen.

  Die meisten Redakteure haben die Möglichkeit, die Tab-Taste als Räume zu interpretieren. Es ist eine großartige Idee, diese Funktion auf Ihrem Editor zu finden und schalten Sie ihn ein, so dass Sie jederzeit die Tab-Taste getroffen, wird es als Leerzeichen interpretiert. In Komodo Edit, tun Sie dies in Bearbeiten # 10154- Präferenzen # 10154- Editor # 10154- Einrückungen.

• Verwenden Sie zwei Räume. Die meisten Programmierer verwenden, um zwei oder vier Leerzeichen pro Einrückungsebene. HTML-Elemente können ziemlich tief verschachtelt werden. Gehen sieben oder acht Ebenen tief ist weit verbreitet. Wenn Sie Registerkarten oder zu viele Räume verwenden, werden Sie so viel weißen Raum haben, dass Sie den Code nicht sehen können.

• Ende am linken Rand. Wenn Sie die Seite beenden und Sie befinden sich auf der linken Rand nicht zurück, Sie haben etwas vergessen zu beenden. Richtiges Einrücken macht Ihre Seite Organisation leicht zu sehen. Jedes Element sollte mit seiner End-Tag ausrichten.

Wie eine verschachtelte Liste zu erstellen

Wenn Sie für die verschachtelte Liste den Code schauen über, kann es aussehen einschüchternd, aber es ist nicht wirklich so schwer. Das Geheimnis ist, um die Liste zu bauen Außenseite nach innen:

1. Erstellen Sie die äußere Liste zuerst.

   Erstellen Sie die primäre Liste (ob es bestellt hat oder ungeordnet). Im Beispiel gab es ursprünglich nur die ungeordnete Liste mit den beiden Ländern in ihm.

2. Fügen Sie Listenelemente auf die äußere Liste.

   Wenn Sie Text oder Schlagzeilen in der größeren Liste möchten, können Sie diese hier stellen. Wenn Sie nichts anderes als eine Liste in Ihrem primären Liste setzen sind, können Sie einige Platzhalter-Tags in dort setzen nur so können Sie sicher, dass alles funktionieren.

3. Überprüfen Sie, bevor Sie die nächste Liste Ebene hinzufügen.

   Verschachtelte Listen können den Validator (und Sie) verwechseln. Überprüfen Sie Ihren Code mit der äußeren Liste, um sicherzustellen, gibt es keine Probleme, bevor Sie innere Listen hinzufügen.

4. Fügen Sie die erste innere Liste.

   Nachdem Sie die Grundstruktur ist in Ordnung wissen, die erste Innenliste hinzuzufügen. Für das Beispiel, das war die geordnete Liste von Namen Katze in den USA

5. Wiederholen, bis beendet.

   Halten Sie das Hinzufügen Listen, bis Ihre Seite richtig aussieht.

6. Überprüfen Sie häufig.

   Es ist viel besser zu überprüfen, wie Sie als gehen zu warten, bis alles fertig ist. Fangen Sie Ihre Fehler früh, so dass Sie sie nicht replizieren.