Detaillierte Regeln für die Verschachtelung von HTML-Tags

Dieses Mal bringe ich Ihnen die detaillierten Regeln für die Verschachtelung von HTML-Tags und welche Vorsichtsmaßnahmen für die Verschachtelung von HTML-Tags gelten. Hier ist ein praktischer Fall, werfen wir einen Blick darauf.

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 für die Verschachtelung müssen auch bestimmte Regeln gelten, und Sie können nicht zulassen, dass Ihre persönlichen Gewohnheiten zufällig 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 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:

Der Code lautet wie folgt:

<div style=”border: 1px solid red;”>div1</div> 
<div style=”border: 1px solid red;”>div2</div>

Browser-Rendering-Effekt:
div1
div2
Die beiden auf dem gerenderten Divs Seite belegen die zweite Leerzeichenzeile, es sei denn, sie dürfen Float (schweben) (schweben) oder andere Einstellungen vornehmen, sonst ist niemand nebeneinander und sie belegen arrogant ihre eigene Leerzeile - wann immer Wenn Sie dieses Phänomen in einem Etikett sehen, können Sie es nennen: Element auf Blockebene (Block);
Fügen Sie die folgenden zwei Codezeilen in das Body-Tag ein:

Der Code lautet wie folgt:

<span style=”border: 1px solid red;”>span1</span> 
<span style=”border: 1px solid red;”>span2</span>

Der Rendering-Effekt des Browsers:
span1 span2
Dieses Mal werden die beiden Spannen in einer Zeile nebeneinander gestellt. Sie sind freundlich und harmonisch ... Mit Tags wie diesem Verhalten , wir können sie nennen: Inline-Elemente (Inline);
Der Unterschied zwischen Block-Level-Elementen und Inline-Elementen:
·Block-Level-Elemente werden im Allgemeinen zum Erstellen von Website-Architektur, zum Layout und zum Übertragen von Inhalten verwendet ... Diese großen physischen Aufgaben gehören alle zu Elementen auf Blockebene, zu denen die folgenden Tags gehören:

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 „hervorzuheben“. , Stile, Hochstellungen, Tiefstellungen, Ankerpunkte usw. unterscheiden. Warten Sie, 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

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

display: block; /* 转成块元素 */ 
display: inline; /* 转成内嵌元素 */

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

<div><h1></h1><p></p></div> —— 对 
<a href=”#”><span></span></a> —— 对 
<span><div></div></span> —— 错

2. Elemente auf Blockebene können nicht in e388a4556c0f65e1904146cc1a846bee platziert werden:

<p><ol><li></li></ol></p> —— 错 
<p><div></div></p> —— 错

3. Es gibt mehrere spezielle Elemente auf Blockebene, die nur Inline-Elemente und keine Elemente auf Blockebene enthalten können:

h1、h2、h3、h4、h5、h6、p、dt

4 li kann div-Tags enthalten item muss nicht 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, mit gleichem Status und ohne Unterscheidung Ebenen (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 gegenübergestellt, und Inline-Elemente werden gegenübergestellt Inline-Elemente:

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

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So verwenden Sie die Header-Struktur in HTML

So bedienen Sie den Eingabefeldstil von type="file "

Was sind in HTML-Listen die Unterschiede zwischen dl(dt,dd), ul(li) und ol(li)

Das obige ist der detaillierte Inhalt vonDetaillierte Regeln für die Verschachtelung von HTML-Tags. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!