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

td Inhalt automatisch umbricht Tabelle Tabelle td nach der Einstellung der Breite zu viel Text automatisch umbricht

Einführung in die Verschachtelungsregeln von HTML-Tags

td Inhalt automatisch umbricht Tabelle Tabelle td nach der Einstellung der Breite zu viel Text automatisch umbricht

Eine kurze Analyse, ob die Verwendung von iframe zum Aufrufen einer Seite die Seite zwischenspeichert

Detaillierte Erklärung, warum die gemeinsame Verwendung von v-if und v-for in Vue nicht empfohlen wird

SQL GROUP BY ausführliche Erklärung und einfaches Beispiel

Beispiel für eine geplante MySQL-Datenbanksicherung

So erstellen Sie ein Apache-Image mit Dockerfile

Ausführliches Tutorial zu Installations- und Upgradeproblemen bei MySQL 5.7.30

So installieren Sie mysql5.6 in Docker unter Ubuntu

Implementieren Sie ein einfaches Datenantwortsystem

So implementieren Sie die domänenübergreifende API-Proxy-Weiterleitung über die Nginx-Proxy-Weiterleitungskonfiguration

Artikel empfehlen

Ein zeitaufwändiger Fehlerbehebungsprozess für einen Docker-Fehler

MySQL-Volltextindex, um eine einfache Version des Suchmaschinen-Beispielcodes zu erreichen

MySQL implementiert Multi-Table-Assoziationsstatistiken (Unterabfragestatistiken) Beispiel

Die MySQL-Version ist niedriger als die, die keine zwei Werte vom Typ Zeitstempel unterstützt.

Methoden zum Bereitstellen von MySQL-Diensten in Docker und die dabei auftretenden Fallstricke

Spezifische Verwendung zusammengesetzter CSS-Selektoren

Implementierungsmethode für die Produktion und Bereitstellung von Docker Nginx-Containern

Detaillierte Erklärung der Verwendung des Linux-Befehls nslookup

So starten Sie ein JAR-Paket und führen es unter Linux im Hintergrund aus

Detaillierte Erläuterung des verschachtelten Routings im Vue-Router

Detaillierte Erklärung, wie man ein Passwort an den SSH/SCP-Befehl im Bash-Skript übergibt

9 superpraktische CSS-Tipps, die Designern und Entwicklern helfen

jQuery erzielt Vollbild-Scrolling-Effekt

So richten Sie domänenübergreifenden Zugriff in IIS web.config ein

Implementierung der IP-Adresskonfiguration in Centos7.5