So verwenden Sie das <header>-Tag von HTML-HTML-Tutorial-php.cn

So verwenden Sie das

-Tag von HTML

php中世界最好的语言

Freigeben： 2017-11-22 17:17:23

Original

5192 Leute haben es durchsucht

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>

Nach dem Login kopieren

ID oder Klasse nicht direkt angeben

<header>头部内容区</header>

Nach dem Login kopieren

ID festlegen

<header id=”p”>头部内容区</header>

Nach dem Login kopieren

Klasse festlegen

<header class=”p”>头部内容区</header>

Nach dem Login kopieren

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>

Nach dem Login kopieren

Weitere spannende Inhalte finden Sie auf der chinesischen PHP-Website Andere verwandte Artikel!

Verwandte Lektüre:

Unterstützt ie6 Hover?

Freigabe von Bild- und Textcode für die HTML-Navigationsleistenproduktion

So manipulieren Sie mit CSS den Z-Index von p

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das

-Tag von HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!