Was sind HTML-Inline-Elemente und Blockelemente?

Zu den

HTML-Inline-Elementen gehören: a (Ankerelement), b (fett), br (Zeilenumbruch), Code, em (Hervorhebung), Schriftart (Schriftarteinstellung), i (kursiv), img (Bild), Eingabe (Eingabe). box), span, strong (fette Hervorhebung), textarea, u usw.; Blockelemente umfassen: Adresse (Adresse), Blockquote (Blockzitat), Center (zentrierter Block), div, h1~h6 (Titel), hr (horizontale Trennlinie), p, ul, ol usw.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, HTML5-Version, Dell G3-Computer.

Erläuterung zu Inline-Elementen und Blockelementen

Gemäß der CSS-Spezifikation verfügt jedes Webseitenelement über ein Anzeigeattribut, mit dem beispielsweise der Typ des Elements bestimmt wird , ein div-Element hat den Standard-Anzeigeattributwert „block“ und wird zu einem „Block-Level“-Element, während ein span-Element den Standardanzeigeattributwert „inline“ hat und als „inline“-Element bezeichnet wird.

Elemente auf Blockebene wie div belegen automatisch einen bestimmten rechteckigen Raum. Sie können das Erscheinungsbild dieses Rechtecks ​​​​durch Festlegen von Attributen wie Höhe, Breite, innerem und äußerem Rand anpassen. Ein Inline-Element hat keinen eigenen unabhängigen Raum. Es ist an andere Elemente auf Blockebene angehängt. Daher ist das Festlegen von Attributen wie Höhe, Breite sowie innere und äußere Ränder für Inline-Elemente ungültig.

Unterschiede zwischen Inline- und Blockelementen:

(1) Elemente auf Blockebene belegen eine exklusive Zeile und ihre Breite füllt automatisch die Breite ihrer übergeordneten Elemente aus. und benachbarte Inline-Elemente werden in derselben Zeile angeordnet, es wird nicht umgebrochen, bis es nicht mehr in eine Zeile passt, und seine Breite ändert sich mit dem Inhalt des Elements. Im Allgemeinen handelt es sich um Elemente auf Blockebene kann die Breiten- und Höhenattribute festlegen, und das Festlegen von Breite und Höhe für Inline-Elemente ist ungültig
(Hinweis: Auch wenn die Breite eines Elements auf Blockebene festgelegt ist, belegt es immer noch eine exklusive Zeile)
(3). Elemente können Rand und Polsterung festlegen. Die horizontalen Polsterung-links, Polsterung-rechts, Rand-links und Margin-rechts erzeugen alle einen Randeffekt, aber vertikale Polsterung-oben, Polsterung-unten, Rand-oben und margin-bottom erzeugt keinen Randeffekt. (Gültig in horizontaler Richtung, ungültig in vertikaler Richtung)

Blockelement (Blockelement) ​ ​ ​ ​ ​ ​ ​ * Adresse - Adresse ​

​ ​ * Blockquote - Blockzitat ​

​

* div - häufig verwendete Blockebene, auch das Haupt-Tag des CSS-Layouts * dl - Definitionsliste * Fieldset - Formularkontrollgruppe * Formular - interaktives Formular * h1 - Überschrift

* h2 - Untertitel

　 * h3 - Überschrift der Ebene 3

* h4 – Überschrift der Ebene 4

　 * Menü – Menüliste

　* noframes – Frames optionaler Inhalt, (dieser Blockinhalt wird für Browser angezeigt, die keine Frames unterstützen

　 * noscript – optionaler Skriptinhalt (dieser Inhalt wird angezeigt für Browser, die kein Skript unterstützen)

　* ol – Sortierte Form

　 * p – Absatz

　 * vorformatierter Text

　 * Tabelle – Tabelle

* a – Ankerpunkt

　 * abbr – Abkürzung

.

* 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

　 * Beschriftung – Tabellenbeschriftung 　 * q – kurzes Zitat

samp – Definitionsbeispiel Computercode

　 * Auswahl – Elementauswahl

　 * small – kleiner Schrifttext

* sub – tiefgestellt

　 * sup – hochgestellt

　 * textarea – mehrzeiliges Texteingabefeld

　 * tt – Telextext

　　* u - Unterstreichen

　

Verwandte Empfehlungen: „ HTML-Video-Tutorial

"

Das obige ist der detaillierte Inhalt vonWas sind HTML-Inline-Elemente und Blockelemente?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!