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

HTMLの

タグの使い方

php中世界最好的语言

リリース： 2017-11-22 17:17:23

オリジナル

5266 人が閲覧しました

HTML5 より前のバージョンでは、Web ページのレイアウトに DIV タグを使用する習慣があるかもしれませんが、H5 では、DIV タグに基づいてヘッダータグ要素が追加されます。これは、以前は head タグと呼ばれていました。 Web ページをレイアウト内のヘッダーに追加します。ヘッダー、コンテンツ、下部。計画に役立つ体系的なタグが追加されました。では、このヘッダータグをどのように使用すればよいでしょうか。今日はそれをじっくり勉強してみます

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

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

文法構造

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

構文:

<header>内容</header>

ログイン後にコピー

id や class を直接指定しないでください

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

ログイン後にコピー

id を設定

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

ログイン後にコピー

class を設定

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

ログイン後にコピー

特徴: DIV タグ要素と同じように、複数回使用でき、id または class も使用できますさまざまな場所にさまざまなスタイルを設定します。

互換性

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

新旧DIVレイアウトの比較事例

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

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>html5 Header标签实例</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> 
<p id="header">我在传统p布局中</p> 
 
<header>我在传统p布局中,必须在支持HTML5浏览器才能看到效果， 
建议谷歌浏览器测试观察效果</header> 
 
<header class="color-000">我颜色为黑色,背景为#666</header> 
</body> 
</html>

ログイン後にコピー

タグの使用法はたくさんあります。さらに興味深い内容については、php 中国語 Web サイトその他関連記事に注目してください。

IE6 はホバーをサポートしていますか?

HTMLナビゲーションバーを作成するための画像とテキストコードを共有します

CSSを使用してpのzインデックスを操作する方法

以上がHTMLの

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