ホームページ > 記事 > ウェブフロントエンド > HTML5でナビゲーションバーを記述するために使用される要素
HTML5でナビゲーションバーを記述するために使用される要素
- 青灯夜游オリジナル
- 2022-12-12 18:38:573561ブラウズ
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>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>NAV-1</h2> <nav> <li> <a href=”section元素.html”>section</a> </li> <li> <a href=”新增的主体结构元素.html”>s新增的主体结构元素</a> </li> </header> </article>//这就实现了一层的嵌套 <article> <header> <h2>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 サイトの他の関連記事を参照してください。