HTML ナビゲーション要素-htmlチュートリアル-php.cn

HTML ナビゲーション要素

WBOY

リリース： 2024-09-04 16:24:13

オリジナル

791 人が閲覧しました

ナビゲーション要素

HTML ドキュメント内のタグは、同じドキュメント内または他のドキュメント内で囲まれるナビゲーションリンクのブロックを指定するために使用されます。ナビゲーションブロックを示す例としては、インデックス、目次、メニューなどが挙げられます。HTML ドキュメントには、必要な数の

を含めることができます。タグ (サイトナビゲーション、ページ内ナビゲーションなど)。タグは、HTML ドキュメント内のナビゲーションセクションを宣言するためにも使用されます。ほとんどの Web サイトは通常、ユーザーがサイト内を移動できるようにするナビゲーションリンク専用のセクションを設けることを好みます。これらのリンクは nav タグ内に配置できます。このトピックでは、Html Nav 要素について学習します。

注:

HTML ドキュメント内で言及されているすべてのリンクが
内に配置されていません。要素;主要なナビゲーションブロックのみが含まれます。 Web サイトのフッターにリンクを定義するためにも使用できますが、
通常、このような場合にタグが使用されます。
HTML 要素を
内にネストすることはできません。要素。
HTML5 の Nav タグには開始タグと終了タグの両方が必要です。つまり、
……..

構文:

HTML/XHTML

<body>
<nav> ... </nav>
<body>

ログイン後にコピー

CSS

nav{
--your css code—
}

ログイン後にコピー

の使用タグ

タグは、ページまたはセクションの上部にあるメインメニューなど、主要なナビゲーション領域用に指定されています。ドキュメントには多数の

を含めることができます。要素、つまり、サイトナビゲーション用の要素、ページ内ナビゲーション用の要素などです。

内のリンクは、タグは、ul リスト内のコードにすることも、ul 要素なしで別のリンクとして単純にコード化することもできます。このタグを使用すると、ナビゲーションメニュー、テキストリンクの整った水平メニュー、ドキュメント内の主要なナビゲーション領域を正確に識別するためのヘルプ画面読み上げソフトウェアなどの作成が非常に簡単になります。

タグ固有の属性

で使用される特定の属性はありません。タグ。

グローバル属性

存在する他のすべての HTML タグと同様、

タグは、HTML5 のグローバル属性もサポートしています。

以下はグローバル属性です:

オナボート
オートコンプリート時、
オートコンプリートエラー、
オンブラー、
キャンセル、
プレイ中、
プレイスルー中、
変更時、
クリックしてください、
終了時、
コンテキストメニュー上、
変更中、
ondblclick、
オンドラッグ、
オンドラジェンド、
オンドラジェンター、
ondragexit、
オンドラグリーブ、
オンドラオーバー、
オンドラッグスタート、
オンドロップ、
期間変更中、
1 つ空になりました、
オンエンド、
エラー、
オンフォーカス、
入力時、
無効、
キーを押すと、
キーを押すと、
オンキーアップ、
オンロード、
onloadeddata、
オンロードメタデータ、
onloadstart、
マウスダウン時、
マウス入力、
マウスから離れます、
マウス移動時、
マウスアウト中、
マウスオーバーで、
マウスアップ時、
マウスホイール、
一時停止中、
プレイ中、
プレイ中、
進行中、
レート変更時、
リセット時、
サイズ変更中、
スクロールして、
求めました、
探し求めています、
選択時、
ショー中、
出撃中、
インストール済み、
送信時、
一時停止中、
定刻更新、
オンに切り替えます、
ボリューム変更時、
待機中

イベント属性

で使用できるイベント属性が存在しません。タグ。

の CSS テキスト書式設定プロパティタグ:

文字の色
テキストの配置
文字装飾
テキスト変換
行の高さ
テキスト方向
テキストシャドウ
単語の間隔

の CSS フォントプロパティタグ

フォントスタイル – 通常|斜体|斜体|イニシャル|継承
font-variant – 通常|小文字|イニシャル|継承
フォントの太さ – 通常|太字|太字|薄く|数字|イニシャル|継承
フォントサイズ – 中|xx-小|x-小|小|大|x-大|xx-大|小さい|大きい|長さ|初期|継承
フォントファミリー – ファミリ名|ジェネリックファミリー|イニシャル|継承

の CSS シャドウプロパティをテストします。タグ

<style>
address{
text-shadow: 1px 1px #FF0000;
}
</style>

ログイン後にコピー

例

以下に挙げる例は次のとおりです

例 #1

を使用して、 HTML 要素では、単一のセマンティック要素でリンクのグループを使用でき、整理された Web サイトの作成に役立ちます。

<!DOCTYPE html>
<html>
<head>
<title>HTML Nav tag</title>
</head>
<body>
<header>
<h1>About Us</h1>
</header>
<nav>
<a href="https://www.educba.com/about-us/">Who is EDUCBA?</a> |
<a href="https://www.educba.com/careers/">Careers</a> |
<a href="https://www.educba.com/instructors/">Become an instructor</a> |
<a href="https://www.educba.com/how-it-works/">How does it work?</a> |
</nav>
</body>
</html>

ログイン後にコピー

Output:

HTML ナビゲーション要素

Example #2

HTML Tag helps the users navigate to the main sections of the website.

<!DOCTYPE html>
<html>
<head>
<style>
nav{
display:flex;
flex-wrap:wrap;
}
nav a {
text-decoration: none;
display:block;
padding: 15px 25px;
text-align: center;
background-color: rgb(213, 216, 220);
color:#566573;
font-family:sans-serif;
}
nav a:hover {
background-color: #566573;
color:#ffffff;
}
</style>
</head>
<body>
<h1>Example of the HTML nav tag:</h1>
<nav>
<a href="https://www.educba.com/about-us/">About</a>
<a href="https://www.educba.com/tutorials/">Tutorials</a>
<a href="https://www.educba.com/courses/">Certification Courses</a>
</nav>
</body>
</html>

ログイン後にコピー

Output:

HTML ナビゲーション要素

Example #3

Tables of contents and menus are good examples of

HTML element.

<!DOCTYPE html>
<html>
<head>
<style>
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul:after {
clear: both;
display: block;
}
nav ul li {
float: left;
position:relative;
list-style-type:none;
}
nav ul li:hover {
background: rgb(52, 73, 94);
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block;
padding: 20px 30px;
color: #ffffff;
text-decoration: none;
background-color:rgb(40, 55, 71 );
font-family: sans-serif;
}
nav ul ul {
background: #5f6975;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
padding: 15px 10px;
color: #ffffff;
text-transform: uppercase;
}
nav ul ul li a:hover {
background: rgb(27, 38, 49);
}
</style>
</head>
<body>
<h1>Dropdown menu with the HTML nav tag:</h1>
<nav>
<ul>
<li>
<a href="https://www.educba.com/about-us/">About</a>
<ul>
<li>
<a href="#">Reviews</a>
</li>
<li>
<a href="#">Contact</a>
</li>
<li>
<a href="#">About Us</a>
</li>
</ul>
</li>
<li>
<a href="https://www.educba.com/tutorials/">Tutorials</a>
<ul>
<li>
<a href="#">Finance</a>
</li>
<li>
<a href="#">Data Science</a>
</li>
<li>
<a href="#">Sofware Development</a>
</li>
<li>
<a href=#">Design</a>
</li>
<li>
<a href="#">Excel</a>
</li>
<li>
<a href="#">Others</a>
</li>
</ul>
</li>
<li>
<a href="https://www.educba.com/courses/">Certification Courses</a>
<ul>
<li>
<a href="#">Finance</a>
</li>
<li>
<a href="#">Data Science</a>
</li>
<li>
<a href="#">Sofware Development</a>
</li>
<li>
<a href=#">Design</a>
</li>
<li>
<a href="#">Excel</a>
</li>
<li>
<a href="#">Others</a>
</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>

ログイン後にコピー

Output:

HTML ナビゲーション要素

Browser Support: The section tag is being new in HTML5, and it is being supported in the browser, which is listed below:

Google Chrome 6.0
Internet Explorer 9.0
Firefox 4.0
Opera 11.1
Safari 5.0

Conclusion- Html Nav Element

Below are mentioned some of the main key points which you should remember from this topic:

The
element in HTML5 represents a section of the page whose entire purpose is to provide navigational links, either in the same document or any other document. The links in the
element can point to other webpages or to different sections of the same webpage. Common examples of the nav elements are tables, menus, indexes, and contents.
The
HTML element can use for the primary navigation of the structure.
Some developers might use the
HTML element for breadcrumbs and paginations.
Essentially, it is your own perception of how to use the
element within your HTML document.
The
HTML element is a block-level element.

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