Heim >Web-Frontend >HTML-Tutorial >Verwendung des HTML-
Verwendung des HTML--Tags
- 巴扎黑Original
- 2017-06-07 11:41:336120Durchsuche
HTML5-Header-Element-Tag Das neue Tag-Element von HTML5 ist 1aa9e5d373740b65a0cc8f0a02150c53ab946e7546ab66a280dd9c9f9310ecd5 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 „1aa9e5d373740b65a0cc8f0a02150c53“ 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 33579743b63cb5427ad298bf9880d6f1 oder 02032c6c0aef89498668cc9cf3bf1bc616b28748ea4df4d9c2150843fecfba68 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:
1aa9e5d373740b65a0cc8f0a02150c53Contentab946e7546ab66a280dd9c9f9310ecd5
1. Geben Sie keine ID oder Klasse an
1aa9e5d373740b65a0cc8f0a02150c53 Bereichab946e7546ab66a280dd9c9f9310ecd5
7938e82ad17932f39993f10ace06c93aHeader-Inhaltsbereichab946e7546ab66a280dd9c9f9310ecd5 >
06d2577d27e67ddae31580ee51d633e4Header-Inhaltsbereichab946e7546ab66a280dd9c9f9310ecd5 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 – TOPDa 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 – TOPBeobachten und beherrschen Sie die Anwendung des Headers, indem Sie das DIV+CSS-Layout und das HTML5+CSS-Layout vergleichen. 1. DIVCSS5-Instanz-HTML5+CSS-Komplettcode2. 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>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-