ホームページ >ウェブフロントエンド >htmlチュートリアル >HTMLの
HTMLのタグの使用法
- 巴扎黑オリジナル
- 2017-06-07 11:41:336120ブラウズ
html5 ヘッダー要素タグ html5 の新しいタグ要素である 1aa9e5d373740b65a0cc8f0a02150c53ab946e7546ab66a280dd9c9f9310ecd5 は、HTML ヘッダー基本チュートリアルを通じてヘッダー CSS レイアウト スキルとして使用できます。
1. header タグ要素の基本紹介 - TOP
HTML5 バージョン以前は、Web ページのレイアウトに div タグを使用するのが一般的でした。HTML5 では、DIV タグに基づいて新しい header タグ要素が追加されました。 「1aa9e5d373740b65a0cc8f0a02150c53」とも呼ばれます。以前は、Web ページを div CSS レイアウトでヘッダー、コンテンツ、下部に分割することがよくありました。大規模な構造の場合、レイアウトに ID を持つ div を使用することがよくあります。ヘッダーは、5ea15dbfb113feba8673e51289aaed4f16b28748ea4df4d9c2150843fecfba68 または f50071d45f8c5835406bcc272aea821216b28748ea4df4d9c2150843fecfba68 を使用してレイアウトされることが多く、従来の DIV レイアウトとは異なります。 divタグは必要ありませんが、新しい要素タグを追加します。
「ヘッダー」はHTMLレイアウトで一般的に使用される名前であると認識されているため、HTML5では新しいヘッダータグ要素が追加されます。 html5でヘッダーがlabel要素として追加される理由がわかります。
headerタグを直接使用する以外に、classやidをヘッダーに設定することもできます。
2. 構文構造 - TOP
header タグ要素は div と同じように使用されます。始まりがあり、終わりがある。
構文:
1aa9e5d373740b65a0cc8f0a02150c53contentab946e7546ab66a280dd9c9f9310ecd5
1. ID またはクラスを直接指定しないでください
1aa9e5d373740b65a0cc8f0a02150c53ヘッダーコンテンツ領域ab946e7546ab66a280dd9c9f9310ecd5 2. ID を設定します。 header id="divcss5">ヘッダーコンテンツエリアab946e7546ab66a280dd9c9f9310ecd5
3. クラスを設定します
f022da74e7fc906920ed6712b1313decヘッダーコンテンツエリアab946e7546ab66a280dd9c9f9310ecd5 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の