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
Koexistenz von Python2 und Python3 unter einem CentOS7-System
Der erste Schritt besteht darin, die Versionsnumm...
Einführung und Verwendung des JS-Beobachtermodus
Inhaltsverzeichnis I. Definition 2. Anwendungssze...
Web-Standardanwendung: Neugestaltung der Tencent QQ-Homepage
Die Homepage von Tencent QQ wurde neu gestaltet un...
Detaillierte Schritte für deepin20 zur Installation von NVIDIA Closed-Source-Treibern
Schritt 1: Installieren Sie den tiefen "Graf...
Drei BOM-Objekte in JavaScript
Inhaltsverzeichnis 1. Standortobjekt 1. URL 2. Ei...
Lösung für den Fehler beim Importieren von MySQL Big Data in Navicat
Die von Navicat exportierten Daten können nicht i...
Versionsnummern in CSS- und JS-Links in HTML (Cache aktualisieren)
Hintergrund Suchen Sie in der Suchmaschine nach d...
MySQL erstellt Benutzer, autorisiert Benutzer, widerruft Benutzerberechtigungen, ändert Benutzerkennwörter und löscht Benutzer (praktische Tipps)
MySQL erstellt Benutzer und autorisiert und wider...
10 Best Practices zum Erstellen und Warten großer Vue.js-Projekte
Inhaltsverzeichnis 1. Nutzen Sie Slots, um Kompon...
Implementierung der Beschleunigung der Docker-Installation und -Konfigurationsabbildung
Inhaltsverzeichnis Docker-Version Installieren Si...
React-Internationalisierung – Verwendung von react-intl
Wie erreicht man Internationalisierung in React? ...
So ändern Sie die Farbe der gesamten Zeile (tr), wenn die Maus in HTML stoppt
Verwenden Sie reines CSS, um die Hintergrundfarbe...
Linux-Datei-/Verzeichnisberechtigungen und Eigentümerverwaltung
1. Übersicht über Dateiberechtigungen und Eigentu...
Detaillierte Erläuterung der Implementierungsmethode für Linux inotify-Echtzeitsicherungen
Die Echtzeitreplikation ist die wichtigste Method...
HTML-Tabellen-Markup-Tutorial (14): Tabellenkopf
<br />In der HTML-Sprache können Sie der Tab...