HTMLの<header>タグの使用法-htmlチュートリアル-php.cn

HTMLの

タグの使用法

巴扎黑

リリース： 2017-06-07 11:41:33

オリジナル

6071 人が閲覧しました

html5 ヘッダー要素タグ html5 の新しいタグ要素である

は、HTML ヘッダー基本チュートリアルを通じてヘッダー CSS レイアウトスキルとして使用できます。

1. header タグ要素の基本紹介 - TOP

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

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

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

headerタグを直接使用する以外に、classやidをヘッダーに設定することもできます。

2. 構文構造 - TOP

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

構文:

content

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

ヘッダーコンテンツ領域

2. ID を設定します。 header id="divcss5">ヘッダーコンテンツエリア

3. クラスを設定します

ヘッダーコンテンツエリア

4. tag 要素は複数回使用でき、さまざまな場所で id または class を使用してさまざまなスタイルを設定できます。

3. 互換性 - TOP

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

4. 新旧DIVレイアウトの比較事例 - TOP

DIV+CSSレイアウトとHTML5+CSSレイアウトを比較してヘッダーの適用を観察しマスターします。

1. DIVCSS5 サンプル 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>

ログイン後にコピー

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

DW ソフトウェアのコードのスクリーンショット、Google Chrome (HTML5 をサポート) のブラウザーエフェクト、および PS レンダリング。通常の IE6 ～ IE8 は HTML5 をサポートしていないため、HTML5 レイアウト効果を表示できません。レイアウト効果を表示するには、IE9 以降のブラウザが必要です。

以上がHTMLの

タグの使用法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。