HTML5でナビゲーションバーを記述するために使用される要素
html5 は nav 要素を使用してナビゲーション バーを作成します。 nav 要素はナビゲーション要素であり、ナビゲーション リンクを定義するために使用されます。ナビゲーション プロパティを持つリンクは、ページ要素のセマンティクスをより明確にするために領域に要約できます。 nav 要素は以下で使用できます: 1. Web サイトの他のメイン ページにジャンプする機能を持つ従来のナビゲーション バー; 2. 現在の記事または現在の製品ページから他の記事または他の製品にジャンプすることを目的とするサイドバー ナビゲーション. ページ; 3. このページの主要コンポーネント間を移動するために使用されるページ内ナビゲーション; 4. ページめくり操作。
このチュートリアルの動作環境: Windows 7 システム、HTML5 バージョン、Dell G3 コンピューター。
HTML5 nav 要素 (ナビゲーション要素)
nav 要素はナビゲーション リンクを定義するために使用され、HTML5 の新しい要素です。 element can ナビゲーション プロパティを持つリンクは、ページ要素のセマンティクスを明確にするために 1 つの領域にグループ化されます。ナビゲーション要素は、サイト上の他のページ、または現在のページの他の部分にリンクできます。たとえば、次のサンプル コード:
<nav>
<ul>
<li><a href="#">首页</li>
<li><a href="#">公司概况</li>
<li><a href="#">产品展示</li>
<li><a href="#">联系我们</li>
</ul>
</nav>上記のコードでは、ナビゲーション構造は、順序なしリスト ul を nav 要素内にネストすることによって構築されます。通常、HTML ページには、ページ全体またはさまざまな部分のナビゲーションとして複数の nav 要素を含めることができます。 (学習ビデオ共有: web フロントエンド )
具体的には、nav 要素は次のような状況で使用できます。
従来のナビゲーション バー: 現在、主流の Web サイトにはさまざまなレベルのナビゲーション バーがあり、その機能は Web サイトの他のメイン ページにジャンプすることです。
サイドバー ナビゲーション: 現在、主流のブログ Web サイトや電子商取引 Web サイトには、現在の記事や現在の製品ページから他の記事や他の製品ページにジャンプする目的でサイドバー ナビゲーションがあります。
ページ内ナビゲーション: その機能は、このページの主要コンポーネント間を移動することです。
ページめくり操作: ページめくり操作は、Web ページのコンテンツ部分を切り替えます。「前ページ」または「次ページ」をクリックするか、実際のページをクリックすることで切り替えることができます。ページ番号により特定のページにジャンプします。
上記の点に加えて、nav 要素は他の重要かつ基本的なナビゲーション リンク グループでも使用できます。
すべてのリンク グループを nav 要素に入れる必要はなく、メインおよび基本リンクのみを nav 要素に入れる必要があることに注意してください。
たとえば、フッターの下部に著作権に関する記述がある場合、nav 要素の使用はお勧めできません。代わりに、フッター要素を使用することが最も適切です。 1 つのページで、複数の nav 要素をナビゲーションとして全体として、またはさまざまな部分で使用できます。
nav 要素の使用法
<body> <h1 id="nav的使用方法">nav的使用方法</h1> <nav> <ul> <li> <a href=”nav元素.html”>首页</a> </li> <li> <a href=”aside元素.html”>aside</a> </li> <li> <a href=”section元素.html”>section</a> </li> </ul> </nav> </body>
の効果のデモンストレーションnav 要素は次のとおりです。
マルチレベルのネストを実現したい場合は、下に新しい独立したブロックを作成できます。article を使用します。
<article> <header> <h2 id="NAV">NAV-1</h2> <nav> <li> <a href=”section元素.html”>section</a> </li> <li> <a href=”新增的主体结构元素.html”>s新增的主体结构元素</a> </li> </header> </article>//这就实现了一层的嵌套 <article> <header> <h2 id="NAV">NAV-1</h2> <nav> <li> <a href=”section元素.html”>section</a> </li> <li> <a href=”新增的主体结构元素.html”>s新增的主体结构元素</a> </li> </header> </article>
Nav マルチレイヤー ネスティング効果のデモ画像:
下部に著作権情報がある場合は、フッターに追加することをお勧めします。 。
<footer> <p> <a href=”/”>版权信息</a> <a href=”/”>站点帮助</a> <a href=”/”>联系我们</a> </p> </foooter>
フッターのレンダリングは次のとおりです:
ナビゲーション要素を要約する方法
1. 従来のナビゲーション バー
Tencent を例に挙げます:
2. サイドバー ナビゲーション
3. ページ ナビゲーション
(学習ビデオ共有: Web フロントエンド)
以上がHTML5でナビゲーションバーを記述するために使用される要素の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7470
15
1377
52
77
11
19
29
HTMLの表の境界線
Sep 04, 2024 pm 04:49 PM
HTML の表の境界線に関するガイド。ここでは、HTML でのテーブルの境界線の例を示しながら、テーブル境界線を定義する複数の方法について説明します。
HTML 左マージン
Sep 04, 2024 pm 04:48 PM
HTML マージン左のガイド。ここでは、HTML margin-left の概要とその例、およびそのコード実装について説明します。
HTML のネストされたテーブル
Sep 04, 2024 pm 04:49 PM
これは、HTML でのネストされたテーブルのガイドです。ここでは、テーブル内にテーブルを作成する方法をそれぞれの例とともに説明します。
HTML テーブルのレイアウト
Sep 04, 2024 pm 04:54 PM
HTML テーブル レイアウトのガイド。ここでは、HTML テーブル レイアウトの値と例および出力について詳しく説明します。
HTML入力プレースホルダー
Sep 04, 2024 pm 04:54 PM
HTML 入力プレースホルダーのガイド。ここでは、コードと出力とともに HTML 入力プレースホルダーの例について説明します。
HTML 内のテキストの移動
Sep 04, 2024 pm 04:45 PM
HTML でのテキストの移動に関するガイド。ここでは、概要、マーキー タグが構文でどのように機能するか、および実装例について説明します。
HTML の onclick ボタン
Sep 04, 2024 pm 04:49 PM
HTML オンクリック ボタンのガイド。ここでは、それらの紹介、動作、例、およびさまざまなイベントでの onclick イベントについてそれぞれ説明します。
