HTML ナビゲーション タグ
HTML にはフロントエンド技術を強調するための多くの機能があり、ナビゲーション タグは HTML5 バージョンの機能の 1 つです。以前のバージョンでは、HTML にはさまざまな機能がありましたが、HTML 5 では、ナビゲーションがグローバル属性とイベント属性をサポートしています。 HTML のタグは、ドキュメント内のナビゲーション リンクのセットです。
構文:
それぞれの Html タグには、次のコードのような個別の構文があります: ナビゲーション タグの基本構文。
HTML
<nav> < a href="/" /> ------------------- </nav>
CSS
nav{
--some codes—
}ナビゲーション タグは HTML でどのように機能しますか?
ユーザーは、Web ページ上のタブまたはメニューをクリックした後にリクエストを送信します。別のページに移動して、サーバーの応答により結果の Web ページがユーザーに表示されます。 HTML と同様に、
1 つの HTML ページ ドキュメントには、Web ページのメニュー/タブに基づく複数のリンクが含まれる場合があります。 HTML では、ナビゲーションには通常、水平ナビゲーションと垂直ナビゲーションの 2 つのタイプが含まれます。デフォルトでは、水平ナビゲーションはユーザー要件に基づいて読み込まれ、垂直ナビゲーションまたはその他のユーザー要件タイプに変換されます。
上の図は、ナビゲーション リンクを介したユーザー画面の基本的な理解を示しています。ユーザーがブラウザの Web ページを通じてホーム リンクをクリックする場合、リンクは Html タグにすぎません。つまり、特定の Web ページを経由し、プロジェクトに応じてクライアント側のページまたはサーバー側のページになり、ユーザーのブラウザ画面にホームページが表示されます。
HTML nav タグの例
以下は HTML nav タグの例です:
例 #1
<html> <body> <nav> <a href="/home/">Home</a> | <a href="/contactus/">Contact Us</a> | <a href="/about us/">About US</a> </nav> </body> </html>
出力:
例 #2
<html>
<head>
<style>
nav {
border:2px;
background-color:#090;
color:green;
padding:5px;
}
n {
color:white;
font-size:10px;
}
.n1{
font-size:20px;
color:#090;
font-weight:bold;
text-align:center;
}
.n2 {
text-align:center;
color:#090;
margin:20px;
font-weight:bold;
}
</style>
</head>
<body>
<div class="n1">First</div>
<div class="n2">Second</div>
<nav>
<a href="/home/">Home</a> |
<a href="/contactus/">Contact Us</a> |
<a href="/about us/">About US</a>
</nav>
</body>
</html>出力:
例 #3
<html>
<head>
<style>
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 50%;
width: 3;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.6s;
}
.sidenav n {
padding: 5px 8px 7px 22px;
font-size: 23px;
color: #818181;
transition: 0.6s;
}
.sidenav n:hover {
color: #f1f1f1;
}
.sidenav .close{
position: absolute;
top: 0;
right: 20px;
font-size: 18px;
margin-left: 40px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav n {font-size: 18px;}
}
</style>
</head>
<body>
<div id="first" class="sidenav">
<a href="javascript:void(0)" class="close" onclick="cN()">×</a>
<a href="#">Home</a>
<a href="#">Contact Us</a>
<a href="#">About US</a>
</div>
<h2>Sample</h2>
<span style="font-size:20px;cursor:pointer" onclick="oN()">☰ click</span>
<script>
function oN() {
document.getElementById("first").style.width = "300px";
}
function cN() {
document.getElementById("first").style.width = "1";
}
</script>
</body>
</html>出力:
前の例と比較すると、ユーザーを引き付けるためにナビゲーションにいくつかのアニメーションを使用しています。
さまざまな種類のナビゲーション メニュー
一般に、 のような HTML タグでは、いくつかの異なるタイプのメニューやイディオムを考慮する必要があります。 (アンカー)要素はすべて閉じられている必要があります。ほとんどのナビゲーション メニューはリストを使用して作成できます。場合によっては、ユーザーの依存関係に基づいてインターフェース制限が使用されることがあります。
リストベースのナビゲーション メニューは次のとおりです:
- ページ内ナビゲーション メニュー
- サイトナビゲーションメニュー
- コンテキスト-コンテキスト ナビゲーション メニュー
- Stemaps ナビゲーション メニュー
- ページネーション
1.ページ内ナビゲーション メニュー
Web ページ上の他の異なるセクションを指す単一ページのリンクの表またはコンテンツ。
例
<nav> <a href="/home/">Home</a> | </nav>
2.サイトナビゲーションメニュー
これはおそらく、Web ページで一般的なメニュー タイプです。これは、サイトの階層から選択するオプションを示すサイトまたはサブセットのカスタムまたはユーザー定義のメニュー タイプです。
例
<nav> <ul> <li><a href="/home/">Home</a> </li> <li><a href="/about us/">About Us</a> </li> <li><a href="/contact us/">Contact Us</a> </li> </nav>
3.コンテキスト ナビゲーション メニュー
これはドキュメントのコンテンツを構築するリンクであり、HTML ドキュメントの現在のページに関連する追加情報を提供します。このメニューの例としては、一部のニュース記事、銀行サイトなどがあります。 Web ページ アプリケーションで目にするものには、タブまたはメニューにマウス カーソルを置いたナビゲーション パネルが含まれています。メニューのツールチップコンテンツのように表示されます。
4.サイトマップのナビゲーション メニュー
これは、ユーザーがメニューやタブで設定したページをクリックしたときにポップアップ ブロックのように見えるメニューです。または、新しいウィンドウやページを設定するには追加のプラグインが必要で、すべてのコンテンツが同じサイトにマップされます。サイトマップとサイト検索の両方には、HTML で提供されるさまざまな機能セットがあります。
5.ページネーション
ページネーションでは、ユーザーがメニューまたはタブをクリックした後、フロントエンド画面に大量のファイルセットが読み込まれるように、Web ページがバックエンドで設定されることがあります。このオプションを使用すると、個別のページに分割されます。ナビゲーションと比較すると、通常は同じドキュメントのバックエンドにリンクするため、同じ Web ページにさらに多くのオプションや詳細情報が表示されるという点が異なります。
結論
最後に、結論部分があり、通常、HTML の各バージョンには異なる機能セットがあります。 HTML 4 は
以上がHTML ナビゲーション タグの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7912
15
1652
14
1411
52
1303
25
1248
29
HTMLの表の境界線
Sep 04, 2024 pm 04:49 PM
HTML の表の境界線に関するガイド。ここでは、HTML でのテーブルの境界線の例を示しながら、テーブル境界線を定義する複数の方法について説明します。
HTML のネストされたテーブル
Sep 04, 2024 pm 04:49 PM
これは、HTML でのネストされたテーブルのガイドです。ここでは、テーブル内にテーブルを作成する方法をそれぞれの例とともに説明します。
HTML 左マージン
Sep 04, 2024 pm 04:48 PM
HTML マージン左のガイド。ここでは、HTML margin-left の概要とその例、およびそのコード実装について説明します。
HTML テーブルのレイアウト
Sep 04, 2024 pm 04:54 PM
HTML テーブル レイアウトのガイド。ここでは、HTML テーブル レイアウトの値と例および出力について詳しく説明します。
HTML入力プレースホルダー
Sep 04, 2024 pm 04:54 PM
HTML 入力プレースホルダーのガイド。ここでは、コードと出力とともに HTML 入力プレースホルダーの例について説明します。
HTML の onclick ボタン
Sep 04, 2024 pm 04:49 PM
HTML オンクリック ボタンのガイド。ここでは、それらの紹介、動作、例、およびさまざまなイベントでの onclick イベントについてそれぞれ説明します。
HTML 内のテキストの移動
Sep 04, 2024 pm 04:45 PM
HTML でのテキストの移動に関するガイド。ここでは、概要、マーキー タグが構文でどのように機能するか、および実装例について説明します。
