HTML-<div> Tag

Definition und Verwendung

<div> Etiketten definieren die Aufteilung oder Teile (Abschnitte oder Absätze, Division/Section) in HTML-Dokumenten.

<div> Etiketten können Dokumente in unabhängige und verschiedene Abschnitte aufteilen. Sie können als strenges Organisationswerkzeug dienen und sind mit keiner Formatierung verbunden.

Jeglicher Art von Inhalt kann darin platziert werden. <div> innerhalb!<div> Tag als Behälter für HTML-Elemente verwendet wird, dann können Stile mit CSS gesetzt oder mit JavaScript bearbeitet werden.

wenn der id oder class zu kennzeichnen <div>verwenden, dann wird die Wirkung des Tags effektiver. Durch die Verwendung class oder id Attribute, können sie leicht <div> Stil auf dem Tag.

Hinweis:Standardmäßig setzen Browser immer <div> ein Zeilenumbruch vor und nach dem Element setzen.

Verwendung

<div> ist ein Block-Element. Dies bedeutet, dass sein Inhalt automatisch eine neue Zeile beginnt. Tatsächlich ist der Umbruch <div> verfügt über eine innate einzigartige Formatierungsleistung. Dies kann durch <div> der class oder id zusätzliche Stile anzuwenden.

Es ist nicht notwendig, jedem <div> mit einer Klasse oder einem id versehen, obwohl dies auch gewisse Vorteile hat.

Man kann denselben <div> Elementanwendung class oder id Attribute, aber es ist häufiger der Fall, dass nur eines davon angewendet wird. Der Hauptunterschied zwischen beiden ist, dass class für Elementgruppen (ähnliche Elemente oder auch als某一类元素 verstanden) verwendet wird, während id für die Identifizierung einzelner einzigartiger Elemente dient.

Weitere Informationen:

HTML-Tutorial:HTML Block und Inline-Elemente

HTML-Tutorial:HTML Layout

HTML DOM Referenzhandbuch:Div-Objekt

Beispiel

Teile des Dokuments, die mit CSS formatiert werden, sind <div>-Teile:

<html>
<head>
<style>
.myDiv {
  border: 5px outset red;
  background-color: lightblue;
  text-align: center;
}
</style>
</head>
<body>
<div class="myDiv">
  <h2>Das ist der Titel im div-Element</h2>
  <p>Das ist ein Text in einem div-Element.</p>
</div>
</body>
</html>

Versuchen Sie es selbst

Fallstudie

<body>
 <h1>Neue Website</h1>
  <p>Einige Texte. Einige Texte. Einige Texte...</p>
  ...
 <div class="news">
  <h2>Nachrichtenüberschrift 1</h2>
  <p>Einige Texte. Einige Texte. Einige Texte...</p>
  ...
</div>
 <div class="news">
  <h2>Nachrichtenüberschrift 2</h2>
  <p>Einige Texte. Einige Texte. Einige Texte...</p>
  ...
 </div>
 ...
</body>

Beispiel Erklärung

Wie Sie sehen können, simuliert dieser Abschnitt von HTML die Struktur einer Nachrichtenwebsite. Jeder div kombiniert den Titel und die Zusammenfassung jeder Nachricht, was bedeutet, dass der div zusätzliche Struktur dem Dokument hinzufügt. Gleichzeitig, da diese divs zu derselben Art von Elementen gehören, können sie mit class="news" gekennzeichnet werden. Dies fügt den divs nicht nur angemessene Semantik hinzu, sondern erleichtert auch die spätere Formatierung der divs mit Stilen, was zweifellos ein Double-Win ist.

Hinweis:Für eine tiefere Kenntnis der Verwendung von class und id lesen Sie bitte das Kapitel "Strukturierte Markierung" von W3school, insbesondere den Abschnitt "div, id und andere Helfer".

Globale Attribute

<div> Der Tag unterstützt auch Globale Attribute in HTML.

Event Attribute

<div> Der Tag unterstützt auch Event Attribute in HTML.

Standard-CSS-Einstellungen

Die meisten Browser verwenden folgende Standardwerte zum Anzeigen <div> Element:

div {
  display: block;
}

Versuchen Sie es selbst

Browserkompatibilität

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Unterstützung Unterstützung Unterstützung Unterstützung Unterstützung