Einführung in die Verschachtelungsregeln von HTML-Tags
|
Es gibt viele XHTML-Tags: div, ul, li, dl, dt, dd, h1~h6, p, a, addressa, span, strong... Wenn wir diese Tags zum Erstellen der Seitenstruktur verwenden, können wir sie unendlich verschachteln. Allerdings erfordert die Verschachtelung auch bestimmte Regeln. Wir können sie nicht nach unseren persönlichen Gewohnheiten beliebig verschachteln. Was sind also die Verschachtelungsregeln für HTML-Tags?
1. Elemente auf Blockebene Es wird im Allgemeinen zum Erstellen der Website-Architektur, des Layouts und zum Übertragen von Inhalten verwendet. Es enthält die folgenden Tags: Code kopieren Der Code lautet wie folgt:Adresse, Blockzitat, Zentrum, Dir, Div, DL, DT, DD, Feldsatz, Formular, H1~H6, HR, Isindex, Menü, NoFrames, NoScript, OL, P, Pre, Tabelle, UL 2. Eingebettete Elemente Wird im Allgemeinen in einigen Details oder Teilen des Website-Inhalts verwendet, um „hervorzuheben, Stile zu unterscheiden, hochzustellen, tiefzustellen, zu verankern“ usw. Die folgenden Tags sind alle eingebettete Elemente: Code kopieren Der Code lautet wie folgt:a, abbr, Akronym, b, bdo, groß, br, zitieren, Code, dfn, em, Schriftart, i, img, Eingabe, kbd, Etikett, q, s, samp, auswählen, klein, span, strike, stark, sub, sup, Textbereich, tt, u, var 2. Verschachtelungsregeln für HTML-Tags 1. Blockelemente können Inline-Elemente oder einige Blockelemente enthalten, aber Inline-Elemente können keine Blockelemente enthalten. Sie können nur andere Inline-Elemente enthalten: Code kopieren Der Code lautet wie folgt:<div><h1></h1><p></p></div> —— Wahr</p> <p> <a href=”#”><span></span></a> —— Wahr</p> <p> <span><div></div></span> —— Falsch 2. Blockelemente können nicht in <p> platziert werden: Code kopieren Der Code lautet wie folgt:<p><ol><li></li></ol></p> —— Falsch</p> <p> <p><div></div></p> —— Falsch 3. Es gibt mehrere spezielle Blockebenenelemente, die nur Inline-Elemente und keine Blockebenenelemente enthalten können. Diese speziellen Tags sind: Code kopieren Der Code lautet wie folgt:h1, h2, h3, h4, h5, h6, p, dt 4. li kann Div-Tags enthalten – Dies muss eigentlich nicht separat aufgeführt werden, ist aber für viele Leute im Internet verwirrend, daher erkläre ich es hier kurz: Sowohl li- als auch div-Tags sind Container zum Laden von Inhalten. Sie haben den gleichen Status und keine Hierarchie (z. B. die strikte Hierarchie von h1 und h2^_^). Sie sollten wissen, dass das li-Tag sogar sein übergeordnetes ul oder ol aufnehmen kann. Warum glauben manche Leute, dass li kein div aufnehmen kann? Denken Sie nicht, dass Li so geizig ist. Obwohl Li dünn und klein aussieht, hat sie tatsächlich ein großes Herz … 5. Blockebenenelemente werden neben Blockebenenelementen platziert und Inline-Elemente werden neben Inline-Elementen platziert: Code kopieren Der Code lautet wie folgt:<div><h2></h2><p></p></div> —— Wahr</p> <p> <div><a href=”#”></a><span></span></div> —— Wahr</p> <p> <div><h2></h2><span></span></div> —— Falsch |
<<: Detaillierte Erklärung der Vue px-zu-rem-Konfiguration
Artikel empfehlen
So konfigurieren Sie Nginx, um die Zugriffshäufigkeit derselben IP zu begrenzen
1. Fügen Sie den folgenden Code zu http{} in ngin...
Vue implementiert kleine Suchfunktion
In diesem Artikelbeispiel wird der spezifische Co...
Zusammenfassung der Probleme mit der Mysql-connector-java-Treiberversion
Problem mit der Mysql-Connector-Java-Treiberversi...
Einfache Methode zur Installation von MySQL unter Linux
Bei der Onlinesuche nach Methoden zur Installatio...
Eigenschaften von JavaScript-Pfeilfunktionen und Unterschiede zu normalen Funktionen
Inhaltsverzeichnis 1. Verwendung von Pfeilfunktio...
Informationsübertragung und Funktionsaufrufe zwischen WeChat-Miniprogrammseiten und -Komponenten
In diesem Artikel werde ich die relevanten Inhalt...
Lösung zum automatischen Auslösen von Klickereignissen beim Klicken auf ein Popup-Fenster in Vue (Simulationsszenario)
Geschäftsszenario: Verwenden Sie den EL-Dialog vo...
Detaillierte Erläuterung der neuen relationalen Datenbankfunktionen in MySQL 8.0
Vorwort Die neueste Version von MySQL 8.0 ist 8.0...
So erstellen Sie mit Harbor ein privates Docker-Repository
Inhaltsverzeichnis 1. Open-Source-Lagerverwaltung...
Detaillierte Untersuchung der MySQL-Mehrversions-Parallelitätskontrolle MVCC
MVCC MVCC (Multi-Version Concurrency Control) ist...
MySQL-Grundlagen-Tutorial: Detaillierte Erklärung der DML-Anweisungen
Inhaltsverzeichnis DML-Anweisungen 1. Datensätze ...
Implementierung einer MySQL-Sicherungsstrategie (vollständige Sicherung + inkrementelle Sicherung)
Inhaltsverzeichnis Entwurfsszenario Technische Pu...
Natives JS zur Realisierung eines einfachen Schlangenspiels
In diesem Artikel wird der spezifische Code von j...
SQL-Funktion zum Zusammenführen eines Feldes
Vor kurzem musste ich alle Felder einer verknüpft...
Detaillierte Einführung in die Mysql-Datumsabfrage
Abfrage des aktuellen Datums AKTUELLES DATUM AUSW...