Analyse der Verschachtelungsregeln von XHTML-Tags

In der XHTML-Sprache wissen wir alle, dass das ul-Tag li enthält und das dl-Tag dt und dd enthält – die Verschachtelungsregeln dieser festen Tags sind sehr klar. Es gibt jedoch immer noch viele Tags, die unabhängig und nicht gebündelt sind, wie z. B. h1, div, p ... Was sind also die Verschachtelungsregeln dieser Tags? Lassen Sie uns heute über dieses Thema sprechen.

Wenn es um die Verschachtelungsregeln von XHTML-Tags geht, müssen wir zunächst wissen, dass es zwei Arten von XHTML-Tags gibt, eine heißt Blockebenenelement (Block ) und die andere heißt Inline-Element (Inline, vielen Leuten auch bekannt als: Inline, Inline, Zeilenebene usw.).

Die Unterscheidung zwischen Block-Level-Elementen und Inline-Elementen ist einfach. Bitte fügen Sie folgende zwei Zeilen Code in den Body-Tag ein:

<div style=”border: 1px durchgehend rot;”>div1</div>
<div style=”border: 1px durchgezogenes Rot;”>div2</div>

Der Browser-Rendering-Effekt:

Die beiden Divs auf der Seite belegen zwei Zeilen Platz. Sofern sie nicht schweben oder auf andere Weise festgelegt sind, stehen sie nicht nebeneinander. Sie belegen beide sehr aggressiv ihre eigene Zeile Platz. Wenn Sie ein Tag mit diesem Phänomen sehen, können Sie es als Blockelement bezeichnen.

Fügen Sie dann die folgenden beiden Codezeilen in den Body-Tag ein:

<span style=”border: 1px durchgehend rot;”>span1</span>
<span style=”border: 1px durchgehend rot;”>span2</span>

Der Browser-Rendering-Effekt:

Spanne1 Spanne2

Dieses Mal stehen die beiden Bereiche in einer Reihe und harmonieren gut miteinander. Wir können solche Tag-Verhaltensweisen nennen: Inline-Elemente ;

Der Unterschied zwischen Blockelementen und Inline-Elementen:

Blockelemente werden im Allgemeinen verwendet, um die Struktur und das Layout einer Website zu erstellen und Inhalte bereitzustellen. Diese umfangreichen Aufgaben sind allesamt Blockelemente, die die folgenden Tags enthalten:

div, ul, li, dl, dt, dd, h1~h6, p, Adresse ...

Eingebettete Elemente werden im Allgemeinen in einigen Details oder Teilen des Website-Inhalts verwendet, um „Stile, Hochstellungen, Tiefstellungen, Anker usw. hervorzuheben, zu unterscheiden“. Die folgenden Tags sind alle eingebettete Elemente:

a, span, stark, sub, sup, img...

Blockelemente und Inline-Elemente können ineinander konvertiert werden. Der Konvertierungscode lautet wie folgt:

Anzeige: Block; /* In Blockelement umwandeln*/

Anzeige: inline; /* In Inline-Element umwandeln*/

· Die CSS- Aufrufregeln für Blockelemente und Inline-Elemente sind unterschiedlich (in diesem Artikel geht es um die Verschachtelung von Tags, daher wird dieser Wissenspunkt nicht im Detail erläutert).

Nach einer kurzen Einführung in Blockelemente und Inline-Elemente können wir nun die Verschachtelungsregeln von XHTML-Tags auflisten:

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 :

<div><h1></h1><p></p></div> —— Ja
<a href=”#”><span></span></a> —— Ja
<span><div></div></span> – Falsch

2. Blockelemente können nicht in <p> platziert werden :

<p><ol><li></li></ol></p> —— Falsch

<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:

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:

<div><h2></h2><p></p></div> —— Ja
<div><a href=”#”></a><span></span></div> —— Ja

<div><h2></h2><span></span></div> – Falsch