Html 導航元素

導覽元素

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

區塊。

標籤，例如網站導覽、頁內導覽等。標籤也用於聲明 HTML 文件中的導覽部分。大多數網站通常喜歡有專門用於導航連結的部分，允許用戶在網站上導航。這些連結可以放置在導航標籤內。在本主題中，我們將學習 Html Nav Element。

注意：

• HTML 文件中提到的所有連結均未放置在
  內。元素;它只包括主要的導航區塊。它也可用於定義網站頁腳中的鏈接，但

  標籤通常在這種情況下使用。
• HTML 元素不允許巢狀在

  中元素。
• HTML5 中的導覽標籤需要開始和結束標籤，即
  ……..

文法：

HTML/XHTML

<nav> ... </nav>

CSS

nav{
--your css code—
}

使用

標籤

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

元素。

元素，即一個用於網站導航，一個用於頁面內導航等。標籤可以是 ul 列表中的程式碼，也可以簡單地編碼為不含 ul 元素的單獨連結。此標籤有助於更輕鬆地建立導航選單、文字連結的整潔程度選單或幫助螢幕閱讀軟體以正確識別文件中的主要導航區域等內容。

標籤特定屬性

沒有與

一起使用的特定屬性標籤。

全域屬性

與所有其他 HTML 標籤一樣，

標籤也支援HTML5中的全域屬性。

以下是全域屬性：

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

事件屬性

不存在可與

一起使用的事件屬性。標籤。

中的 CSS 文字格式屬性標籤：

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

中的 CSS 字體屬性標籤

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

的 CSS 測試陰影屬性標籤

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

範例

以下是下面提到的範例

範例#1

在

的幫助下HTML 元素，我們可以在單一語義元素中使用一組鏈接，這有助於製作有組織的網站。

<title>HTML Nav tag</title>


<header>
<h1 id="About-Us">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>

Output:

Example #2

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

<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>


<h1 id="Example-of-the-HTML-nav-tag">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>

Output:

Example #3

Tables of contents and menus are good examples of

HTML element.

<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>


<h1 id="Dropdown-menu-with-the-HTML-nav-tag">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="#%22">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="#%22">Design</a>
</li>
<li>
<a href="#">Excel</a>
</li>
<li>
<a href="#">Others</a>
</li>
</ul>
</li>
</ul>
</nav>

Output:

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