HTMLにおけるヘッダー定義とは何を意味するのでしょうか？-htmlチュートリアル-php.cn

HTMLにおけるヘッダー定義とは何を意味するのでしょうか？

醉折花枝作酒筹

リリース： 2023-01-06 11:16:47

オリジナル

18830 人が閲覧しました

HTML では、header タグはドキュメントのヘッダーを定義します。構文形式は「
content
」です。ヘッダー要素は、ガイド機能とナビゲーション機能を備えた構造要素で、通常はページ全体のタイトルまたはページ内のコンテンツブロックを配置するために使用されます。

HTMLにおけるヘッダー定義とは何を意味するのでしょうか？

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

1. header タグ要素の基本的な概要

HTML5 バージョン以前は、Web ページのレイアウトに div タグを使用するのが一般的でした。HTML5 では、新しい header タグ要素が、 divタグ。「

」ヘッダータグとも呼ばれます。以前は、Web ページを div CSS レイアウトでヘッダー、コンテンツ、下部に分割することがよくありました。大規模な構造の場合、レイアウトに ID を持つ div を使用することがよくあります。ヘッダーは、またはを使用してレイアウトされることが多く、従来の div レイアウトとは特徴が異なります。 div.タグは不要ですが、新たに要素タグを追加します。

「ヘッダー」は HTML レイアウトで一般的に使用される名前であると認識されているため、HTML5 には新しいヘッダータグ要素が追加されます。 html5でヘッダーがlabel要素として追加される理由がわかります。

header タグを直接使用するほかに、class または id をヘッダーに設定することもできます。

2. 構文構造

header タグ要素は div と同じように使用されます。始まりがあり、終わりがある。

文法:

<header>内容</header>

ログイン後にコピー

1. ID またはクラスを直接指定しないでください

<header>头部内容区</header>

ログイン後にコピー

2. ID を設定します

<header id=”pcss5”>头部内容区</header>

ログイン後にコピー

3. クラスを設定します

<header class=”pcss5”>头部内容区</header>

ログイン後にコピー

4. 特徴: div タグ要素と同様に、複数回使用でき、id または class を使用して異なる場所に異なるスタイルを設定できます。

3. 互換性

header タグは HTML5 の新しいタグ要素であるため、古いバージョンのブラウザではサポートされておらず、IE9 以降のブラウザ、最新の Google Chrome およびその他のブラウザが必要ですそれをサポートするために。もちろん、360 ブラウザ、Baidu ブラウザ、Aoyou ブラウザなどの国内ブラウザはすべてシステムに付属の IE カーネルを使用するため、国内ブラウザは実際にはシステムに付属の IE バージョンと同じバージョンであるため、IE ブラウザはIE9 以降、このバージョンは HTML5 の新しいタグ要素と当然互換性があります。

4. 新旧 div レイアウトの比較事例

div CSS レイアウトと HTML5 CSS レイアウトを比較することで、ヘッダーの適用を観察して習得します。

例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>html5 Header标签实例 DIVCSS5</title>
    <style>
      /* 传统布局CSS */
      #header {
        width: 300px;
        height: 40px;
        background: #ccc;
      }

      /* HTML5布局样式 */
      header {
        width: 400px;
        height: 70px;
        color: #f00;
        background: #f5f5f5;
      }
      .color-000 {
        color: #000;
        background: #666;
      }
    </style>
  </head>
  <body>
    <div id="header">我在传统div布局中</div>

    <header>
      我在传统div布局中,必须在支持HTML5浏览器才能看到效果，
      建议谷歌浏览器测试观察效果
    </header>

    <header class="color-000">我颜色为黑色,背景为#666</header>
  </body>
</html>

ログイン後にコピー

エフェクトのスクリーンショット

HTMLにおけるヘッダー定義とは何を意味するのでしょうか？