Das Header-Tag in HTML5
- 24-07-2022
- Trung Minh
- 0 Comments
In diesem Artikel zeige ich Ihnen, wie Sie das Header-Tag in HTML5 verwenden. Dies ist das Tag, mit dem der Header-Header für eine Webseite oder Artikel deklariert wird.
Wenn Sie eine mit HTML5 erstellte Website durchsehen, werden Sie sich sehr verwirrt fühlen, da das Header-Tag an vielen verschiedenen Stellen platziert ist. Aber wenn Sie verstehen, was es bedeutet, wird es sich sehr einfach anfühlen.
1. Was ist das Header-Tag in HTML5?
In HTML5 wird das Header-Tag verwendet, um die Kopfzeile ( header ) für Artikel zu deklarieren, sogar den oberen Rand der Webseite. Verwechseln Sie das header
-Tag nicht mit dem Head-Tag.
Die Header-Tag-Struktur sieht wie folgt aus :
<header>...</header>
2. Ist es möglich, mehrere Header-Tags in HTML5 zu verwenden?
Die Antwort ist absolut ja. Auf der Seite, auf der die Artikelliste angezeigt wird, verwenden Sie beispielsweise das Artikel -Tag, um jeden Artikel zu deklarieren, und innerhalb jedes Artikels wird ein zusätzliches Header-Tag deklariert, um den Titel des Artikels abzudecken.
<article> <header> <h2>Tiêu đề 1</h2> </header> <p>Mô tả bài viết 1</p> </article> <article> <header> <h2>Tiêu đề 2</h2> </header> <p>Mô tả bài viết 2</p> </article> <article> <header> <h2>Tiêu đề 3</h2> </header> <p>Mô tả bài viết 4</p> </article>
Sie können die Kopfzeile auch verwenden, um den oberen Teil ( der das Logo und andere grundlegende Informationen enthält ) der Webseite anzugeben.
<body> <header> <h1>HTML5 Cho Người Mới Bắt Đầu Tại web888.vn</h1> </header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Serie</a></li> <li><a href="#">Tutorial</a></li> <li><a href="#">Ebook</a></li> </ul> </nav> ... </body>
3. Schreiben Sie CSS für das Header-Tag
Wenn Sie CSS zum Gestalten des Header-Tags verwenden möchten, verwenden Sie eine der beiden folgenden Möglichkeiten.
Methode 1 : Direktes CSS.
<header style="background:red"> ... </header>
Methode 2 : Wähler verwenden.
<style> header{ background:red } </style> <header> ... </header>
Hinweis : Wenn Sie diesen Abschnitt nicht mit dem Header-Tag deklarieren möchten, können Sie stattdessen das div-Tag verwenden.