ホームページ >ウェブフロントエンド >htmlチュートリアル >HTML ナビゲーション タグ
HTML ナビゲーション タグ
- WBOYオリジナル
- 2024-09-04 16:24:011091ブラウズ
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 サイトの他の関連記事を参照してください。