Der Originaltext ist hier
Klassifizierung von Elementen auf Blockebene Elemente auf Blockebene werden in drei Typen unterteilt, je nachdem, ob sie auf Struktur oder Inhalt angewendet werden: strukturierte Blockelemente, Endblockelemente und Blockelemente mit mehreren Zielen. 1. Strukturierte Blockelemente Dieser Elementtyp wird zur Strukturierung des Dokuments verwendet. Eine gute Dokumentstruktur ist für Suchmaschinen und die Anwendung anderer Technologien (wie JavaScript ) sehr vorteilhaft. Sie haben keine semantische Bedeutung. Sie definieren lediglich die Organisation des Dokuments und spiegeln nicht den Inhalt des Dokuments wider. Hauptstrukturierte Blockelemente *
* ;li> * * * * . Klemmenblockelemente gehören zum Ende der Struktur. Sie können keine anderen Elemente auf Blockebene enthalten, sondern nur Elemente auf Text- oder Zeilenebene. Klemmenblockelement * ... Multiobjektive Blockelemente haben strukturelle Konnotationen, wenn sie strukturiert verwendet werden, und semantische Konnotationen, wenn sie in terminaler Form verwendet werden. Blockelemente mit mehreren Zielen können entweder Blockelemente oder Inhalt enthalten (die Kombination aus Text und Elementen auf Zeilenebene ist Inhalt), jedoch nicht beides gleichzeitig. Inhalte sollten in Blockelementen platziert werden. Blockelemente sollten nicht als Geschwister von Elementen und Text auf Zeilenebene verwendet werden. Aufgrund der Einschränkungen des HTML-Validators gibt es derzeit keine Möglichkeit, diese Situation zu erkennen, sie sollte jedoch vermieden werden. Multi-Ziel-Blockelemente * * > * Wenn wir über CSS-Layout sprechen, müssen wir etwas im Voraus wissen. Für verschiedene HTML-Tags/-Elemente kann eine Klassifizierung auf Blockebene erfolgen: entweder Block (Blockelement) oder Inline ( Inline-Element ): Eigenschaften von Blockelementen: * Immer starten in einer neuen Zeile; * Höhe, Zeilenhöhe sowie oberer und unterer Rand können alle gesteuert werden; * Die Breite beträgt standardmäßig 100 % des Containers, in dem sie sich befindet, sofern keine Breite festgelegt ist. Eigenschaften des Inline-Elements: * und andere Elemente befinden sich in derselben Zeile * Höhe, Zeilenhöhe sowie oberer und unterer Rand können nicht geändert werden; * Breite ist der Text oder das Bild passt sich an. Die Breite kann nicht verändert werden. Ihre Eigenschaften und Anwendungen werden im Folgenden näher erläutert: ◎Blockelement (Blockelement) wird normalerweise als Container für andere Elemente verwendet und kann Inline-Elemente und andere Blockelemente aufnehmen. Wir wissen, dass Blockelemente standardmäßig in einer neuen Zeile nach unten angeordnet werden. Durch die Steuerung des Stils über CSS können wir diesen Standardlayoutmodus ändern und die Blockelemente an der gewünschten Stelle platzieren. Es sollte darauf hingewiesen werden, dass das Tabellen-Tag aus Sicht des Benutzers neben dem Unterschied in der Seitenladegeschwindigkeit auch eine Art Blockelement ist, das auf TabelleTabelle und Layout basiert. Die Tabelle wird in allen Inhaltselementen geladen und nach Abschluss angezeigt. Ansonsten gibt es keinen Unterschied. Aber dem Quellcode der Seite nach zu urteilen, ist der Unterschied sehr groß. Der auf dem Konzept einer guten Struktur basierende CSS-Layout-Quellcode kann es zumindest Benutzern ohne Erfahrung in der Webentwicklung leicht machen, fortlaufende Seiteninhalte zu finden. Aus dieser Perspektive sollte CSS-Layoutcode ein besseres ästhetisches Erlebnis bieten. Wir können uns die p von modular als Boxen vorstellen und sie dann nach unseren eigenen Wünschen zu vollständigen Inhalten anordnen. Das Weblayout-Design folgt dem gleichen Muster. * Blockelement * dir – Verzeichnisliste * p – häufig verwendete Blockebene ist auch das Haupt-Tag des CSS-Layouts * dl – Definitionsliste * Feld set – Formularkontrollgruppe * Formular – interaktives Formular (kann nur zur Aufnahme anderer Blockelemente verwendet werden) * h1 – großer Titel * h2 – Untertitel * h3 – Ebene 3 Titel * h4 – Überschriften der Ebene 4 * h5 – Überschriften der Ebene 5 * h6 – Überschriften der Ebene 6 * hr – horizontale Trennzeichen * isindex – Eingabeaufforderung * Menü - Menüliste * noframes – Frames optionaler Inhalt, (zeigt diesen Blockinhalt für Browser an, die keine Frames unterstützen) * noscript – optionaler Skriptinhalt (zeigt diesen Inhalt für Browser an, die kein Skript unterstützen) * ol – Sortierform * p – Absatz * vorformatierter Text * Tabelle – Tabelle * ul – nicht sortierte Liste ◎Inline-Elemente basieren im Allgemeinen auf Basiselementen Die semantische Ebene kann nur Text oder andere Inline-Elemente aufnehmen. Um den Unterschied zwischen Block und Inline deutlich zu machen, können wir die Demonstration ihrer jeweiligen repräsentativen Elemente p und span zur Veranschaulichung verwenden: XXXXXXXXX Dies ist ein p-Layout XXXXXXXXX p beginnt in einer neuen Zeile, seine Form wird nicht durch den internen Text beeinflusst XXXXXXXDies ist ein Span-LayoutXXXXXXX Alle Elemente befinden sich in einer Zeile, span enthält nur den Text Inline-Element (Inline-Element) HTML-Tag-Klassifizierungsdetails * a – Anker * abbr – Abkürzung * Akronym – erstes Wort * b – fett (nicht empfohlen) * bdo – bidi override * big – große Schriftart * br – Zeilenumbruch * cite – quote * code – Computercode (erforderlich beim Zitieren von Quellcode) * dfn – Definieren das Feld Eingabe – Eingabefeld * kbd – Tastaturtext definieren * label – Tabellenbezeichnung * q – kurzes Anführungszeichen * s – Unterstrich (nicht empfohlen) * samp – Definitionsbeispiel Computercode * select – Elementauswahl * small – kleiner Schrifttext * span – häufig verwendeter Inline-Container, der Blöcke innerhalb von Text definiert * Strike – Unterstreichung * strong – Fetthervorhebung * sub – tiefgestellt * sup – hochgestellt * textarea – mehrzeiliges Texteingabefeld * tt – Telextext * u – Unterstrich * var – Variablen definieren ◎Variable Elemente basieren auf den beiden oben genannten und ändern sich mit der Umgebung. Ihr Grundkonzept besteht darin, basierend auf dem Kontext zu bestimmen, ob das Element ein Blockelement oder ein Inline-Element ist. Sobald seine Kategorie bestimmt ist, folgt es den Regeln für Block- oder Inline-Elemente. HTML-Tag-Klassifizierungsdetails für variable Elemente * Applet – Java-Applet * Schaltfläche – Schaltfläche * Entf – Löschen Text * Iframe – Inline-Frame * ins - eingefügter Text * Karte - Bildblock (Karte) * Objekt - Objekt Objekt * Skript - Client-Skript Aber durch CSS können wir die Einschränkungen der HTML-Tag-Klassifizierung in der obigen Tabelle beseitigen und die Attribute, die wir benötigen, frei auf verschiedene Tags/Elemente anwenden. Zum Beispiel können wir dem Blockelement-Tag [ul] das Attribut display:inline hinzufügen, um die ursprünglich vertikale Liste horizontal anzuzeigen. Dies wird häufig verwendet, wenn wir die Blog Navigation-Leiste festlegen Das Inline-Element [cite] fügt ein Attribut wie display:block hinzu, sodass es auch die Eigenschaft hat, jedes Mal in einer neuen Zeile zu beginnen. Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in HTML-Blockelemente und Inline-Elemente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
1970-01-01 08:00:00
1970-01-01 08:00:00
1970-01-01 08:00:00
1970-01-01 08:00:00
1970-01-01 08:00:00
1970-01-01 08:00:00
1970-01-01 08:00:00
1970-01-01 08:00:00
1970-01-01 08:00:00
1970-01-01 08:00:00