資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法學HTML5 中<nav> 和 <menu> 標籤的區別
HTML 的<nav>（導航部分元素）表示頁面中包含導航連結的部分，這些連結可以在當前文件內或指向其他外部文件。此標籤通常用於在HTML文件的各個部分、目錄和索引之間進行導航。
現在，我們將在本文中進一步討論這兩種情況，即在同一HTML文件的各個部分之間導航以及使用合適的示例導航到外部文件。
示例
在下面的示例中，我們指定了導航連結（使用<nav>標籤）到同一HTML文件中的某些部分。
<!DOCTYPE html>
<html>
<head>
<title>nav tag in HTML</title>
<style>
#section1, #section2{
margin: 5px;
padding: 3px;
}
#section1{
background-color: lightblue;
}
#section2{
background-color: lightcoral;
}
</style>
</head>
<body>
<h4>Click to jump to sections within the same page</h4>
<nav>
<a href="#section1">Go to Section 1</a>
<a href="#section2">Go to Section 2</a>
</nav>
<br/><br/><br /><br /><br /><br />
<div id="section1">
<h2>Section 1</h2>
<p>This is the text in section-2</p>
</div>
<br/><br/><br /><br /><br /><br />
<div id="section2">
<h2 >Section 2</h2>
<p>This is the text in section-2</p>
</div>
</body>
</html>
示例
在下面的示例中，我們指定了指向外部文件的連結：
<!DOCTYPE html>
<html>
<head>
<title>nav tag</title>
<style>
nav {
background-color:seagreen;
color:white;
padding:20px;
}
a {
color:white;
font-size: 20px;
margin-right: 15px;
}
a:hover{
background-color: lightblue;
}
.demo {
font-size:30px;
color:seagreen;
}
</style>
</head>
<body>
<h2 class="demo">Tutorialspoint</h2>
<nav>
<a href = "https://tutorialspoint.tw/index.htm">Home</a>
<a href = "https://tutorialspoint.tw/codingground.htm">Coding Ground</a>
<a href = "https://tutorialspoint.tw/about/about_careers.htm">Jobs</a>
<a href = "https://tutorialspoint.tw/whiteboard.htm">Whiteboard</a>
<a href = "https://tutorialspoint.tw/online_dev_tools.htm">Tools</a>
<a href = "https://tutorialspoint.tw/business/index.asp">Corporate Training</a>
</nav>
</body>
</html>
HTML <menu> 標籤
HTML 的<menu> 標籤指定命令列表或選單。它用於建立上下文選單、工具欄以及列出表單控制元件和命令。此<menu>標籤在HTML 4.01中已棄用，並在HTML 5.1版本中重新引入。
注意 − 不建議使用<menu>標籤，因為它處於實驗階段，並且許多瀏覽器（除了Mozilla Firefox（僅限於上下文選單））都不支援。
示例
在下面的示例中，我們使用<menu>和<li>標籤定義列表：
<!DOCTYPE html>
<html>
<head>
<title>menu tag in HTML</title>
</head>
<body>
<menu>
<li>Home</li>
<li>Coding ground</li>
<li>Jobs</li>
<li>Whiteboard</li>
<li>Tools</li>
</menu>
</body>
</html>
示例
在下面的程式中，我們使用不同的<menuitem>元素建立一個上下文選單：
<!DOCTYPE html>
<html>
<head>
<title>Menu tag in HTML</title>
<style>
div{
background: seagreen;
border: 2px solid white;
padding: 10px;
}
</style>
</head>
<body>
<div contextmenu="testmenu">
<p>To see the context mennu, right-click inside this box.</p>
<menu type="context" id="testmenu">
<menuitem label="Refresh"
onclick="window.location.reload();"
icon="ico_reload.png">
</menuitem>
<menuitem label="Email"
onclick=
"window.location='mailto:?body='+window.location.href;">
</menuitem>
</menu>
</div>
<p>Please use Mozilla-Firefox browser to view the expected output.</p>
</body>
</html>
HTML5 中HTML <nav> 和 <menu> 標籤的區別
下表說明了HTML5中<nav>和<menu>標籤的區別：
<nav> |
<menu> |
|---|---|
它表示導航連結的部分，用於在當前文件內或外部導航。 |
它表示與特定上下文互動的命令或選項列表。 |
它包含<a>（錨）元素列表。 |
它包含<command>或<menuitem>元素列表。 |
所有瀏覽器都支援它。 |
它僅在Mozilla Firefox瀏覽器中受支援。 |
更新於：2023年8月4日
323 次瀏覽
廣告