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

Inhaltsverzeichnis

PHP中文网

PHP中文网的html5语义化标签之结构标签

HTML5教程php中文网

Heim

Web-Frontend

H5-Tutorial

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

寻∝梦

Aug 30, 2018 pm 01:41 PM

header html

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

Nach dem Login kopieren

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 id="HTML-教程php中文网">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>

Nach dem Login kopieren

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!

Erklärung dieser Website

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

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

Assassin's Creed Shadows: Seashell Riddle -Lösung

3 Wochen vor By DDD

Was ist neu in Windows 11 KB5054979 und wie Sie Update -Probleme beheben

2 Wochen vor By DDD

Wo kann man die Kransteuerungsschlüsselkarten in Atomfall finden

3 Wochen vor By DDD

<🎜>: Dead Rails - wie man jede Herausforderung abschließt

4 Wochen vor By DDD

Atomfall Guide: Gegenstandsstandorte, Questführer und Tipps

1 Monate vor By DDD

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7677

CakePHP-Tutorial

1393

C#-Tutorial

1207

Wie lautet das Format des Kontonamens von Steam?

Win11 -Aktivierungsschlüssel dauerhaft

Related knowledge

Tabellenrahmen in HTML Sep 04, 2024 pm 04:49 PM

Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.

Verschachtelte Tabelle in HTML Sep 04, 2024 pm 04:49 PM

Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.

HTML-Rand links Sep 04, 2024 pm 04:48 PM

Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.

HTML-Tabellenlayout Sep 04, 2024 pm 04:54 PM

Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.

HTML-Eingabeplatzhalter Sep 04, 2024 pm 04:54 PM

Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben.

Text in HTML verschieben Sep 04, 2024 pm 04:45 PM

Anleitung zum Verschieben von Text in HTML. Hier besprechen wir eine Einführung, wie Marquee-Tags funktionieren, mit Syntax und Beispielen für die Implementierung.

HTML-geordnete Liste Sep 04, 2024 pm 04:43 PM

Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele

HTML-Onclick-Button Sep 04, 2024 pm 04:49 PM

Anleitung zum HTML-OnClick-Button. Hier diskutieren wir deren Einführung, Funktionsweise, Beispiele und Onclick-Events in verschiedenen Veranstaltungen.

See all articles