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
Detaillierte Erläuterung des MySQL-Isolationsebenen-Operationsprozesses (cmd)
Beispielvorgang für nicht festgeschriebenes Lesen...
MySQL-Sortierung zum Abrufen eines Ranking-Beispielcodes
Der Code sieht folgendermaßen aus: SELECT @i:=@i+...
Analyse des Unterschieds zwischen „Platzieren auf“ und „Wo“ in MySQL-Abfragebedingungen
Einführung Beim Schreiben von SQL bin ich heute a...
JavaScript verwendet Promise zur Verarbeitung mehrerer wiederholter Anfragen
1. Warum diesen Artikel schreiben? Sie haben sich...
Analyse der Nutzung des Xmeter API-Schnittstellentesttools
XMeter API bietet einen umfassenden Online-Schnit...
Detaillierte Erläuterung der SRIOV-Passthrough-Konfiguration und Leistungstests basierend auf KVM
SRIOV-Einführung, VF-Passthrough-Konfiguration un...
VUE realisiert Registrierungs- und Login-Effekte
In diesem Artikelbeispiel wird der spezifische Co...
3 Methoden zum Wiederherstellen der Tabellenstruktur aus einer FRM-Datei in MySQL [empfohlen]
Wenn MySQL normal ausgeführt wird, ist es nicht s...
Der Lösungsdatensatz für Vue, der das Element beim ersten Mal nicht abrufen konnte
Vorwort Die Lösung für das Problem, dass Elemente...
So fragen Sie einen Datensatz in MySQL ab, auf welcher Seite der Paging-Seite
Vorwort In der Praxis kann es zu folgendem Proble...
Erläuterung der neuen Funktion von Hadoop 2.X, der Papierkorbfunktion
Durch Aktivieren der Papierkorbfunktion können Si...
Beschreiben Sie kurz, wie Sie das Tomcat-Image installieren und das Webprojekt in Docker bereitstellen
1. Installieren Sie Tomcat 1. Suchen Sie das Tomc...
Vollständige Schritte zum Erstellen eines Hochleistungsindex in MySQL
Inhaltsverzeichnis 1. Index-Grundlagen 1. Arten v...
Informationen zu benutzerdefinierten Überwachungselementen und Triggern von Zabbix
Inhaltsverzeichnis 1. Überwachungsport Beziehungs...
Beispiel und Lösung für einen SQL-Injection-Sicherheitslückenprozess
Codebeispiel: öffentliche Klasse JDBCDemo3 { öffe...