HTML5 nav和menu标签的区别

HTML < nav>（导航部分元素）代表页面中包含导航链接的部分，可以是当前文档内的链接，也可以是指向其他外部文档的链接。该标签通常用于HTML文档的各个部分之间的导航、目录和索引。

现在，我们将进一步讨论两种情况，即在同一个HTML文档中导航到不同部分的情况，以及导航到外部文档的情况，并且会给出相应的示例。

示例1

在下面的示例中，我们使用<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>

示例2

在下面的示例中，我们指定了外部文档的链接 −

<!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://www.tutorialspoint.com/index.htm">Home</a>
      <a href = "https://www.tutorialspoint.com/codingground.htm">Coding Ground</a>    
      <a href = "https://www.tutorialspoint.com/about/about_careers.htm">Jobs</a>
      <a href = "https://www.tutorialspoint.com/whiteboard.htm">Whiteboard</a>
      <a href = "https://www.tutorialspoint.com/online_dev_tools.htm">Tools</a>
      <a href = "https://www.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中`<nav>`和`<menu>`标签的区别

下表说明了HTML5中<nav>和<menu>标签之间的区别-

`<nav>`	`<menu>`
它代表了用于在当前文档内部或外部进行导航的导航链接部分。	它代表了与特定上下文互动的命令或选项列表。
它包含了一组`<a>`（锚点）元素。	它包含了一组`<command>`或`<menuitem>`元素。
它被所有浏览器支持。	只有Mozilla Firefox浏览器支持它。