Vergleich von div und span in HTML_PowerNode Java Academy

1. <div></div> und <span></span>

1. <div></div>-Tag

Die Tags <div></div> können Unterteilungen oder Abschnitte in einem Dokument definieren und das Dokument dadurch in unabhängige und unterschiedliche Teile aufteilen. Das Tag <div></div> kann als striktes Organisationstool ohne damit verbundene Formatierung verwendet werden und verkörpert die Idee, HTML-Markup von Präsentationsstilen zu trennen. Bei der tatsächlichen Arbeit geben wir normalerweise ID- oder Klassenattribute für das Tag <div></div> an, um das Tag effektiver zu machen. <div></div> ist ein Element auf Blockebene, was bedeutet, dass sein Inhalt automatisch in einer neuen Zeile beginnt. Und tatsächlich sind Zeilenumbrüche das einzige einem <div> innewohnende Formatierungsverhalten.

Das folgende HTML simuliert die Struktur einer Nachrichten-Website. Jedes Paar von <div></div>-Tags gruppiert den Titel und die Zusammenfassung jeder Nachricht. Mit anderen Worten: <div></div> verleiht dem Dokument zusätzliche Struktur. Da diese <div></div> zum selben Elementtyp gehören, können Sie das Attribut class="news" verwenden, um diese <div></div>-Tags zu identifizieren. Dies fügt <div></div> nicht nur die entsprechende Semantik hinzu, sondern erleichtert auch die weitere Formatierung von <div></div> mithilfe von Stilen.

     <div Klasse="Neuigkeiten">
         <h2>
             Schlagzeile 1</h2>
         <p>
             etwas Text. etwas Text. etwas Text...</p>
         ...
     </div>
     <div Klasse="Neuigkeiten">
        <h2>
             Schlagzeile 2</h2>
         <p>
             etwas Text. etwas Text. etwas Text...</p>
        ...
     </div>

2. <span></span>-Tag

Das <span>-Tag wird verwendet, um Inline-Elemente in einem Dokument zu gruppieren.

  <span style="color: Red">Hinweis:</span>

2. Blockelemente und Inline-Elemente

Blockelemente und Inline-Elemente sind Konzepte in CSS. Elemente wie <div></div> und <h1></h1> werden oft als Blockelemente bezeichnet. Dies liegt daran, dass diese Elemente als ein Inhaltsblock, eine „Blockbox“, angezeigt werden. Im Gegensatz dazu werden Elemente wie <span></span> und <strong></strong> als „Inline-Elemente“ bezeichnet, da ihr Inhalt in einer einzelnen Zeile bzw. einer „Inline-Box“ angezeigt wird.

Die Konzepte von Blockelementen und Inline-Elementen sind nicht festgelegt, sondern relativ. Wir können den Typ der generierten Box mit der Anzeigeeigenschaft des Elements ändern. Das bedeutet, dass Sie ein Inline-Element (wie ein <a>-Element) wie ein Blockelement verhalten lassen können, indem Sie die Anzeigeeigenschaft auf Block setzen. Sie können das resultierende Element auch zu einem Inline-Element machen, indem Sie Anzeige auf Inline setzen. Sie können die Anzeigeeigenschaft sogar auf Keine setzen, sodass das Element überhaupt keine Box hat. In diesem Fall werden die Box und ihr gesamter Inhalt nicht mehr angezeigt und beanspruchen keinen Platz im Dokument.

     <div id="dv1" style="Anzeige: Block">
         Ich bin ein Element auf Blockebene.
     </div>
     <div id="dv2" style="anzeige: inline">
         Ich bin ein Inline-Element.
     </div>
     <div id="div3" style="Anzeige: keine">
         Ich bin unsichtbar</div>

3. Vergleich zwischen <div></div> und <span></span>

1. Ähnlichkeiten: Die Tags <div></div> und <span></span> werden beide zum Unterteilen von Abschnitten verwendet, haben aber keine eigentliche Semantik; beide werden hauptsächlich zum Anwenden von Stylesheets verwendet.

2. Unterschiede: Das Tag <div></div> ist ein Element auf Blockebene, und der Browser fügt davor und danach automatisch ein Tag für den Zeilenumbruch ein. Das Tag <span></span> ist ein Inline-Element, und davor und danach werden keine Tags für den Zeilenumbruch automatisch hinzugefügt.

Wenn Sie im Webseitenlayout zwei Inhalte in derselben Zeile anzeigen möchten, ist es am einfachsten, sie mit <span></span>-Tags zu umschließen. Beispielsweise hat eine Seite zwei nebeneinander liegende Elemente, eines ist <div></div> und das andere ist <span></span>. Um sie in derselben Zeile anzuzeigen, können Sie dieses <div></div> in <span></span> ändern. Dies kann natürlich auch erreicht werden, indem das Anzeigeattribut von Tags wie <div></div> auf Inline über CSS gesetzt wird.