HTML にはフロントエンド技術を強調するための多くの機能があり、ナビゲーション タグは HTML5 バージョンの機能の 1 つです。以前のバージョンでは、HTML にはさまざまな機能がありましたが、HTML 5 では、ナビゲーションがグローバル属性とイベント属性をサポートしています。 HTML のタグは、ドキュメント内のナビゲーション リンクのセットです。 内のすべてのリンクが表示されるわけではありません。要素タグは、ナビゲーション リンク内のタグの主要ブロックのみを指定します。一般に、Web ページにはナビゲーション リンクに関するセクションがあり、ユーザーがサイト内を移動するために使用されます。これらのリンクは Navigation タグ内で指定されます。
構文:
それぞれの Html タグには、次のコードのような個別の構文があります: ナビゲーション タグの基本構文。 を使用しました。 HTML スタイルと CSS スタイルの両方でタグを使用することもできます。
HTML
<nav>
< a href="/" />
-------------------
</nav> ログイン後にコピー
CSS
nav{
--some codes—
} ログイン後にコピー
ナビゲーション タグは HTML でどのように機能しますか?
ユーザーは、Web ページ上のタブまたはメニューをクリックした後にリクエストを送信します。別のページに移動して、サーバーの応答により結果の Web ページがユーザーに表示されます。 HTML と同様に、 などの HTML 要素を使用して、ユーザーの視点となる GUI のメニューまたはタブを分離します。タグ。
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> ログイン後にコピー
出力:
前の例と比較すると、ユーザーを引き付けるためにナビゲーションにいくつかのアニメーションを使用しています。
さまざまな種類のナビゲーション メニュー
一般に、(アンカー)要素はすべて閉じられている必要があります。ほとんどのナビゲーション メニューはリストを使用して作成できます。場合によっては、ユーザーの依存関係に基づいてインターフェース制限が使用されることがあります。
リストベースのナビゲーション メニューは次のとおりです:
ページ内ナビゲーション メニュー
サイトナビゲーションメニュー
コンテキスト-コンテキスト ナビゲーション メニュー
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 5 はナビゲーション メニューをサポートしており、追加の機能 もサポートしています。タグ。 HTML の今後のバージョンではさらに高度なものになります。
以上がHTML ナビゲーション タグの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
