Detaillierte Einführung in die Klassifizierung von HTML-Elementen
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), ,
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!

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen



Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.

Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.

Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.

Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.

Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben.

Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele

Anleitung zum Verschieben von Text in HTML. Hier besprechen wir eine Einführung, wie Marquee-Tags funktionieren, mit Syntax und Beispielen für die Implementierung.

Anleitung zum HTML-OnClick-Button. Hier diskutieren wir deren Einführung, Funktionsweise, Beispiele und Onclick-Events in verschiedenen Veranstaltungen.
