ホームページ > 記事 > ウェブフロントエンド > html5の新しいヘッダータグとは何ですか？
html5の新しいヘッダータグとは何ですか？
- 青灯夜游オリジナル
- 2021-12-16 17:51:322987ブラウズ
HTML5 の新しいヘッダー タグは「header」です。 header タグは、ドキュメントのヘッダー (紹介情報) を定義できます。これは、ガイド機能とナビゲーション機能を備えた構造要素です。多くの場合、序文やナビゲーション コンテンツを表すために使用されます。いくつかのタイトル要素を含めることができ、また、いくつかのタイトル要素を配置することもできますロゴ、検索ボックスなどの要素。
このチュートリアルの動作環境: Windows 7 システム、HTML5 バージョン、Dell G3 コンピューター。
HTML5 の新しいヘッダー タグは「header」です。
headerタグでは文書のヘッダー（紹介情報）を定義できます。
ヘッダー要素は、ガイド機能とナビゲーション機能を備えた構造要素です。通常、ページ全体のタイトルまたはページ内のコンテンツ ブロックを配置するために使用されますが、他のコンテンツを含めることもできます。ヘッダー、ロゴ画像、検索フォームなどに含めます。
注: ページ内に表示されるヘッダーの数に制限はありません。つまり、同じページ上の異なるコンテンツ ブロックにヘッダー要素を追加できます。
使用説明:
要素は段落コンテンツを形成できる要素ではないため、段落コンテンツに反映する必要はありません。コンテンツディレクトリ。
ヘッダー要素の使用法:
画像に基づいてヘッダー要素の使用法を見てみましょう:
黒いワイヤーフレームで囲まれているのが Web ページです。Web ページには Web ページのタイトルがあります。Web ページのタイトルの下には、記事のタイトルとテキスト コンテンツ領域があります。この図では、Web ページのタイトルと記事のタイトルを付けることができますすべてヘッダー要素を使用します。
一緒にデモしましょう:
<body> <header> <h1>网页标题</h1> </header> <article> <header> <h1>文章标题</h1> </header> <p>文章正文部分</p> </article> </body>
ヘッダー要素の効果のデモ図:
HTML5 では、ヘッダー要素には少なくとも見出しを含めることができます。要素 (h1-h6) には、次のレッスンで学習する hgroup 要素も含めることができ、他の要素も含めることができます。新しい W3C HTML5 標準では、NAV 要素も含めることができます。
上の図のヘッダー ケースを実装してみましょう:
<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>最終効果のデモ画像:
推奨チュートリアル: 「html ビデオ チュートリアル 」
以上がhtml5の新しいヘッダータグとは何ですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。