HTML-Blöcke

Alle HTML-Elemente können sein kategorisiert in zwei Kategorien (a) Block Level-Elemente (b) Inline-Elemente

Block-Elemente

Block-Elemente erscheinen auf dem Bildschirm erscheinen als ob sie einen Zeilenumbruch vor und nach ihnen. für Beispiels die <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr />, <blockquote>, and <address> Elemente sind alle Bloceben elemente. Sie alle beginnen auf ihre Faust neue Linie, und etwas dass folgt ihnen erscheint auf seiner eigen neue Linie.

Inline-Elemente

Inline-Elemente, auf der anderen Seite, können innerhalb von Sätzen erscheinen und tun nicht haben auf erscheinen eine neue Linie von ihren eigenen . Die <b>, <i>, <u>, <em>, <starke>, <sup>, <sub>, <big>, <klein>, <li>, <ins>, <del>, <code>, <cite>, <dfn>, <kbd>, und <var> Elemente sind alle Inline-Elemente.

Gruppierung HTML-Elemente

Es gibt zwei wichtige tags welche wir verwenden sehr häufiger zur Gruppe verschiedene andere HTML-Tags(i) <div> tag und (ii) <Spannweite> tag

Die<div> tag

Das ist das sehr wichtig, Block-Level-Tag, das eine große Rolle bei Gruppierung verschiedener anderer HTML-Tags und Anwendung CSS auf eine Gruppe von Elementen spielt. Auch jetzt <div> Tag kann verwendet werden, um die Homepage-Layout schaffen, wo wir define anders Teile (Links, Rechts, Oben, etc.) auf der Seite unter Verwendung <div> tag. Dieser Tag tut nicht bietet keine optische Veränderung auf dem Block, aber dies hat mehr Sinn, wenn es mit CSS verwendet wird.

Beispiels

Es folgt ein einfaches Beispiel von <div> tag. Wir werden Cascading Style Sheet (CSS) in einem eigenen Kapitel zu lernen, aber wir Verwendung haben es hier um Show die Nutzungs von <div> tag:

<!DOCTYPE html>
<html>
<head>
<title>HTML div Tag</title>
</head>
<body>
<!-- First group of tags -->
<div style="color:red">
   <h4>Das ist die erste Gruppe</h4>
   <p>Es folgt eine Liste von Gemüse</p>
   <ul>
   <li>Rote-Bete-</li>
   <li>Ginger</li>
   <li>Kartoffel</li>
   <li>Rettich</li>
   </ul>
</div>

<!-- Second group of tags -->
<div style="color:green">
   <h4>Das ist zweite Gruppe</h4>
   <p>Es folgt eine Liste von Obst</p>
   <ul>
   <li>Apfel</li>
   <li>Banana</li>
   <li>Mango</li>
   <li>Strawberry</li>
   </ul>
</div>
</body>
</html>

Dies wird folgendes Ergebnis produzieren:

Das ist die erste Gruppe

Es folgt eine Liste von Gemüse

Rote-Bete-
Ginger
Kartoffel
Rettich

Das ist zweite Gruppe

Es folgt eine Liste von Obst

Apfel
Banana
Mango
Strawberry

Die <Spannweite> tag

Die HTML <Spannweite> ist ein Inline-Element, und es kann zu einer Gruppe Inline Elemente in einem HTML-Dokument verwendet werden. Diese tag auch tut nicht liefern jeder sichtbare Veränderung auf dem Block hat aber mehr Sinn, wenn es mit CSS verwendet wird.

Der Unterschied zwischen der <Spannweite> tag und the <div> Tag ist, dass der <Spannweite> Tag wird mit Inline-Elemente, bei denen die verwendeten<div> Tag wird mit Block-Level-Elemente verwendet.

Beispiel

Es folgt ein einfaches Beispiel für <Spannweite> tag. Wir werden Cascading Style Sheet (CSS) in einem eigenen Kapitel zu lernen, aber wir Verwendung haben es hier um Show die Nutzungs von <span> tag:

<!DOCTYPE html>
<html>
<head>
<title>HTML span Tag</title>
</head>
<body>

<p>Dies ist <span style="color:red">rot</span> und Dies ist <span style="color:green">grün</span></p>
</body>
</html>

Dies wird folgendes Ergebnis produzieren:

Dies ist rot, und Dies ist grün