HTML Div Tag | erklärt

Die DIV bezieht sich auf die Abteilung oder den Abschnitt in einem HTML -Dokument. Es ist ein leerer Behälter, der verschiedene HTML -Elemente enthalten kann. Der Zweck des DIV ist es, den Elementen, die im jeweiligen Div -Tag verwendet werden, spezifische CSS -Stile hinzuzufügen. Das Div -Tag gehört zur Kategorie der HTML -Block -Elemente und startet somit eine neue Zeile, wenn sie initiiert wird.

Ein Div kann mehrere andere Abteilungen enthalten und jedes Div enthält verschiedene Styling -Eigenschaften. Der Hauptzweck einer DIV ist es, eine Gruppe ähnlicher Arten von Elementen zu erstellen, damit sie leicht gestylt werden können. Aufgrund seiner erweiterten Funktionalität wird es beim Entwickeln einer Webseite mit HTML als Schlüssel -Tag bezeichnet. In diesem Artikel haben wir die Arbeit des Div -Tags demonstriert, und einige Beispiele werden veranschaulicht, um die Verwendung des Div -Tags zu zeigen.

Wie HTML Div -Tag funktioniert

Das DIV -Tag umfasst Start- und Schließen von Tags und die folgende Syntax wird verwendet, um in HTML ein DIV zu erstellen.

Alles, was zwischen diesen Tags geschrieben wurde. Für ein grundlegendes Verständnis wird ein DIV mit dem folgenden Code erstellt.

Auf der Webseite wird ein DIV erstellt

Dies ist Div

Der Code wird wie folgt beschrieben:

- Der Titel der Seite lautet "Div -Tag"

- Der Hintergrund des Körpers ist auf „helles Meergrün“ eingestellt

- Es wird ein DIV erstellt und seine Hintergrundfarbe ist auf "Gelb" eingestellt

- Ein Absatz wird im DIV -Tag erstellt

Das Bild des Codes ist unten bereitgestellt:

Die Ausgabe der Webseite ist unten angezeigt:

Die folgenden Beobachtungen können aus der obigen Ausgabe gemacht werden:

- Das Div -Tag erstellt eine neue Zeile

- nimmt die gesamte Breite (wenn die Grenze nicht festgelegt ist) der Seite ein

So verwenden Sie HTML DIV -Tag

Die grundlegende Arbeit des Div -Tags wird im obigen Abschnitt erläutert. In diesem Abschnitt wird jedoch die Verwendung des HTML -DIV -Tags in verschiedenen Szenarien erläutert. Wie bereits erwähnt, sind mehrere Elemente in einem DIV enthalten, um all diese Elemente auf ähnliche Weise zu stylen. Da das Styling mit CSS möglich ist, wird empfohlen, eine Inline- oder externe CSS -Klasse zu verwenden.

Beispiel 1: Verwenden eines HTML -DIV -Tags mit mehreren CSS -Klassen

Ein Div -Tag kann mit mehreren CSS -Klassen verwendet werden. Um diese Funktionalität zu üben, wird der folgende HTML -Code verwendet:

Das DIV unter Verwendung von zwei CSS -Klassen

Willkommen bei LinuxHint

Ein Tal der Technik

Der Code wird unten beschrieben:

- Zwei CSS -Klassen werden mit dem Namen "Color" und "Misc" erstellt.

- Die Farbklasse definiert "Hintergrundfarbe" und "Schriftfarbe", während die Misc -Klasse die "Breite", "Polsterung" und "Schriftstil" enthält

- Ein Div wird mit einem Klassenattribut erstellt und verwendet den Namen beider Klassen darin

- Drei HTML -Elemente

,

und werden im Div verwendet

Notiz: Bei Verwendung mehrerer Klassennamen in einem Klassenattribut von DIV -Tag müssen Sie einen Speicherplatz zwischen den Klassennamen hinzufügen, um beide Klassen zu unterscheiden.

Das Bild des Codes ist unten bereitgestellt:

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

Beispiel 2: Verwenden mehrerer Div -Tags

Die Verwendung mehrerer DIV ist der verwirrende Teil des HTML -DIV -Tags. Der folgende HTML -Code bezieht sich auf die Verwendung mehrerer Divs mit verschiedenen Divs

Erste Div

Willkommen bei LinuxHint

Zweite Div

führender Inhaltsanbieter

Der Code wird beschrieben als:

- Erstellt zwei CSS -Klassen mit dem Namen "First" und "Second"

- Die "erste" Klasse definiert "Hintergrundfarbe", "Farbe der Schriftart", Breite, "float"

- Die "zweite" Klasse hat Eigenschaften wie "Hintergrundfarbe", "Breite", "Float"

- Ein Div wird mit einem Klassenattribut und "zuerst" als Wert des Attributs initialisiert

- Ein weiterer DIV wird mit „zweiter“ als Wert des Klassenattributs erstellt

Das Bild des Codes ist unten dargestellt:

Die Web-Page-Ausgabe ist unten angezeigt:

Abschluss

Das DIV -Tag in HTML bezieht sich auf das Erstellen eines Containers, mit dem Sie eine Gruppe von HTML -Elementen erstellen können, die auf die gleiche Weise gestaltet werden können. Dieser Artikel hat den Arbeitsmechanismus des Div -Tags gezeigt. Zusätzlich werden einige Beispiele angegeben, die zeigen, wie ein HTML -DIV -Tag in verschiedenen Szenarien verwendet werden kann.