HTML5 <header> タグのレイアウトのチュートリアル-htmlチュートリアル-php.cn

HTML5

タグのレイアウトのチュートリアル

巴扎黑

リリース： 2017-06-27 10:23:47

オリジナル

2305 人が閲覧しました

html5 ヘッダー要素タグ html5 新しいタグ要素

、HTML ヘッダーの基本チュートリアルを通じて学習し、ヘッダー CSS レイアウトスキルとしても機能します

1. ヘッダータグ要素の基本的な紹介 - TOP

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

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

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

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

2. 構文構造 - TOP

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

構文:

content

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

ヘッダーコンテンツ領域

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

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

4. DIV タグ要素と同様に、複数回使用でき、さまざまな場所で ID またはクラスを使用してさまざまなスタイルを設定できます。

3. 互換性 - TOP

header タグは 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. エフェクトのスクリーンショットdiv とヘッダーレイアウトのエフェクトのスクリーンショット

DIVCSS5 の特別なヒント: コードは DW ソフトウェアでスクリーンショットされ、エフェクトは Google で表示されます。 Chrome（HTML5対応） PSの描画効果はデバイスエフェクトで作成されます。通常の IE6 ～ IE8 は HTML5 をサポートしていないため、HTML5 レイアウト効果を表示できません。レイアウト効果を表示するには、IE9 以降のブラウザが必要です。

以上がHTML5

タグのレイアウトのチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。