Heim >
Artikel > Web-Frontend > HTML5-Tutorial zum
HTML5-Tutorial zum -Tag-Layout
- 巴扎黑Original
- 2017-06-27 10:23:472226Durchsuche
HTML5-Header-Element-Tag HTML5Neu hinzugefügtes Tag-Element 1aa9e5d373740b65a0cc8f0a02150c53ab946e7546ab66a280dd9c9f9310ecd5, lernen Sie durch das HTML-Header-Grundtutorial und dienen Sie auch als Header-CSS-Layout-Fähigkeiten
Vor der HTML5-Version war es üblich, div-Tags zum Layouten von Webseiten zu verwenden. In HTML5 wurde ein neues Header-Tag-Element basierend auf dem DIV-Tag hinzugefügt. 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.
Es sollte jedem klar sein, dass „Header“ ein häufig verwendeter Name im HTML-Layout ist, daher wird 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.
Das Header-Tag-Element wird genauso verwendet wie div. Es gibt einen Anfang und einen Abschluss.
Syntax:
1aa9e5d373740b65a0cc8f0a02150c53Inhaltab946e7546ab66a280dd9c9f9310ecd5
1. Geben Sie keine ID oder Klasse direkt an
2
3. Klasse festlegen
f022da74e7fc906920ed6712b1313decHeader-Inhaltsbereich
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, 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.
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-Komplettcode
2. Effekt-ScreenshotsDiv- und Header-Layout-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>
Besonderer Tipp für DIVCSS5: Der Code wird in der DW-Software gescreent und die Effekte werden in PS im Google Chrome-Browser (unterstützt HTML5) gerendert. 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 vonHTML5-Tutorial zum