Heim >Web-Frontend >HTML-Tutorial >Welche Arten von HTML-Tag-Elementen gibt es? Einführung in gängige Tag-Elemente in HTML
Welche Arten von HTML-Tag-Elementen gibt es? Einführung in gängige Tag-Elemente in HTML
- 青灯夜游Original
- 2018-10-23 14:33:3710396Durchsuche
Der Inhalt dieses Artikels besteht darin, die Arten von HTML-Tag-Elementen vorzustellen, damit jeder verstehen kann, was die häufig verwendeten Tag-Elemente in HTML sind. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.
Lassen Sie uns zunächst einen Blick darauf werfen, in welche Arten von HTML-Tag-Elementen unterteilt werden kann?
Tag-Elemente in HTML werden im Allgemeinen in drei verschiedene Typen unterteilt: Blockelemente, Inline-Elemente und Inline-Blockelemente.
Lassen Sie uns die Eigenschaften und Verwendungen dieser drei Arten von Elementen im Detail vorstellen und alle wissen lassen, was die am häufigsten verwendeten Blockelemente und Inline-Elemente sind.
Blockelemente
Eigenschaften:
1. Jeder Block belegt eine Zeile. Die Elemente werden Beginnen Sie erneut mit einer neuen Zeile und ordnen Sie sie von oben nach unten an
2. Sie können die Breite, Höhe und die zugehörigen CSS-Eigenschaften des Boxmodells (Höhe, Breite, Zeilenhöhe sowie obere und untere Ränder von) direkt steuern (das Element kann festgelegt werden)
3. Wenn die Breite nicht festgelegt ist, ist die Breite des Elements auf Blockebene die Breite des Inhalts seines übergeordneten Elements
4. Wenn die Höhe nicht festgelegt ist Set, der Block Die Höhe eines Ebenenelements ist die Höhe seines eigenen Inhalts
Aufgrund seiner eigenen Eigenschaften verwenden wir normalerweise Blockelemente, um große Layouts (große Strukturen) zu erstellen.
Häufig verwendete Blockelemente:
1. Gewöhnliche Elemente
div (häufig verwendete Blockcontainer und die Haupt-Tags des CSS-Layouts), p ( Absatz), hr (horizontales Trennzeichen), Tabelle (Tabelle), Formular (interaktives Formular)
2. Titelelemente:
h1 (Überschrift), h2 (Untertitel), h3 (Ebene 3 Titel), h4 (Titel der Ebene 4), h5 (Titel der Ebene 5), h6 (Titel der Ebene 6)
3. Listenelement
menu (Menüliste), ol (Geordnete Liste) , ul (ungeordnete Liste), li (Listenelement), dl (Liste definieren), dt (Begriff definieren), dd (Beschreibung definieren)
Schauen wir uns diese Blöcke anhand eines einfachen Code-Formelements an
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>块状元素</title>
<style>
div{
background-color: palegoldenrod;
}
p{
background-color:paleturquoise ;
}
h4{
background-color:papayawhip;
}
ul{
background-color: peru;
}
</style>
</head>
<body>
<div>div标签元素，占据一行</div>
<p>p标签元素，占据一行</p>
<h4>标题元素，占据一行</h4>
<ul>
<li>ul1 li 标签 元素</li>
<li>ul1 li 标签 元素</li>
</ul>
<ul>
<li>ul2 li 标签 元素</li>
<li>ul2 li 标签 元素</li>
</ul>
</body>
</html>Rendering:
Inline-Element
Eigenschaften:
1. Anzeige in einer Zeile mit anderen Inline-Elementen von links nach rechts
2. Breite, Höhe und zugehörige CSS-Attribute des Box-Modells können nicht direkt gesteuert werden. Dies ist jedoch der Fall Es ist möglich, die linken und rechten Werte der inneren und äußeren Ränder direkt festzulegen
3. Die Breite und Höhe von Inline-Elementen wird durch die Größe ihres eigenen Inhalts (Text, Bilder usw.) bestimmt. )
4. Inline-Elemente Es kann nur Text oder andere Inline-Elemente aufnehmen (bitte beachten Sie hier, verschachteln Sie keine Elemente auf Blockebene in Inline-Elementen)
Aufgrund seiner eigenen Eigenschaften verwenden wir normalerweise Verwenden Sie Inline-Elemente für Text. Erstellen Sie kleine Symbole (kleine Strukturen).
Häufig verwendete Inline-Elemente:
1. Gewöhnliche Element-Tags
span (häufig verwendete Inline-Container, die In-Text-Blöcke definieren), ein ( Ankerpunkt, Link), img (einleitende Bilder), br (erzwungener Zeilenumbruch), sub (tiefgestellt), sup (hochgestellt)
2 Textänderungs-Tags
b (fett hinzufügen) , strong (fette Hervorhebung), i (kursiv), em (kursive Hervorhebung), big (Text in großer Schrift), small (Text in kleiner Schrift), s (Unterstreichung (nicht empfohlen)), Strike ( (Unterstreichung), del (gelöscht). Text im Dokument), u (Unterstreichung)
3. Beschriften Sie Elemente, die im Formular
textarea (mehrzeiliges Texteingabefeld) verwendet werden, Eingabe (Eingabefeld), auswählen (Drop- Down-Liste), Beschriftungseingabe (Elementdefinitionsbezeichnung (Markierung))
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>行内元素</title>
<style>
span{
background-color: palegoldenrod;
}
p{
background-color:paleturquoise ;
}
</style>
</head>
<body>
<span>span标签元素1</span>
<span>span标签元素2</span>
<img src="1.png" style="max-width:90%" / alt="Welche Arten von HTML-Tag-Elementen gibt es? Einführung in gängige Tag-Elemente in HTML" >
<img src="1.png" style="max-width:90%" / alt="Welche Arten von HTML-Tag-Elementen gibt es? Einführung in gängige Tag-Elemente in HTML" >
<p>换一行看看文字效果，我是一段测试代码，<b>被b标签加粗</b>。我是一段测试代码，<i>被i标签变成斜体</i>。</p>
</html>Rendering:
Inline-Blockelemente
Eigenschaften:
1. Sie befinden sich in derselben Zeile wie andere Elemente und werden nicht automatisch umgebrochen. Die Standardanordnung erfolgt von links nach rechts.
2 . Höhe, Breite, Zeilenhöhe, oberer und unterer Rand des Elements können eingestellt werden.
Inline-Blockelemente kombinieren die Eigenschaften von Inline-Elementen und Blockelementen, aber jedes hat seine eigenen Kompromisse. Daher werden Inline-Blockelemente aufgrund ihrer Eigenschaften im täglichen Gebrauch häufiger verwendet und sind in vielerlei Hinsicht nützlich.
Zusammenfassung: Die oben genannten drei Arten von HTML-Tag-Elementen werden in diesem Artikel vorgestellt, nämlich: Blockelemente, Inline-Elemente, Inline-Blockelemente und eine Einführung in häufig verwendete Blockelemente und Inline-Elemente. Jeder Etikettentyp hat seine eigenen Eigenschaften. Sie können selbst ausprobieren, wie unterschiedliche Etiketten verwendet werden, Ihr Verständnis vertiefen und je nach Bedarf unterschiedliche Etiketten verwenden. Ich hoffe, dass es für das Lernen aller hilfreich sein wird. Weitere verwandte Tutorials finden Sie unter: HTML-Video-Tutorial, HTML5-Video-Tutorial, Bootstrap-Video-Tutorial!
Das obige ist der detaillierte Inhalt vonWelche Arten von HTML-Tag-Elementen gibt es? Einführung in gängige Tag-Elemente in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!