ホームページ >
記事 > ウェブフロントエンド > HTML5
HTML5 タグのレイアウトのチュートリアル
- 巴扎黑オリジナル
- 2017-06-27 10:23:472179ブラウズ
html5 ヘッダー要素タグ html5 新しい タグ要素 1aa9e5d373740b65a0cc8f0a02150c53ab946e7546ab66a280dd9c9f9310ecd5、HTML ヘッダーの基本チュートリアルを通じて学習し、ヘッダー CSS レイアウト スキルとしても機能します
HTML5 のバージョン以前は、Web ページのレイアウトに div タグを使用することに慣れていました。HTML5 では、DIV タグに基づいて新しいヘッダー タグ要素が追加されました。 「1aa9e5d373740b65a0cc8f0a02150c53」とも呼ばれます。以前は、Web ページを div CSS レイアウトでヘッダー、コンテンツ、下部に分割することがよくありました。大規模な構造の場合、レイアウトに ID を持つ div を使用することがよくあります。ヘッダーは、5ea15dbfb113feba8673e51289aaed4f16b28748ea4df4d9c2150843fecfba68 または f50071d45f8c5835406bcc272aea821216b28748ea4df4d9c2150843fecfba68 を使用してレイアウトされることが多く、従来の DIV レイアウトとは異なります。 divタグは必要ありませんが、新しい要素タグを追加します。
「ヘッダー」はhtmlレイアウトで一般的に使用される名前であることは誰もが認識しているはずなので、HTML5では新しいヘッダータグ要素が追加されました。 html5でヘッダーがlabel要素として追加される理由がわかります。
headerタグを直接使用する以外に、classやidをヘッダーに設定することもできます。
header タグ要素は div と同じように使用されます。始まりがあり、終わりがある。
構文:
1aa9e5d373740b65a0cc8f0a02150c53contentab946e7546ab66a280dd9c9f9310ecd5
1. ID またはクラスを直接指定しないでください
1aa9e5d373740b65a0cc8f0a02150c53ヘッダーコンテンツ領域ab946e7546ab66a280dd9c9f9310ecd5 ID を設定します。
< ;header id=”divcss5”>ヘッダーコンテンツエリアab946e7546ab66a280dd9c9f9310ecd5
8607905cfce55d08108d01bc484cac6fヘッダーコンテンツエリアab946e7546ab66a280dd9c9f9310ecd5 4. DIV タグ要素と同様に、複数回使用でき、さまざまな場所で ID またはクラスを使用してさまざまなスタイルを設定できます。
3. 互換性 - TOP
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. エフェクトのスクリーンショットdiv とヘッダー レイアウトのエフェクトのスクリーンショット
DIVCSS5 の特別なヒント: コードは DW ソフトウェアでスクリーンショットされ、エフェクトは Google で表示されます。 Chrome（HTML5対応） PSの描画効果はデバイスエフェクトで作成されます。通常の IE6 ～ IE8 は HTML5 をサポートしていないため、HTML5 レイアウト効果を表示できません。レイアウト効果を表示するには、IE9 以降のブラウザが必要です。以上がHTML5