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. HTML-Tags umfassen Blockelemente (Block) und Inline-Elemente (Inline)

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

>>: Einführung in die Verwendung von window.open, einem Sprungmenü, das in einem neuen Fenster geöffnet wird

Implementierung der Multi-Environment-Konfiguration (.env) des Vue-Projekts

Beheben Sie das Problem, dass die MySQL-Datenbank unerwartet abstürzt, wodurch die Tabellendatendatei beschädigt wird und nicht gestartet werden kann

Problem: Die MySQL-Datenbank ist unerwartet abges...

Einführung in die Verschachtelungsregeln von HTML-Tags

Implementierung der Multi-Environment-Konfiguration (.env) des Vue-Projekts

MySQL 8.0.11 Installationstutorial mit Bildern und Text

Detailliertes Beispiel für MySQL-Datenspeicherprozessparameter

JavaScript zum Erzielen eines Bodeneffekts

VUE+Canvas realisiert den gesamten Prozess eines einfachen Gobang-Spiels

Nginx verbietet den direkten Zugriff über IP und leitet auf eine benutzerdefinierte 500-Seite weiter

JavaScript-Flusskontrolle (Verzweigung)

Installationsprozess von VMware vCenter 6.7 (grafisches Tutorial)

Ein IE-Absturzfehler

js, um den Effekt eines Lichtschalters zu erzielen

Artikel empfehlen

Kurze Analyse des MySQL-Zeichensatzes, der Datenbankwiederherstellungsfehler verursacht

So implementieren Sie eine einfache Datenüberwachung mit JS

Vue-Electron-Problemlösung bei Verwendung des seriellen Ports

Tutorial zur Installation von VMware Workstation 14 Pro unter Ubuntu 16.04

So aktualisieren Sie die Ansicht synchron nach Datenänderungen in Vue

Kann die wiederholbare Leseebene von MySQL Phantomlesevorgänge lösen?

Beheben Sie das Problem, dass die MySQL-Datenbank unerwartet abstürzt, wodurch die Tabellendatendatei beschädigt wird und nicht gestartet werden kann

Beispiele für die Verwendung von HTML-Listen-Tags dl, ul, ol

So verkleinern Sie das Stammverzeichnis des XFS-Partitionsformats in Linux

So installieren Sie Docker mithilfe von Skripten unter Linux Centos

Analyse und Lösung von Datenverlusten während der Wertübertragung von Vue-Komponenten

CSS-Implementierungscode für verzerrte Schatten

CSS-Tipps zur Steuerung der Wiedergabe und Pause von Animationen (sehr praktisch)

Detailliertes Tutorial zur Installation von Protobuf 3 unter Ubuntu

Vorteile von INSERT INTO SET in MySQL