Verwendung des HTML-<header>-Tags-HTML-Tutorial-php.cn

Verwendung des HTML-

-Tags

巴扎黑

Freigeben： 2017-06-07 11:41:33

Original

6168 Leute haben es durchsucht

HTML5-Header-Element-Tag Das neue Tag-Element von HTML5 ist

Im HTML-Header-Basis-Tutorial können Sie lernen, wie Sie es als Header-CSS-Layouttechnik verwenden.

1. Grundlegende Einführung in das Header-Tag-Element – TOP

Vor der HTML5-Version war es üblich, div-Tags zum Layouten von Webseiten zu verwenden. In HTML5 wurde ein neues Header-Tag-Element hinzugefügt basierend auf dem DIV-Tag. Wird auch „

“ genannt. In der Vergangenheit haben wir Webseiten im Div-CSS-Layout häufig in Kopfzeile, Inhalt und Ende unterteilt. Bei großen Strukturen verwenden wir häufig Divs mit IDs für das Layout. Der Header wird häufig mit

oder gestaltet ist kein div.-Tag erforderlich, sondern ein neues Element-Tag hinzufügen.

Da „Header“ ein häufig verwendeter Name im HTML-Layout ist, wurde in 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.

2. Syntaxstruktur – TOP

Das Header-Tag-Element wird genauso verwendet wie div. Es gibt einen Anfang und einen Abschluss.

Syntax:

Content

1. Geben Sie keine ID oder Klasse an

Bereich

Header-Inhaltsbereich

4. Funktionen: Genau wie das DIV-Tag-Element kann es mehrfach an verschiedenen Stellen verwendet werden kann mit der ID oder der Klasse festgelegt werden.

3. Kompatibilität – TOP

Da das Header-Tag ein neues Tag-Element in HTML5 ist, wird es von älteren Browserversionen nicht unterstützt. Es erfordert IE9+ oder höher, das neueste Google Chrome und andere Browser unterstützen. Natürlich verwenden inländische Browser wie 360 Browser, Baidu Browser und Aoyou Browser alle den IE-Kernel, der mit dem System geliefert wird. Inländische Browser sind also tatsächlich dieselbe Version wie die IE-Version, die mit Ihrem System geliefert wird, also ist es Ihr IE-Browser IE9 oder höher ist selbstverständlich kompatibel mit den neuen Tag-Elementen von HTML5.

4. Vergleichsfall des alten und neuen DIV-Layouts – TOP

Beobachten und beherrschen Sie die Anwendung des Headers, indem Sie das DIV+CSS-Layout und das HTML5+CSS-Layout vergleichen.

1. DIVCSS5-Instanz-HTML5+CSS-Komplettcode

2. Effekt-Screenshots

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>html5 Header标签实例 DIVCSS5</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> 
<div id="header">我在传统div布局中</div> 
 
<header>我在传统div布局中,必须在支持HTML5浏览器才能看到效果， 
建议谷歌浏览器测试观察效果</header> 
 
<header class="color-000">我颜色为黑色,背景为#666</header> 
</body> 
</html>

Nach dem Login kopieren

Code-Screenshots und Effekte in der DW-Software Führen Sie PS-Renderings im Browsereffekt Google Chrome (unterstützt HTML5) durch. Gewöhnliche IE6-IE8 unterstützen kein HTML5 und können den HTML5-Layouteffekt nicht sehen. Sie benötigen IE9 und höher, um den Layouteffekt zu sehen.

Das obige ist der detaillierte Inhalt vonVerwendung des HTML-

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