html5の新しいヘッダータグとは何ですか？-フロントエンドQ&A-php.cn

html5の新しいヘッダータグとは何ですか？

青灯夜游

リリース： 2021-12-16 17:51:32

オリジナル

3030 人が閲覧しました

HTML5 の新しいヘッダータグは「header」です。 header タグは、ドキュメントのヘッダー (紹介情報) を定義できます。これは、ガイド機能とナビゲーション機能を備えた構造要素です。多くの場合、序文やナビゲーションコンテンツを表すために使用されます。いくつかのタイトル要素を含めることができ、また、いくつかのタイトル要素を配置することもできますロゴ、検索ボックスなどの要素。

html5の新しいヘッダータグとは何ですか？

このチュートリアルの動作環境: Windows 7 システム、HTML5 バージョン、Dell G3 コンピューター。

HTML5 の新しいヘッダータグは「header」です。

headerタグでは文書のヘッダー（紹介情報）を定義できます。

要素は、序文またはナビゲーションコンテンツを表すために使用されます。いくつかのタイトル要素を含めることができ、ロゴ、検索ボックス、その他の

要素などの要素を配置することもできます。

ヘッダー要素は、ガイド機能とナビゲーション機能を備えた構造要素です。通常、ページ全体のタイトルまたはページ内のコンテンツブロックを配置するために使用されますが、他のコンテンツを含めることもできます。ヘッダー、ロゴ画像、検索フォームなどに含めます。

注: ページ内に表示されるヘッダーの数に制限はありません。つまり、同じページ上の異なるコンテンツブロックにヘッダー要素を追加できます。

使用説明:

要素は段落コンテンツを形成できる要素ではないため、段落コンテンツに反映する必要はありません。コンテンツディレクトリ。

ヘッダー要素の使用法:

画像に基づいてヘッダー要素の使用法を見てみましょう:

html5の新しいヘッダータグとは何ですか？

黒いワイヤーフレームで囲まれているのが Web ページです。Web ページには Web ページのタイトルがあります。Web ページのタイトルの下には、記事のタイトルとテキストコンテンツ領域があります。この図では、Web ページのタイトルと記事のタイトルを付けることができますすべてヘッダー要素を使用します。

一緒にデモしましょう:

<body>
<header>
<h1>网页标题</h1>
</header>
<article>
<header>
<h1>文章标题</h1>
</header>
<p>文章正文部分</p>
</article>
</body>

ログイン後にコピー

ヘッダー要素の効果のデモ図:

html5の新しいヘッダータグとは何ですか？

HTML5 では、ヘッダー要素には少なくとも見出しを含めることができます。要素 (h1-h6) には、次のレッスンで学習する hgroup 要素も含めることができ、他の要素も含めることができます。新しい W3C HTML5 標準では、NAV 要素も含めることができます。

html5の新しいヘッダータグとは何ですか？

上の図のヘッダーケースを実装してみましょう:

<style>
*{
Margin:0;
Padding:0;
}
Body{
Font-family:微软雅黑;
Text-algin:center;
}
A{
Color:#f60;
Text-decoration:none;
}
Hgroup{
Margin-bottom:10px;
}
Nav{
Height:48px;
Backgroud:#ff6600;
}
Nav li{
Float:left;
Backgroud:#000000;
Border-radius:5px;
Padding:5px 10px;
Margin:10px;
List-style:none;
}
</style>

<body>
<header>
<hgroup>
<h1>HTML5视频教程</h1>
<a href=”/”>[手机版]</a>
<a href=”/”>[HTML5论坛]</a>
</hgroup>
<nav>
<ul>
<li><a href=”/”>首页</a></li>
<li><a href=”/”>手机版</a></li>
<li><a href=”/”>论坛</a></li>
</ul>
</nav>
</header>
</body>

ログイン後にコピー

最終効果のデモ画像:

html5の新しいヘッダータグとは何ですか？