Was ist ein div-Tag? Wie verwende ich das div-Tag in HTML?-HTML-Tutorial-php.cn

Was ist ein div-Tag? Wie verwende ich das div-Tag in HTML?

不言

Freigeben： 2018-11-26 13:36:26

Original

8162 Leute haben es durchsucht

Das div-Tag in HTML ist eine wichtige Grundlage für die Realisierung von Webseiten und ist für das Erlernen von HTML-Kenntnissen unerlässlich. In diesem Artikel erfahren Sie, wie Sie div-Tags in HTML verwenden.

Was ist ein div-Tag? Das Tag

div stellt eine Reihe notwendiger Strukturen dar. Der Zweck besteht darin, die zwischen div-Tags eingeschlossenen Zeichen in Blöcke aufzuteilen. Daher hat ein separates div-Tag keine Auswirkungen, wie z. B. eine Änderung der Farbe oder des Zeichenstils.

Wenn das div-Tag nicht in andere Elemente passt, verwenden Sie es noch nicht.

Wenn wir jedoch angeben müssen, welches Element ist, verwenden wir häufig div-Tags.

Indem Sie die ID und die Klasse zum div-Tag hinzufügen und CSS verwenden, um die ID und die Klasse zu verarbeiten, können Sie die Farbe im div-Tag ändern oder es in einen anderen Stil ändern.

Vergleich von div-Tags und Section-Tags

Ich denke, das Section-Tag ist besser geeignet, um eine einzelne Sammlung im Dokument anzuzeigen

Das Section-Tag dient der Kennzeichnung von Gruppen zur Dokumentation.

Ich denke, Abschnitte haben Begriffe für Abschnitte

Genau wie dieses Konzept einer Abschnittsklausel ist das Abschnitts-Tag ein Block und hat normalerweise keine Bedeutung, wenn es extrahiert wird.

In einem Zeitungsartikel glaube ich nicht, dass die Absicht des gesamten Artikels vermittelt werden kann, selbst wenn man nur die Kapitelelemente ausschneidet.

Im Vergleich dazu wird das Abschnitts-Tag anders als das div-Tag verwendet, aber als Satz zur Darstellung einer Gruppe verwendet.

Verwendung des div-Tags

Schreiben Sie das div-Tag wie folgt.

<div>内容</div>

Nach dem Login kopieren

Wie oben erwähnt, sind div-Tags sehr nützlich, indem sie ID und Klasse hinzufügen. So weisen Sie ID und Klasse zu.

<div id="id名">内容</div>
<div id="class名">内容</div>

Nach dem Login kopieren

Übrigens, was sind ID und Klasse?

Übrigens, was sind ID und Klasse? ID und Klasse werden als Attribute bezeichnet. ID ist so etwas wie „Ich habe eine D-Nummer“. Etwas mit demselben ID-Namen kann innerhalb der Seite nur einmal verwendet werden.

Stattdessen verwenden wir das id-Attribut für Dinge, die wir nur einmal verwenden.

Andererseits kann das Klassenattribut mehrmals auf derselben Seite verwendet werden. Wenn Sie angeben möchten, dass „dieses Element die gleiche Farbe wie dieses Element hat“, verwenden Sie das Klassenattribut.

Natürlich können Sie das Klassenattribut auch dann verwenden, wenn Sie es nur einmal verwenden.

Sehen wir uns ein praktisches Beispiel an

Sehen wir uns zunächst das Ergebnis an, wenn wir von div-Tags umgeben sind

Für ID und Klasse: Wir geben den Farbnamen für jedes Substantiv an.

Erstellen Sie div.html mit dem folgenden Quellcode und öffnen Sie es in Ihrem Browser.

div.html

<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <div id="red">苹果</div>
    <div class="skyblue">天空</div>
    <div class="yellow">香蕉</div>
    <div class="blue">大海</div>
    <div class="lightyellow">蒲公英</div>
  </body>
</html>

Nach dem Login kopieren

wird im Browser wie folgt angezeigt:

Was ist ein div-Tag? Wie verwende ich das div-Tag in HTML?

Oben wird nur Text angezeigt, jetzt lassen Sie us Färben Sie den Hintergrund mit CSS. Der Anzeigeeffekt von

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
 #red {
        background-color: #FF0000;
      }
      .skyblue {
        background-color: skyblue;
      }
      .yellow{
        background-color: yellow;
      }
      .blue{
        background-color: blue;
      }
      .beige{
        background-color: beige;
      }
 </style>
  </head>
  <body>
  <div id="red">苹果</div>
    <div class="skyblue">天空</div>
    <div class="yellow">香蕉</div>
    <div class="blue">大海</div>
    <div class="beige">蒲公英</div>
  </body>
</html>

Nach dem Login kopieren

im Browser ist wie folgt:

Was ist ein div-Tag? Wie verwende ich das div-Tag in HTML?

Sie können sehen, dass der Hintergrund farbig ist, und Sie können auch bestätigen, dass mehrere identisch sind Klassen wurden angegeben.

Das obige ist der detaillierte Inhalt vonWas ist ein div-Tag? Wie verwende ich das div-Tag in HTML?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!