Eine detaillierte Zusammenfassung der Regeln zur Verschachtelung von HTML-Tags, geeignet für Anfänger
|
Ich habe vor kurzem HTML neu gelernt, was als neues HTML-Verständnis angesehen werden kann! Unterschätzen Sie diese Sache nicht, alle Webseiten basieren darauf! Lassen Sie uns die Verschachtelungsregeln für HTML-Tags im Folgenden im Detail zusammenfassen. Ich hoffe, es wird für alle hilfreich sein. XHTML hat viele Tags: div, ul, li, dl, dt, dd, h1~h6, p, a, addressa, span, strong... Wenn wir diese Tags zum Aufbau der Seitenstruktur verwenden, können wir sie unendlich verschachteln. Allerdings erfordert die Verschachtelung auch bestimmte Regeln, und wir können nicht zulassen, dass unsere persönlichen Gewohnheiten sie willkürlich verschachteln – schließlich ist XHTML nicht XML. 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: Eines davon heißt Block-Level-Elemente Ein Typ wird Inline-Elemente genannt (Inline, von vielen auch Inline, Inline, Zeilenebene usw. genannt). Die Unterscheidung zwischen Block-Level-Elementen und Inline-Elementen ist einfach. Bitte fügen Sie folgende zwei Zeilen Code in den Body-Tag ein: Code kopieren Der Code lautet wie folgt:<div style=”border: 1px durchgehend rot;”>div1</div> <div style=”border: 1px durchgezogenes Rot;”>div2</div> Der Browser-Rendering-Effekt: div1 div2 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: Code kopieren Der Code lautet wie folgt:<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 Architektur und das Layout einer Website zu erstellen und Inhalte bereitzustellen. Diese umfangreichen Aufgaben sind alle Blockelemente, die die folgenden Tags enthalten: Adresse, Blockzitat, Zentrum, Dir, Div, DL, DT, DD, Feldsatz, Formular, H1~H6, HR, Isindex, Menü, NoFrames, NoScript, OL, P, Pre, Tabelle, UL 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, abbr, Akronym, b, bdo, groß, br, zitieren, Code, dfn, em, Schriftart, i, img, Eingabe, kbd, Etikett, q, s, samp, auswählen, klein, span, strike, stark, sub, sup, Textbereich, tt, u, var 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 |
<<: Eine kurze Erläuterung der Lösung für den Fehler beim Starten der Serverinstallation in MySQL
>>: Detaillierte Erklärung häufig verwendeter CSS-Stile (Layout)
Artikel empfehlen
So installieren Sie den Xrdp-Server (Remote Desktop) unter Ubuntu 20.04
Xrdp ist eine Open-Source-Implementierung des Rem...
Öffnen Sie die App auf der h5-Seite in Vue (bestimmen Sie, ob es sich um Android oder Apple handelt).
1. Entwicklungsumgebung vue+vant 2. Computersyste...
Strategie zur Optimierung der Leistung von MySQL-Datenbankabfragen
Optimieren von Abfragen Verwenden der Explain-Anw...
Vue implementiert die Shake-Funktion (kompatibel mit ios13.3 und höher)
Vor Kurzem habe ich mit shake.js eine ähnliche Fu...
MySQL 5.6.24 (binär) automatisches Installationsskript unter Linux
In diesem Artikel wird der Skriptcode für die aut...
Beheben Sie den Fehler während der Verbindungsausnahme in Docker
Wenn Sie Docker zum ersten Mal verwenden, werden ...
Detaillierte Fehlerbehebung bei Docker.service-Startfehlern
Führen Sie den folgenden Befehl aus, um einen Feh...
Java verwendet Apache.POI, um HSSFWorkbook nach Excel zu exportieren
Verwenden Sie HSSFWorkbook in Apache.POI, um nach...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.10 WinX64 (Win10)
MySQL ist eine relativ einfach zu verwendende rel...
Verwendung des Zielattributs des HTML-Tags a
1: Wenn Sie das Tag <a> zum Verlinken auf ei...
Erstellen eines Image-Servers mit FastDFS unter Linux
Inhaltsverzeichnis Serverplanung 1. Systemkompone...
Implementierungsschritte zur Kapselung von Komponenten basierend auf React
Inhaltsverzeichnis Vorwort Wie kapselt Antd Kompo...
Erste Schritte mit dem Alibaba Cloud ECS-Server (unbedingt zu lesendes Tutorial für Neulinge)
1. Alibaba Cloud wählt den geeigneten Cloud-Serve...
24 praktische Tipps zur JavaScript-Entwicklung
Inhaltsverzeichnis 1. Initialisieren Sie das Arra...
So fahren Sie nginx herunter/starten es neu
Schließung Dienst Nginx stoppen systemctl stoppt ...