数据结构
网络
关系数据库管理系统 (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.com/index.htm">Home</a>
<a href = "https://tutorialspoint.com/codingground.htm">Coding Ground</a>
<a href = "https://tutorialspoint.com/about/about_careers.htm">Jobs</a>
<a href = "https://tutorialspoint.com/whiteboard.htm">Whiteboard</a>
<a href = "https://tutorialspoint.com/online_dev_tools.htm">Tools</a>
<a href = "https://tutorialspoint.com/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 次浏览
广告