ホームページ  >  記事  >  ウェブフロントエンド  >  html5の新しいタグ--navタグの紹介

html5の新しいタグ--navタグの紹介

青灯夜游
青灯夜游オリジナル
2018-09-11 15:39:314453ブラウズ

nav要素タグはHTML5に追加された新しいタグです。この章では、HTML5 の新しいタグである nav タグについて説明します。必要な方は参考にしていただければ幸いです。

まず、navもhtml5の新しい要素タグです。同時に、他の新しいタグと同様に、nav は、HTML5 の以前のバージョンの従来の HTML レイアウトのナビゲーション バーに関連する一般名として使用されます。

例:

<div class=”nav”>网站导航内容</div>

または

<div id=”nav”>网站导航内容</div>

HTML5 では、以前は一般的に使用されていた名前付き nav が、新しいタグ要素として特別に使用されます。このタグはナビゲーション レイアウトでよく使用されます。 html navsyntax

<nav>内容</nav>
2ナビゲーションに関連するため、一般的に Web サイトのナビゲーション レイアウトに使用されます。同時に、c787b9a589a3ece771e842a6176cf8e9 タグは、div タグや spam タグを使用して id またはクラスを追加するのとまったく同じように使用できます。 div タグとの違いは、このタグは通常、ナビゲーション関連の場所でのみ使用されることです。 HTML Web ページ ナビゲーション バーのレイアウト、またはナビゲーション バーに関連するレイアウトで使用される場合があります。

5. nav はどのタグと一緒に使用する必要がありますか? DIVCSS5 では、一般的なナビゲーション バーが ul li タグ レイアウトを使用し、一般的なレイアウトでは nav タグが ul li タグと組み合わせて使用​​されることを紹介しました。 小さなケースは次のとおりです:

1)、従来の HTML レイアウト

<nav id=”abc”>内容</nav>

2)、nav タグの後

<nav class=”abc”>内容</nav>

上記の HTML レイアウトから HTML5 への変換は、HTML nav の使用を理解するのが実際には非常に簡単です。タグ、およびul li Skillを使用したナビゲーションバーのレイアウト。

2. 互換性に関するヒント

c787b9a589a3ece771e842a6176cf8e944f9630a3d507ae7532760da37622b0f タグは HTML 5 に追加された新しいタグであるため、IE8 以前のブラウザ (IE8、IE7、IE6) ではサポートされていません。 . したがって、必要に応じてレイアウト HTML を選択してください。

3. HTML nav css レイアウトのケース

html css レイアウトから nav 構文と使用法をマスターするために、従来の div レイアウトと nav レイアウトを比較して学習します。

次の DIVCSS5 では、それぞれ 3 つのレイアウトの実践を通じて、誰もがナビゲーション レイアウトをマスターできます:

1)、従来の div+ul+li レイアウト ナビゲーション スタイル 2)、nav+ul+li レイアウト ナビゲーション スタイル。 ) 次に、nav+ul+li レイアウトに基づいて nav のクラス CSS スタイルを設定します

上記のケースを通じて、nav は通常 ul li とともに使用されるか、レイアウトとナビゲーション関連のレイアウトに同時に使用されることが誰もが理解するでしょう。 time、navはdivと同様に直接設定できます。CSSでもclassやidを追加できます。

具体的なケースは次のとおりです: 1. 従来の div css レイアウトと NAV css レイアウトの完全な HTML ソース コード

<div id=”nav”>
			<ul>
				<li>首页</li>
				<li>栏目名称</li>
				<li>联系我们</li>
			</ul>
		</div>

上記では、従来の div+ul+li+css レイアウトのナビゲーション タイプのレイアウトを使用し、 nav+ul+li+ css レイアウトを作成し、同時に nav に基づいてクラスを nav に設定して、レイアウトのコントラスト効果を変更します。

特記事項: div css レイアウトを知らない人にとって、根本的な解決策は div+css を学ぶことです。上記のコードを見れば当然ですが、上記のケースを見るだけで理解できます。

2. DIVCSS5 インスタンスのレイアウトのスクリーンショット

以上がhtml5の新しいタグ--navタグの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。