HTML -Block und Inline -Elemente | erklärt

HTML -Block und Inline -Elemente | erklärt
Die Elemente in HTML können in zwei breitere Kategorien eingeteilt werden, Inline- und Blockelemente. Die Blockelemente brechen den Inhaltsfluss und starten eine neue Zeile, während die Inline -Elemente den Inhalt innerhalb der Linie halten und nur eine bestimmte Menge an Platz belegen. Die Blockelemente nehmen so viel Platz wie die Breite des übergeordneten Elements und deren Linienbrechen erstreckt sich auch vertikal die Seite.

Da HTML eine lange Liste von Elementen unterstützt, kann es für einen neuartigen HTML -Programmierer schwierig sein, sie zu unterscheiden. In Anbetracht der Wichtigkeit erfolgt dieser Leitfaden mit dem folgenden Lernergebnis:

  • Erklärt die Unterschiede zwischen Block- und Inline -Elementen
  • mehrere Block- und Inline -Elemente demonstrieren

Was sind die Unterschiede zwischen Block- und Inline -Elementen

Das Folgende sind die Differenzierungspunkte, die das Konzept der Block- und Inline -Elemente in HTML klarstellen würden.

  • Die Blockelemente fügen Platz hinzu, indem die Linie vor und nach der Verwendung gebrochen wird. Während die Inline -Elemente innerhalb der bestimmten Linie praktiziert werden und keinen zusätzlichen Platz verbrauchen.
  • Die Inline -Elemente unterstützen nur die linke und die rechte Polsterung, während die Blockelemente die Polsterung sowohl in vertikalen als auch in horizontalen Richtungen unterstützen
  • Inline -Elemente unterstützen kleine Dateien, wenn sie kleine Strukturen erstellen. Während die Blockelemente große Dateien unterstützen, wenn sie große Strukturen erstellen.
  • Wenn ein Inline -Element aufgerufen wird, funktioniert es nur für die Dateien, die dieses Inline -Element fordern. Andererseits enthalten die Blockelemente verschiedene Block- und Inline -Elemente. Wenn das übergeordnete Blockelement aufgerufen wird, würden alle damit verbundenen Block- und Inline -Elemente angewendet.

Wie funktionieren Block- und Inline -Elemente in HTML

Dieser Abschnitt liefert die Funktionalität mehrerer Block- und Inline -Elemente.

Blockelemente: Wir haben die Anwendbarkeit von wenigen Blockelementen in HTML bereitgestellt, die das praktische Verhalten der Blockelemente zeigen.

Verwendung

: Das Absatz -Tag in HTML repräsentiert die Textzeilen und fällt in die Blockelementkategorie von HTML.






Blockelemente in HTML


Dies ist ein Absatz



Die Ausgabe des HTML -Code auf einer Webseite ist unten bereitgestellt:+

Obwohl der Text des Absatzes auf einige Wörter beschränkt ist, hat das Absatz -Tag die breite Breite genommen (ab der Seite).

Verwendung: Üben wir das wichtigste und am häufigsten verwendete Tag mit dem folgenden HTML -Code.






Blockelemente in HTML


Dies ist ein Div



Die Webschnittstelle des obigen Tags ist unten gezeigt:

Wie das Absatzblockelement hat auch das Div -Tag die gesamte Breite der Seite besetzt.

Verwendung

innen : Wie bereits erwähnt und dargestellt, nehmen die Blockelemente die vollständige Breite der Seite (übergeordnete Tag) ein. Sie können die Breite des übergeordneten Tags einschränken, und die untergeordneten Tags würden dann den im übergeordneten Tag definierten Raum einnehmen. Zum Beispiel praktiziert der folgende HTML -Code die

markieren Schild.






Blockelemente in HTML



Dies ist ein Pargaraph




Der obige Code deklariert ein Tag, das 50% der Breite der Seite einnimmt. A

Das Tag wird im Tag verwendet und der Absatz enthält 50% des Raums seines übergeordneten Tags ().

Abgesehen von und

, Im Folgenden werden mehrere andere Blockelemente beschrieben:
: Wird verwendet, um die Kontaktinformationen darzustellen
: Artikelinhalt kann mit diesem Tag beschrieben werden


: Wird verwendet, um den Inhalt durch horizontale Linien zu trennen
: Die Bildunterschrift der Figur wird mit diesem Tag zugewiesen.

Zu

: Diese Tags definieren die Überschrift verschiedener Größen aus

Zu


: Wird verwendet, um einen neuen Abschnitt zu starten
: Die Fußzeile einer Seite oder eines Abschnitts kann zugewiesen werden
: Kann verwendet werden, um eine Tabelle in HTML -DOC einzulegen.
    : Wird verwendet, um eine bestellte Liste festzulegen