HTML5でナビゲーションバーを記述するために使用される要素-フロントエンドQ&A-php.cn

HTML5でナビゲーションバーを記述するために使用される要素

青灯夜游

リリース： 2022-12-12 18:38:57

オリジナル

3581 人が閲覧しました

html5 は nav 要素を使用してナビゲーションバーを作成します。 nav 要素はナビゲーション要素であり、ナビゲーションリンクを定義するために使用されます。ナビゲーションプロパティを持つリンクは、ページ要素のセマンティクスをより明確にするために領域に要約できます。 nav 要素は以下で使用できます: 1. Web サイトの他のメインページにジャンプする機能を持つ従来のナビゲーションバー; 2. 現在の記事または現在の製品ページから他の記事または他の製品にジャンプすることを目的とするサイドバーナビゲーション. ページ; 3. このページの主要コンポーネント間を移動するために使用されるページ内ナビゲーション; 4. ページめくり操作。

HTML5でナビゲーションバーを記述するために使用される要素

このチュートリアルの動作環境: 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 要素は次のとおりです。

HTML5でナビゲーションバーを記述するために使用される要素

マルチレベルのネストを実現したい場合は、下に新しい独立したブロックを作成できます。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 マルチレイヤーネスティング効果のデモ画像:

HTML5でナビゲーションバーを記述するために使用される要素

下部に著作権情報がある場合は、フッターに追加することをお勧めします。。

<footer>
<p>
<a href=”/”>版权信息</a>
<a href=”/”>站点帮助</a>
<a href=”/”>联系我们</a>
</p>
</foooter>

ログイン後にコピー

フッターのレンダリングは次のとおりです:

HTML5でナビゲーションバーを記述するために使用される要素

ナビゲーション要素を要約する方法

1. 従来のナビゲーションバー

Tencent を例に挙げます:

HTML5でナビゲーションバーを記述するために使用される要素

2. サイドバーナビゲーション

HTML5でナビゲーションバーを記述するために使用される要素

3. ページナビゲーション

HTML5でナビゲーションバーを記述するために使用される要素

(学習ビデオ共有: Web フロントエンド)

以上がHTML5でナビゲーションバーを記述するために使用される要素の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。