In Versionen vor HTML5 haben Sie vielleicht die Angewohnheit, DIV-Tags zum Layouten von Webseiten zu verwenden, aber H5 fügt ein Header-Tag-Element hinzu, das auf dem DIV-Tag basiert, das wir oft als Head-Tag bezeichnen Unterteilte Webseiten in Layouts: Für die Kopfzeile, den Inhalt und das Ende gibt es jetzt systematische Tags, die uns bei der Planung helfen. Wie verwenden wir dieses Header-Tag? Heute werden wir uns
genauer ansehen. Da „Header“ ein häufig verwendeter Name im HTML-Layout ist, wurde HTML5 ein neues Header-Tag-Element hinzugefügt . Sie können verstehen, warum der Header in HTML5 als Beschriftungselement hinzugefügt wird.
Zusätzlich zur direkten Verwendung des Header-Tags können Sie auch Klasse oder ID für den Header festlegen.
Grammatische Struktur
Das Header-Tag-Element hat die gleiche Verwendung wie p. Es gibt einen Anfang und einen Abschluss.
Syntax:
<header>内容</header>
ID oder Klasse nicht direkt angeben
<header>头部内容区</header>
ID festlegen
<header id=”p”>头部内容区</header>
Klasse festlegen
<header class=”p”>头部内容区</header>
Funktionen: Genau wie das DIV-Tag-Element kann es mehrfach verwendet werden und verschiedene Stile können mithilfe von ID oder Klasse an verschiedenen Stellen festgelegt werden.
Kompatibilität
Da das Header-Tag ein neues Tag-Element in HTML5 ist, wird es von älteren Browserversionen nicht unterstützt. Zur Unterstützung sind Browser wie IE9+ oder höher und das neueste Google Chrome erforderlich . Natürlich verwenden inländische Browser wie 360 Browser, Baidu Browser und Aoyou Browser alle den IE-Kernel, der mit dem System geliefert wird, sodass inländische Browser tatsächlich dieselbe Version der IE-Version sind, die mit Ihrem System geliefert wird, also IE-BrowserIn IE9 oder höher ist er natürlich mit den neuen Tag-Elementen von HTML5 kompatibel.
Vergleichsfall zwischen neuem und altem DIV-Layout
Beobachten und beherrschen Sie die Anwendung von Headern, indem Sie das DIV+CSS-Layout und das HTML5+CSS-Layout vergleichen.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>html5 Header标签实例</title>
<style>
/* 传统布局CSS */
#header{ width:300px; height:40px; background:#CCC}
/* HTML5布局样式 */
header{ width:400px; height:70px; color:#F00; background:#F5F5F5}
.color-000{ color:#000; background:#666}
</style>
</head>
<body>
<p id="header">我在传统p布局中</p>
<header>我在传统p布局中,必须在支持HTML5浏览器才能看到效果，
建议谷歌浏览器测试观察效果</header>
<header class="color-000">我颜色为黑色,背景为#666</header>
</body>
</html>Verwandte Lektüre:
Das obige ist der detaillierte Inhalt vonSo verwenden Sie das
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
