Verschachtelungsregeln für HTML-Tags

Es gibt viele HTML-Tags: div, ul, li, dl, dt, dd, h1~h6, p, a, addressa, span, strong... Wenn wir diese Tags verwenden, um die Seitenstruktur aufzubauen, können wir das Sie sind unendlich verschachtelt, aber die Verschachtelung erfordert auch bestimmte Regeln. Sie können nicht zulassen, dass Ihre eigenen persönlichen Gewohnheiten zufällig verschachtelt werden. Was sind also die Verschachtelungsregeln für HTML-Tags?

1. HTML-Tags umfassen Elemente auf Blockebene (Block) und Inline-Elemente (Inline)

1. Elemente auf Blockebene

werden im Allgemeinen zum Erstellen einer Website-Architektur verwendet. Layout, Inhalt tragen... Es enthält die folgenden Tags:

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

2. Inline-Elemente

Wird im Allgemeinen in bestimmten Details oder Teilen des Website-Inhalts verwendet, um „Stile hervorzuheben, zu unterscheiden, hochzustellen, tiefzustellen, zu verankern“. point“ und so weiter. 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

2. Verschachtelungsregeln von HTML-Tags

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

　< p>

– Rechts

　:

　

—— Falsch

　< ;p>

—— Falsch

　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 – dieses 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 Ebenenunterscheidung (zum Beispiel: h1, h2 So eine strenge Hierarchie^_^), Sie Ich muss wissen, dass das li-Tag sogar sein übergeordnetes ul oder ol aufnehmen kann. Warum denken manche Leute, dass li kein div aufnehmen kann? Denken Sie nicht, dass Li so geizig ist. Tatsächlich hat Li ein großes Herz ...

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

　

< a href=“#“>

—— Rechts

　

< ;span>

—— Falsch