Heim  >  Artikel  >  Web-Frontend  >  Was sind die Kategorien von HTML5-Tags?

Was sind die Kategorien von HTML5-Tags?

青灯夜游
青灯夜游Original
2021-12-15 17:53:585019Durchsuche

HTML5-Tags sind in 3 Kategorien unterteilt: 1. Elemente auf Blockebene, die sich dadurch auszeichnen, dass Breite und Höhe eingestellt werden können, automatischer Zeilenumbruch sowie oberer, unterer, linker und rechter Rand und Abstand für sie gelten 2. Inline-Elemente, die sich dadurch auszeichnen, dass die Breite und Höhe nicht festgelegt werden können, werden nicht automatisch umbrochen. 3. Inline-Blockelemente, die sich dadurch auszeichnen, dass sie die Breite und Höhe festlegen können und nicht automatisch umgebrochen werden.

Was sind die Kategorien von HTML5-Tags?

Die Betriebsumgebung dieses Tutorials: Windows 7-System, HTML5-Version, Dell G3-Computer.

Marken in HTML5 sind in Elemente auf Blockebene, Inline-Elemente und Inline-Blockelemente unterteilt.

Inline-Elemente:

  • Breite und Höhe können nicht festgelegt werden.

  • Der Rand nach oben und unten ist ungültig, nur links und rechts sind wirksam; die Polsterung ist wirksam und vergrößert den Raum.

  • box-sizing:border-box; ist ungültig, da dieses Attribut spezifisch für das Boxmodell ist. box-sizing:border-box;无效,因为该属性针对盒模型。

  • 不会自动换行

块级元素:

  • 能够设置宽高

  • margin和padding的上下左右均对其有效

  • 可以自动换行

  • 多个块状元素标签写在一起,默认排列方式为从上至下

  • 可以使用margin:0 auto居中对齐

行内块元素:

  • 不会自动换行

  • 能够设置宽高

  • 默认排列方式为从左到右

  • 可以使用text-align:center使内容相对于父盒子水平居中对齐,例如img标签,可以使用text-align:center相对父盒子居中对齐

  • margin:0 auto无效

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

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

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

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

  • display:block

wird nicht automatisch umbrochen

Elemente auf Blockebene:

kann die Breite und Höhe festlegen

Der obere, untere, linke und rechte Rand und die Polsterung sind dafür gültig

kann automatisch umbrochen werden

Mehrere Blockelement-Tags werden zusammengeschrieben, und die Standardanordnung ist von oben nach unten

Sie können margin:0 auto verwenden, um die Mitte auszurichten

Inline-Blockelemente:

Kein automatischer Zeilenumbruch

Breite und Höhe können eingestellt werden

Die Standardanordnung ist von links nach rechts

Sie können text-align:center, um den Inhalt relativ zum übergeordneten Feld auszurichten. Für eine horizontale zentrierte Ausrichtung, wie z. B. img-Tags, können Sie text-align:center verwenden, um den Inhalt relativ zum übergeordneten Feld auszurichten übergeordnete Box

margin:0 auto ist ungültig

horizontal anordnen, Allerdings haben alle Elemente standardmäßig eine Lücke von 1 Leerzeichen, da dazwischen ein Wagenrücklauf und ein Zeilenvorschub vorhanden sind Elemente in HTML, und der Browser analysiert sie in einem Leerzeichen.

Aber der Etikettentyp kann konvertiert werden

display:inline: In Inline-Element konvertieren

display:linline-block Konvertierung Konvertieren Sie Inline-Blockelemente

display:block in Elemente auf Blockebene

Master-Elementkategorien. Klassifizieren Sie nun die gelernten Tags wie folgt:

1. Elemente auf Blockebene

Title

Ordered List
  1. Ungeordnete Liste

    Definitionsliste

    Absatz-Tag

    < ; / p

    Tabelle > Textinhalt

    Kopfzeile🎜🎜Fußzeile🎜🎜Navigationslinkbereich
Stellungnahme:
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