suchen

Heim >Web-Frontend >H5-Tutorial >Was bedeutet das HTML5-Header-Tag? Detaillierte Erläuterung der Verwendung des HTML5-Header-Tags (mit Beispielen)

Was bedeutet das HTML5-Header-Tag? Detaillierte Erläuterung der Verwendung des HTML5-Header-Tags (mit Beispielen)

寻∝梦
寻∝梦Original
2018-08-30 13:41:486482Durchsuche

Dieser Artikel führt Sie hauptsächlich in eine grundlegende Einführung in die Elemente des HTML5-Header-Tags und eine Analyse von Anwendungsbeispielen des Header-Tags ein. Werfen wir einen Blick auf diesen Artikel über HTML5-Header-Tags

1. Lassen Sie uns zunächst über die grundlegende Einführung von HTML5-Header-Tag-Elementen sprechen Element mit Leit- und Navigationsfunktionen. Es wird normalerweise verwendet, um den Titel der gesamten Seite oder eines Inhaltsblocks innerhalb der Seite zu platzieren, es kann jedoch auch andere Inhalte enthalten, z. B. die Platzierung von Logobildern, Suchformularen usw. im Header.

Hinweis: Es gibt keine Begrenzung für die Anzahl der Header-Erscheinungen auf einer Seite, was bedeutet, dass wir ein Header-Element zu verschiedenen Inhaltsblöcken auf derselben Seite hinzufügen können.

Vor der HTML5-Version war es üblich, div-Tags zum Layouten von Webseiten zu verwenden. In HTML5 wird ein neues Header-Tag-Element basierend auf dem DIV-Tag hinzugefügt. 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.

Es ist bekannt, 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.

Verwendung des HTML5-Header-Tags

Beispiel: Einführung in die Homepage: 

<header>  
 <h1>PHP中文网</h1>  
 <p>专注于编程（PHP中文网）</p>  
</header>  
<article>  
 <header>  
  <h1>PHP中文网的html5语义化标签之结构标签</h1>  
  <p>article、section、hgroup、aside、nav...</p>  
 </header>  
 <p>...这里面包含了很多东西...</p>  
</article>

Der Codeeffekt ist wie unten dargestellt :

Dies ist die grundlegendste Verwendung. In der obigen Struktur können wir sehen, dass wir mithilfe der Kopfzeile den Titel und den Inhalt eines Artikels definieren. Der hier verwendete Header-Tag ist nicht der Header der Seite, sondern der Header des Artikels. Was bedeutet das HTML5-Header-Tag? Detaillierte Erläuterung der Verwendung des HTML5-Header-Tags (mit Beispielen)

In HTML5 ist die Verwendung von Headern also flexibler und Sie können die Dokumentstruktur entsprechend Ihren Anforderungen definieren und organisieren.

Ähnlicherweise wird beim Strukturieren einer Seite das Header-Tag im Allgemeinen oben auf der Seite platziert, aber wenn Sie es links, rechts oder sogar unten platzieren möchten, spielt es keine Rolle definiert nur seinen Standort auf der Seite, nicht den Standort. Natürlich orientiert es sich eher an den Prinzipien der Suchmaschinenoptimierung. Wichtige Inhalte werden schließlich bei der Strukturierung der Seite vorangetrieben.

2. Lassen Sie uns nun über Kompatibilitätsprobleme sprechen:

Da das Header-Tag ein neues Tag-Element in HTML5 ist, wird es von älteren Browserversionen nicht unterstützt Muss nur von IE9+ und höheren Browsern, dem neuesten Google Chrome und anderen Browsern unterstützt werden. 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.

Jetzt aktualisieren wir den obigen Code: 

<body>
<header>
<hgroup>
<h1>HTML5教程php中文网</h1>
<a href=”/”>[手机版]</a>
<a href=”/”>[PHP中文网]</a>
</hgroup>
<nav>
<ul>
<li><a href=”/”>首页</a></li>
<li><a href=”/”>手机版</a></li>
<li><a href=”/”>论坛</a></li>
</ul>
</nav>
</header>
</body>

Der Effekt ist wie gezeigt:

Das Obige ist eine Einführung in die Verwendung von HTML5-Header-Tags, dieser Artikel hat so viel eingeführt. Wenn Sie mehr sehen möchten, willkommen auf der chinesischen PHP-Website. Wenn Sie Fragen haben, hinterlassen Sie bitte unten eine Nachricht. Was bedeutet das HTML5-Header-Tag? Detaillierte Erläuterung der Verwendung des HTML5-Header-Tags (mit Beispielen)

[Vom Herausgeber empfohlen]

Über den Unterschied zwischen dem Abschnitts-Tag und dem div-Tag in HTML5 (mit Beispielen)


Wozu dient der HTML-Artikel-Tag? Einführung in die Verwendung des HTML-Artikel-Tags

Das obige ist der detaillierte Inhalt vonWas bedeutet das HTML5-Header-Tag? Detaillierte Erläuterung der Verwendung des HTML5-Header-Tags (mit Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php 架构 html5 css chrome html class 搜索引擎
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Was bedeutet das HTML5-Canvas-Tag? Einführung in die Verwendung des Canvas-TagsNächster Artikel：Was bedeutet das HTML5-Canvas-Tag? Einführung in die Verwendung des Canvas-Tags

In Verbindung stehende Artikel

Mehr sehen