Detaillierte Zusammenfassung der HTML-Tag-Verschachtelungsregeln, die für unerfahrene Freunde geeignet sind_HTML/Xhtml_Webseitenproduktion

Ich habe kürzlich HTML neu gelernt, was als neues Verständnis von HTML angesehen werden kann! Unterschätzen Sie dieses Ding nicht, alle Webseiten basieren darauf! Lassen Sie uns die Verschachtelungsregeln von HTML-Tags im Detail zusammenfassen. Ich hoffe, dass es für alle hilfreich ist.

Es gibt viele XHTML-Tags: div, ul, li, dl, dt, dd, h1~h6, p, a, addressa, span, strong... Wenn wir diese Tags verwenden, um die Seitenstruktur aufzubauen , Sie können unendlich verschachtelt werden, aber die Verschachtelung erfordert auch bestimmte Regeln, und Sie können nicht zulassen, dass Ihre persönlichen Gewohnheiten wahllos verschachtelt werden – XHTML ist schließlich kein XML.

In der Sprache von XHTML wissen wir alle: ul-Tag enthält li, dl-Tag enthält dt und dd – die Verschachtelungsregeln dieser festen Tags sind sehr klar. Es gibt jedoch immer noch viele unabhängige Tags, die 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:
Ein Typ wird als Elemente auf Blockebene (Block) bezeichnet
Der andere Typ heißt Inline-Elemente (Inline, viele Leute nennen es auch: Inline, Inline, Zeilenebene usw.)

Der Standard für die Aufteilung von Blockebenenelementen und Inline-Elementen ist sehr einfach. Bitte geben Sie die folgenden zwei ein Codezeilen in das Body-Tag:

Code kopieren

Der Code lautet wie folgt:

div1

div2

Browser-Rendering-Effekt:
div1
div2

Die beiden auf der Seite dargestellten Divs belegen zwei Zeilen Platz, sofern sie nicht schwebend sind oder andere Einstellungen vorgenommen werden ist nebeneinander. Sie nehmen jeweils eine eigene Reihe ein – wann immer Sie dieses Phänomen in einem Tag sehen, können Sie es als Block-Level-Element (Block) bezeichnen Zwei Zeilen Code in das Body-Tag Hier:

Code kopierenDer Code lautet wie folgt:

span1

span2



Browser-Rendering-Effekt:
span1 span2

Dieses Mal werden die beiden Spannen nebeneinander gestellt. Sie sind freundlich, freundlich und harmonisch ... Mit diesem Etikettenverhalten haben wir Sie können sie nennen: Inline-Elemente;

Der Unterschied zwischen Elementen auf Blockebene und Inline-Elementen:

·Elemente auf Blockebene werden im Allgemeinen zum Erstellen von Website-Architektur, zum Layout und zum Übertragen von Inhalten verwendet. .. …Diese wichtigen physischen Aufgaben sind alle Elemente auf Blockebene, die die folgenden Tags enthalten:

address, blockquote, center, dir, div, dl, dt, dd, fieldset, form, h1~h6, hr , isindex, menu, noframes, noscript, ol, p, pre, table, ul

· Inline-Elemente werden im Allgemeinen in bestimmten Details oder Teilen des Website-Inhalts verwendet, um „Stile hervorzuheben, zu unterscheiden, hochzustellen, tiefzustellen, Ankerpunkt usw., die folgenden Tags sind alle Inline-Elemente:

a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, font ,i,img,input, kbd,label,q,s,samp,select,small,span,strike,strong,sub,sup,textarea,tt,u,var


· Blockelement und Inline-Elemente können konvertiert werden Der Konvertierungscode lautet wie folgt:
display: block; /* Convert to block element*/
display: inline; /* Convert to inline element*/

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

Nachdem wir Blockelemente und Inline-Elemente kurz verstanden haben, können die Verschachtelungsregeln von XHTML-Tags unten aufgeführt werden:

1. Blockelemente können Inline-Elemente oder bestimmte Blockelemente enthalten Blockelemente, sie können nur andere Inline-Elemente enthalten:

—— Ja
—— Ja

< ;/span> >
2. Elemente auf Blockebene können nicht in

platziert werden:

— Falsch

—— Falsch

3. Es gibt mehrere spezielle Elemente auf Blockebene. Es kann nur Inline-Elemente enthalten und kann Diese speziellen Tags sind nicht länger:
h1, h2, h3, h4, h5, h6, p, dt

4 Kann div-Tags enthalten – dieses Element nicht müssen separat aufgeführt werden, aber viele Leute im Internet sind darüber verwirrt, deshalb werde ich es hier kurz erklären:

Li- und div-Tags sind beide Container zum Laden von Inhalten und haben den gleichen Status, es gibt keinen Ebenenunterscheidung (zum Beispiel: strenge Hierarchien wie h1 und h2^_^). Sie müssen wissen, dass das li-Tag sogar sein übergeordnetes ul oder ol aufnehmen kann. Denken Sie nicht, dass li so geizig ist, auch wenn li ziemlich dünn aussieht, tatsächlich hat li ein großes Herz ...

5. Elemente auf Blockebene werden Elementen auf Blockebene und Inline-Elementen gegenübergestellt sind inline mit Inline-Elementen:

a href=“#“ >

– Rechts

< ;/div> —— Falsch