Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > Front-End-Fragen und Antworten > Was sind die drei Kategorien von HTML5-Tags?

Was sind die drei Kategorien von HTML5-Tags?

青灯夜游
Freigeben： 2022-05-18 16:36:45
Original
3775 Leute haben es durchsucht

Drei Arten von HTML5-Tags: 1. Elemente auf Blockebene, deren Anzeigewert „Block“ ist, zeichnen sich dadurch aus, dass Breite, Höhe, Ränder und automatischer Zeilenumbruch festgelegt werden können; 2. Inline-Elemente, deren Anzeigewert ist „inline“, Es wird nicht automatisch umbrochen und die Breite und Höhe können nicht festgelegt werden. 3. Inline-Blockelemente werden nicht automatisch umbrochen und die Breite und Höhe können festgelegt werden.

Was sind die drei Kategorien von HTML5-Tags?

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Klassifizierung von HTML5-Tags

Tags werden auch Elemente genannt

  • Je nach Tag-Eigenschaften können sie unterteilt werden in: Block-Tags, Inline-Tags (Inline-Tags), Inline-Block-Tags

  • Entsprechend Tag-Schließregeln, können unterteilt werden in: Einzeletikett (leeres Etikett, selbstschließendes Etikett), Doppeletikett

Häufig verwendete Blockelemente:

... i> Häufig verwendete Inline-Blockelemente: Blockfunktionen von Ebenenelementen:

display:<p><code class="marker">block;

1. Jedes Element auf Blockebene ist Aktualisiert vom Neuen Beginnt eine Zeile, und Elemente danach beginnen ebenfalls eine neue Zeile. display:<strong><code class="marker">block;

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。

2、元素的高度、宽度、行高以及上下左右的margin、padding值都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

行内元素特点：display:inline;

1、和其他元素都在一行上；

2、元素的高度、宽度及顶部和底部边距不可设置（只支持左右方向的margin、padding）；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

行内块状元素的特点：display:inline-block;

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置。（支持上下左右的margin、padding值）

3、margin:0 auto无效

4、水平排列，但所有元素默认会有1个空格的间隙，因为元素之间在html中书写有回车换行，浏览器解析会将其解析成一个空格。

标记类型的转换

标签的类型是可以转换的：

  • 设置display:inline 转换为行内元素

  • 设置display:linline-block 转换为行内块元素

  • 设置display:block2. Die Höhe, Breite, Zeilenhöhe des Elements sowie die Rand- und Abstandswerte oben, unten, links und rechts können eingestellt werden.

    • 3. Wenn nicht festgelegt, beträgt die Breite eines Elements 100 % seines übergeordneten Containers (identisch mit der Breite des übergeordneten Elements), sofern keine Breite festgelegt ist.

Funktionen von Inline-Elementen: display:inline

🎜;🎜🎜🎜🎜1 und andere Elemente befinden sich in derselben Zeile 🎜🎜2 Höhe🎜, Breite🎜 sowie obere und untere Ränder🎜 können nicht eingestellt werden🎜🎜 ( unterstützt nur Rand und Auffüllung in der linken und rechten Richtung); 🎜🎜3. Die Breite eines Elements ist die Breite des darin enthaltenen Textes oder Bildes und kann nicht geändert werden. 🎜🎜🎜🎜Eigenschaften von Inline-Blockelementen: display:inline-block;🎜🎜🎜🎜1 und andere Elemente befinden sich in derselben Zeile; 🎜🎜2, 🎜Die Höhe, Breite, Zeilenhöhe sowie der obere und untere Rand des Elements können festgelegt werden. 🎜🎜 (Unterstützt Rand- und Füllwerte für oben, unten, links und rechts) 🎜🎜3. Rand: 0 automatisch ist ungültig 🎜🎜4 Horizontal anordnen, aber alle Elemente haben standardmäßig einen Abstand von 1 Leerzeichen Da es beim Schreiben in den HTML-Warenkorb-Zeilenvorschub eine Lücke zwischen den Elementen gibt, wird diese beim Browser-Parsing in ein Leerzeichen geparst. 🎜🎜🎜🎜 Tag-Typ-Konvertierung 🎜🎜🎜🎜Der Tag-Typ kann konvertiert werden: 🎜🎜🎜🎜Setzen Sie display:inline, um in Inline-Elemente zu konvertieren. 🎜🎜🎜🎜Setzen Sie display:linline - block In Inline-Blockelement konvertieren🎜🎜🎜🎜 display:block so einstellen, dass es in ein Element auf Blockebene konvertiert wird🎜🎜🎜🎜 (Freigabe von Lernvideos: 🎜HTML-Video-Tutorial🎜, 🎜Webseite -Ende🎜 )🎜

Das obige ist der detaillierte Inhalt vonWas sind die drei Kategorien von HTML5-Tags?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten：
html html5
Quelle：php.cn
Vorheriger Artikel：Ist „figur“ ein neues Tag in HTML5? Nächster Artikel：So konvertieren Sie Dezimalzahlen in Binärzahlen in JQuery
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
Wie kann ich dafür sorgen, dass mein Bild auf der Hauptanzeige der Seite erscheint? Ich möchte einige Fotos über NASAAPI erhalten. Diese Fotos werden dann im Miniaturbild und...
Aus 2024-04-06 15:33:12
0
1
433
Können PDF-Dateien mit HTML5 und Javascript ausgeführt werden? Ich habe die dumme Idee, ein Programm zu erstellen, das auf keinem Computer blockiert wird...
Aus 2024-04-05 12:57:00
0
1
456
Was ist der Unterschied zwischen enctype und formenctype in HTML5? Ich frage mich nur, was der Unterschied zwischen den Attributen enctype und formenctype in...
Aus 2024-04-02 11:47:56
0
1
275
Die Seite mobilfreundlich gestalten? Ich habe viele Webseiten und einige Websites. Die Sache ist, ich bin ein Anfänger. Ich ver...
Aus 2024-04-01 20:42:38
0
1
259
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage

Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！

Über uns Haftungsausschluss Sitemap

© php.cn All rights reserved