Html 導航元素-html教學-PHP中文網

範例

範例#1

Example #3

Conclusion- Html Nav Element

首頁

web前端

html教學

Html 導航元素

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 04, 2024 pm 04:24 PM

html html5 HTML Tutorial HTML Properties HTML tags

導覽元素

HTML 文件中的標籤用於指定包含在相同文件或任何其他文件中的導覽連結區塊。展示導航區塊的範例是索引、目錄、選單等。 HTML 文件可以包含所需數量的

注意：

HTML 文件中提到的所有連結均未放置在
內。元素;它只包括主要的導航區塊。它也可用於定義網站頁腳中的鏈接，但
標籤通常在這種情況下使用。
HTML 元素不允許巢狀在
中元素。
HTML5 中的導覽標籤需要開始和結束標籤，即
……..

文法：

HTML/XHTML

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

登入後複製

CSS

nav{
--your css code—
}

登入後複製

使用
標籤

;標籤專為主要導航區域而設計，例如頁面或部分頂部的主選單。一個文件可以有多個

標籤特定屬性

沒有與

全域屬性

與所有其他 HTML 標籤一樣，

以下是全域屬性：

中止
自動完成，
自動完成錯誤，
模糊，
取消，
可以玩，
可以通關，
改變，
點擊，
關閉，
在上下文選單上，
一旦改變，
單擊，
ondrag，
關於德拉吉德，
ondragenter，
ondrageexit，
拖走，
ondragoover，
ondragstart，
ondrop，
持續時間變化，
空了，
結束了，
錯誤，
焦點，
輸入時，
無效，
按下按鍵，
按鍵，
onkeyup，
加載，
已載入數據，
已載入元數據，
onloadstart，
滑鼠按下時，
滑鼠輸入，
滑鼠離開，
滑鼠移動，
老鼠移出時，
滑鼠懸停時，
滑鼠鬆開，
滑鼠滾輪，
暫停，
比賽中，
正在播放，
進行中，
利率變化，
重置時，
調整大小，
捲動，
尋求，
尋求，
選擇時，
現場表演，
安排序，
已安裝，
提交後，
暫停，
準時更新，
打開，
音量變化，
等待中

事件屬性

不存在可與

文字顏色
文字對齊
文字裝飾
文字轉換
行高
文字方向
文字陰影
字間距

字體樣式 – 正常|斜體|傾斜|首字母|繼承
字型變體 – 普通|小型大寫字母|首字母|繼承
字型粗細 – 正常|粗體|粗體|更亮|數字|首字母|繼承
字型大小 – 中|xx-小|x-小|小|大|x-大|xx-大|小|大|長度|初始|繼承
字型系列 – 家族名稱|通用家族|首字母|繼承

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

登入後複製

範例

以下是下面提到的範例

範例#1

在

<!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中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn