In der XHTML-Sprache wissen wir alle, dass das UL-Tag Li, DL-Tag enthält DT- und DD-Necking-Regeln für diese festen Tags sind sehr klar. Es gibt jedoch viele Tags, die unabhängig sind und nicht miteinander verbunden sind, wie H1, Div, p ... Also, was sind die Nistregeln für diese Tags? Lassen Sie uns noch 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, ein Blockelement genannt wird und das andere als Inline -Element bezeichnet wird (Inline, die viele Leute es nennen: Inline, Inline, Zeilenebene usw.).
Die Divisionsstandards für Elemente auf Blockebene und eingebettete Elemente sind sehr einfach. Bitte geben Sie die folgenden zwei Codezeilen in das Body -Tag ein:
<div style = border: 1px fest rot;> div1 </div>
<div style = border: 1px fest rot;> div2 </div>
Browser -Rendering -Effekt:
div1div2Die beiden auf der Seite präsentierten Divs belegen zwei Platzreihen. Wenn sie nicht schweben oder andere Einstellungen vornehmen dürfen, befindet sich niemand nebeneinander. Sie alle belegen ihre eigenen Räume, die zu dominant sind. Wenn Sie ein bestimmtes Tag mit diesem Phänomen sehen, können Sie es nennen: Blockelement (Block) ;
Geben Sie dann die folgenden zwei Codezeilen in das Body -Tag ein:
<span style = border: 1px fest rot;> span1 </span>
<span style = border: 1px fest rot;> span2 </span>
Browser -Rendering -Effekt:
Span1 span2
Diesmal sind zwei Spannweiten nebeneinander angeordnet und sie sind freundlich und freundlich, freundlich und harmonisch ... Für solche Verhaltensweisen können wir sie nennen: Inline -Elemente ;
Der Unterschied zwischen Elementen auf Blockebene und eingebetteten Elementen: · Elemente auf Blockebene werden im Allgemeinen verwendet, um Website-Architektur, Layout und Inhalte aufzubauen. Diese großgebundenen Jobs sind Elemente auf Blockebene, die die folgenden Tags enthalten:Div, Ul, Li, DL, DT, DD, H1 ~ H6, P, Adresse ...
· Inline -Elemente werden im Allgemeinen in bestimmten Details oder Teilen der Website -Inhalte verwendet, um Stile, Superschriften, Indexs, Ankerpunkte usw. hervorzuheben und zu unterscheiden. Die folgenden Tags sind alle eingebettete Elemente:a, span, stark, sub, sup, img ...
· Blockelemente und eingebettete Elemente können ineinander konvertiert werden, und der Konvertierungscode lautet wie folgt:Anzeige: Block; /* in Blockelement*//* konvertieren*/
Anzeige: Inline; /* In ein eingebettetes Element konvertieren*/
· Die aufrufenden Regeln für CSS zwischen Blockelementen und eingebetteten Elementen sind unterschiedlich (in diesem Artikel wird die Verschachtung der Etikettierung erörtert, sodass ich diesen Wissenspunkt nicht erklären werde).Nachdem Sie einfach die Blockelemente und eingebetteten Elemente verstanden haben, können Sie die Nisting -Regeln von XHTML -Tags auflisten:
1. Ein Blockelement kann Inline -Elemente oder bestimmte Blockelemente enthalten, ein Inline -Element kann jedoch keine Blockelemente enthalten. Es kann nur andere Inline -Elemente enthalten :<div> <h1> </h1> <p> </p> </div> - Ja
<a href =#> <span> </span> </a> - Ja
<span> <div> </div> </span> - falsch
2. Elemente auf Blockebene können nicht in <p> angezeigt werden :<p> <ol> <li> </li> </ol> </p> - falsch
<p> <div> </div> </p> - falsch
3. Es gibt mehrere spezielle Elemente auf Blockebene, die nur eingebettete Elemente enthalten können und keine Elemente auf Blockebene enthalten können. Diese besonderen Tags sind:H1, H2, H3, H4, H5, H6, P, Dt.
V.Die Li- und Div -Tags sind Container für das Laden von Inhalten, mit gleichem Status und ohne Unterscheidung zwischen den Ebenen (z. B. H1 und H2 mit strenger Hierarchie^_^). Sie sollten wissen, dass das Li -Tag sogar seine Eltern UL oder OL aufnehmen kann. Warum denken einige Leute, dass Li die nächste Div nicht aufnehmen kann? Nehmen Sie Li nicht so geizig, schauen Sie Li nicht so dünn wie es ist, eigentlich hat Li einen großen Verstand ...
5. Elemente auf Blockebene und Elemente auf Blockebene sind parallel, und Inline-Elemente und Inline-Elemente sind parallel:<div> <h2> </h2> <p> </p> </div> - Ja
<div> <a href =#> </a> <span> </span> </div> - Ja
<div> <h2> </h2> <span> </span> </div> - falsch