Was sind die Inline-Elemente und Inline-Elemente von HTML? Einführung in die Eigenschaften von HTML-Inline-Elementen und Inline-Elementen

Was sind die Inline-Elemente von HTML? Was sind die Elemente in einem HTML-Block? In diesem Artikel werden Inline-Elemente und Elemente auf Blockebene sowie deren Eigenschaften und Unterschiede vorgestellt.

Eigenschaften von HTML-Inline-Elementen:

Inline-Elemente werden auch Inline-Elemente oder eingebettete Elemente genannt. Inline-Elemente und andere Elemente befinden sich alle in derselben Zeile und Höhe, Zeilenhöhe, Abstand und Ränder können nicht geändert werden. Die Breite entspricht der Breite des Texts oder Bilds und kann nicht geändert werden. Inline-Elemente können nur Text oder andere Inline-Elemente enthalten.

Die im vorherigen Artikel erwähnten a, img, br sind Inline-Elemente.

Eigenschaften von Blockelementen:

① beginnt immer in einer neuen Zeile;

② Höhe, Zeilenhöhe sowie Ränder und Abstand können gesteuert werden;

③Die Standardbreite beträgt 100 % des Containers, sofern keine Breite festgelegt ist.

④Es kann Inline-Elemente und andere Blockelemente aufnehmen.

Eigenschaften von Inline-Elementen:

① und andere Elemente befinden sich in derselben Zeile;

② Höhe, Zeilenhöhe sowie äußere und innere Ränder Der Abstand kann nicht sein geändert;

③Die Breite ist die Breite des Texts oder Bildes und kann nicht geändert werden

④Inline-Elemente können nur Text oder andere Inline-Elemente aufnehmen.

Hinweis zu Inline-Elementen und Blockelementen:

Gemäß der CSS-Spezifikation verfügt jedes Webseitenelement über ein Anzeigeattribut wird verwendet, um den Typ des Elements zu bestimmen. Beispielsweise hat ein div-Element den Standard-Anzeigeattributwert „Block“ und wird zum Standard-Anzeigeattribut Der Wert des span-Elements ist „inline“, was als „inline“-Element bezeichnet wird. Elemente auf Blockebene wie „div“ belegen automatisch einen bestimmten rechteckigen Raum. Das Erscheinungsbild dieses Rechtecks ​​​​kann durch Festlegen von Attributen wie „Höhe“, „Breite“ und „Innen- und Außenränder“ angepasst werden. und „a“ Elemente haben keinen eigenen unabhängigen Raum. Sie sind an andere Elemente auf Blockebene gebunden. Daher ist das Festlegen von Attributen wie Höhe, Breite sowie innere und äußere Ränder für Inline-Elemente ungültig.

Der Unterschied zwischen Inline- und Blockelementen:

(1) Elemente auf Blockebene belegen eine exklusive Zeile und ihre Breite füllt automatisch die Breite ihrer aus übergeordnetes Element

Benachbarte Inline-Elemente werden nicht in derselben Zeile angeordnet. Sie werden nicht umgebrochen, bis eine Zeile nicht mehr passt

(2). Unter normalen Umständen können Elemente auf Blockebene die Breiten- und Höhenattribute festlegen, und die Breite und Höhe von Inline-Elementen sind ungültig

(Hinweis: Auch wenn die Breite eines Blocks (3) Elemente auf Blockebene können den horizontalen Abstand links, den Abstand rechts, den linken Rand und den rechten Rand festlegen Alle Inline-Elemente erzeugen Randeffekte, aber die vertikalen Auffüllungen oben und unten erzeugen weder Randoberseite noch Randunterseite Randeffekte. (Die horizontale Richtung ist gültig, die vertikale Richtung ist ungültig)

Adresse – Adresse

Blockquote – Blockzitat

Mitte – Ausrichtungsblock

dir – Verzeichnisliste

div – gemeinsamer Block Level ist einfach und es ist auch das Haupt-Tag des CSS-Layouts

dl – Definitionsliste

fieldset – Formularkontrollgruppe

form – interaktives Formular

h1 – Überschrift

h2 – Untertitel

h3 – Überschrift der Ebene 3

h4 – Überschrift der Ebene 4

h5 – Überschrift der Ebene 5

h6 – Kopfzeile der Ebene 6

hr – horizontale Trennlinie

menu – Menüliste

noframes – rahmt optionalen Inhalt ein (zeigt diesen Blockinhalt für Browser an, die dies nicht tun). Unterstützungsrahmen

noscript – optionaler Skriptinhalt (zeigt diesen Inhalt für Browser an, die kein Skript unterstützen)

ol – Sortierform

p – Absatz

pre – Formatierter Text

able – Tabelle

ul – Unsortierte Liste

a – Anker

abbr – Abkürzung

Akronym – Erstes Wort

b – Fett (nicht empfohlen)

big – Große Schriftart

br – Zeilenumbruch

zitieren – Zitat

Code – Computercode (erforderlich beim Zitieren von Quellcode)

dfn – Definitionsfeld

em – Hervorhebung

Schriftart – Schriftarteinstellung (nicht empfohlen)

i – ​​kursiv

img – Bild

Eingabe – Eingabefeld

kbd – Tastaturtext definieren

label – Tabellenbezeichnung

q – kurzes Anführungszeichen

s – Unterstrich (nicht empfohlen)

samp – Beispiel-Computercode definieren

select – Elementauswahl

small – Kleiner Schrifttext

span – Häufig verwendete Inline-Container, Blöcke im Text definieren

strike – unterstrichen

strong – fett Hervorhebung

sub – tiefgestellt

sup – hochgestellt

textarea – mehrzeiliges Texteingabefeld

tt – Telextext

u - unterstreichen

var - Variablen definieren

【Verwandte Empfehlungen】

Grundlegende Elemente von HTML, damit Sie HTML von Grund auf lernen können

Das obige ist der detaillierte Inhalt vonWas sind die Inline-Elemente und Inline-Elemente von HTML? Einführung in die Eigenschaften von HTML-Inline-Elementen und Inline-Elementen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!