Grundlegende Konzepte und Anwendungsbeispiele für HTML-Inline-Elemente und Block-Level-Elemente

Es gibt zwei Arten von HTML-Tags: Inline-Elemente und Block-Level-Elemente. Lassen Sie uns zunächst die Konzepte von Inline-Elementen und Block-Level-Elementen verstehen:

Blockebenenelemente: Im Allgemeinen sind sie Container für andere Elemente. Sie können Inline-Elemente und andere Blockebenenelemente enthalten. Blockebenenelemente verhindern, dass andere Elemente in derselben Zeile stehen. Sie können Breiten- und Höhenattribute festlegen. Blockebenenelemente im normalen Fluss werden vertikal platziert. Gängige Blockelemente sind „div“

Inline-Elemente (Inline-Elemente): Inline-Elemente können nur Text oder andere Inline-Elemente enthalten. Sie sind Nachkommen von Block-Level-Elementen. Sie erlauben, dass sich andere Inline-Elemente mit ihnen in derselben Zeile befinden. Die Höhe und Breite können nicht eingestellt werden. Ein häufiges Inline-Element ist „a“.

Gemäß dem Konzept von Elementen auf Blockebene können wir verstehen, dass Elemente auf Blockebene vor und nach sich Zeilenumbrüche haben, was dem Hinzufügen eines <br>-Tags vor und nach dem Element entspricht. Wir können uns Blockebenenelemente als einen Block oder ein Rechteck vorstellen, sodass Blockebenenelemente Höhen- und Breitenattribute festlegen können.

Beispiel:
CSS-Datei:

Gemäß dem Konzept der Inline-Elemente können wir verstehen, dass vor und nach Inline-Elementen keine Zeilenumbrüche vorhanden sind. Wir können uns ein Inline-Element als eine Linie vorstellen, für die keine Höhen- und Breitenattribute festgelegt werden können.

Blockelement-Tags

Adresse - Adresse
blockquote - Blockquote
center – in der Mitte ausrichten
dir - Verzeichnisliste
div - häufig verwendetes Blockelement und auch das Haupt-Tag des CSS-Layouts
dl - Definitionsliste
Fieldset - Formular-Kontrollgruppe
Formular - Interaktives Formular
h1 – Großer Titel
h2 - Untertitel
h3 – Überschrift der Ebene 3
h4 – Überschrift der Ebene 4
h5 – Überschrift der Ebene 5
h6 – Überschrift der Ebene 6
hr - horizontale Trennlinie
isindex - Eingabeaufforderung
Menü - Menüliste
noframes - Frames optionaler Inhalt, (für Browser, die keine Frames unterstützen, wird dieser Blockinhalt angezeigt
noscript – optionaler Skriptinhalt (wird für Browser angezeigt, die kein Skript unterstützen)
ol - Sortierformular
p - Absatz
Text vorformatieren
Tisch
ul - ungeordnete Liste

Inline-Element

a - Ankerpunkt
abbr - Abkürzung
Akronym - erster Buchstabe
b - fett (nicht empfohlen)
BDO - Bidi-Überschreibung
groß - große Schrift
br - Zeilenumbruch
zitieren - Zitat
Code - Computercode (erforderlich beim Zitieren von Quellcode)
dfn - definiert ein Feld
em - Betonung
Schriftart - Schriftarteinstellungen (nicht empfohlen)
i - kursiv
img - Bild
Eingang
kbd - Tastaturtext definieren
Etikett - Tabellenetikett
q - kurzes Zitat
s - Bindestrich
samp - Beispiel-Computercode definieren
select - Artikelauswahl
klein - Text in kleiner Schrift
span - häufig verwendeter Inline-Container, definiert den Textblock
Schlag - ein Strich
stark - fette Betonung
sub - tiefgestellt
sup – hochgestellt
Textbereich – mehrzeiliges Texteingabefeld
tt - definiert Schreibmaschinentext
var - eine Variable definieren