Detaillierte Einführung in die Klassifizierung von HTML-Elementen

HTML Elementklassifizierung

1. Klassifizierung nach Blockebenenelementen oder Inline-Elementen

Block-Level-Elemente (Block-Level) und Inline-Elemente (Inline-Level, auch „Inline“-Elemente genannt).

a. Element auf Blockebene (belegt eine Zeile)

Element auf Blockebene: Sein offensichtlichstes Merkmal ist, dass es sein übergeordnetes Element ausfüllt Standardmäßig horizontal Der Inhaltsbereich des Elements, und auf der linken und rechten Seite befinden sich keine anderen Elemente. Das heißt, Elemente auf Blockebene belegen standardmäßig eine Zeile . Typische Elemente auf Blockebene sind:

,

,

~

,

usw.

b. Inline-Elemente (können eine Zeile mit anderen Elementen teilen)

Inline-Elemente: Inline-Elemente bilden keinen neuen Inhaltsblock, Das heißt, innerhalb ihrer Links und rechts können sich andere Elemente befinden, z. B. , , usw., bei denen es sich um typische Elemente auf Inline-Ebene handelt. display Elemente mit dem Attribut gleich „inline“ sind alle Inline-Elemente. Fast alle ersetzbaren Elemente sind Inline-Elemente, wie z. B. , usw.

PS: (Blockebene und Inline können ineinander konvertiert werden): Durch Festlegen des display-Attributs von CSS können Inline-Elemente in Elemente auf Blockebene umgewandelt werden : display: block; Sie können Elemente auf Blockebene auch in Inline-Elemente umwandeln: display: inline.

*Der Unterschied zwischen Elementen auf Blockebene und Inline-Elementen:

1.Elemente auf Blockebene belegen eine exklusive Zeile und ihre Breite füllt automatisch die Breite ihrer übergeordneten Elemente aus; Inline-Elemente belegen keine exklusive Zeile. Wenn eine Zeile nicht passt, ändert sich ihre Breite mit dem Inhalt das Element

2 .Im Allgemeinen können Elemente auf Blockebene mit den Attributen width und height festgelegt werden, während Inline-Elemente mit Breiten- und Höheneinstellungen ungültig sind.

3. Elemente auf Blockebene können mit margin und padding festgelegt werden. Die horizontale Richtung von Inline-Elementen ist padding-. left ,padding-right,margin-left,margin-right erzeugen alle Randeffekte, aber der vertikale padding-top ,padding-bottom,margin-top,margin-bottom erzeugt keinen Randeffekt. (Wirksam in horizontaler Richtung, ungültig in vertikaler Richtung).

2. Klassifizierung nach ersetzbaren und nicht ersetzbaren Elementen

Natürlich kann zusätzlich zu Blockebenen- und Inline-Elementen auch danach klassifiziert werden, ob dies der Fall ist ein austauschbares Element.

a. Element ersetzen (dieses Element kann je nach Änderung eines bestimmten Attributs unterschiedliche Anzeigeeffekte erzeugen)

Element ersetzen: Der Browser wird Die Tags und Attribute des Elements bestimmen den spezifischen Anzeigeinhalt des Elements.

Zum Beispiel: Der Browser liest die Bild-Informationen und zeigt sie basierend auf dem Wert des src-Attributs des zu bestimmen, ob das Eingabefeld oder das Optionsfeld angezeigt werden soll des -Tags Warten.

(X), , , <select>, object> HTML ist ein Ersatzelement. Diese Elemente haben oft keinen eigentlichen Inhalt, also ein leeres Element </select>

Nicht ersetzbare Elemente

Nicht ersetzbare Elemente: ( X) HTML Die meisten Elemente sind nicht ersetzbare Elemente, d. h. ihr Inhalt wird dem Benutzer direkt präsentiert.

ps: Im Allgemeinen ist es sinnlos, die Breite und Höhe von Inline-Elementen festzulegen. Warum können also einige Inline-Elemente wie die Eingabe? oder img eingestellt werden? Breite, Höhe?

Da Eingabe, Bild usw. alle Ersatzelemente sind, haben Ersatzelemente im Allgemeinen intrinsische Abmessungen, sodass Breite und Höhe eingestellt werden können, was etwas ganz Besonderes ist. Wenn wir ihre Breite und Höhe nicht festlegen, gibt der Browser die Standardbreite und -höhe an. Beispiel: Das Eingabefeldformat für den Eingabetext gibt die Standardbreite und -höhe an. Aber wir können seine Breite und Höhe ändern.

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die Klassifizierung von HTML-Elementen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!