如何在 HTML 中添加菜单列表?

htmlfront end technologyweb development更新于 2025/8/14 3:24:17

如果我们想在 HTML 中创建菜单列表，我们必须使用 <menu> 标签，该标签用于定义一系列命令，用户可以使用这些命令创建表单控件、上下文菜单、工具栏和命令。

目前，此 <menu> 标签已从 HTML 中移除，并在 HTML5 中重新引入。在大多数平台上，此标签不受支持。

语法

HTML 中 <menu> 标签的用法如下所示 −

<menu> -- --- --- </menu>

menu 标签中的属性如下所示

<menu type="list|context|toolbar">

list 包含默认值，用于定义一个菜单列表，这些菜单可以在与用户交互时执行某些操作。
context 用于定义上下文菜单，该菜单可以在与用户交互之前执行操作。
toolbar 用于定义一个工具栏菜单，该菜单允许执行命令，并且允许用户立即与命令交互。

示例

以下是在 HTML 中添加菜单列表的示例 −

<!DOCTYPE html>
<html>
<body>
   <center>
      <h1 style="color:blue;"> TutorialsPoint WebSite </h1>
      <h2>HTML <menu> type attribute </h2>
      <div style="background:yellow; border:2px solid black; padding: 10px;" contextmenu="tutorial">
         <p>Tutorials Point is a leading Ed Tech company striving to provide the best learning material on technical and non-technical subjects. <menu type="context" id="menuID">
         <menu label="Share on...">
            <menuitem label="HTML" onclick="https://www.cainiaomax.com/questions/category/HTML"></menuitem>
            <menuitem label="Operating System" onclick="https://www.cainiaomax.com/questions/category/operating-system"></menuitem>
         </menu>
         <menuitem label="Email This Page" onclick="window.location='mailto:?body='+ window.location.href;"></menuitem>
      </div>
      <p>Tutorials Point is a leading Ed Tech company </p>
      <hr>
      <p>Right click on yellow color div and see the menuitem
   </center>
</body>
</html>

"menu"标签的内容如下所示 −

<menuitem>
<li>
<script>
<hr>

HTML <menu> 标签还支持以下附加属性 −

属性	值和说明
label	text 指定可见的标签。
type	popup 指定要显示的菜单类型。
type	context 指定要显示的菜单类型。
type	toolbar 指定要显示的菜单类型。

示例

在下面的示例中，我们尝试使用 <menu> 标签在 HTML 中添加菜单列表 −

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   <title>Menu Tag example</title>
</head>
<body>
   <menu>
      <li>HTML Lists.</li>
      <li>HTML Unordered Lists.</li>
      <li>HTML Ordered Lists.</li>
      <li>HTML Definition Lists.</li>
   </menu>
</body>
</html>

示例

让我们看另一个例子 −

<!DOCTYPE>
<html>
<head>
   <title>HTML is a markup language</title>
</head>
<body>
   <h1>HTML -- menu tag.</h1>
   <p>Creates a menu list................</p>
   <menu>
      <li>Home</li>
      <li>Registration</li>
      <li>About Us</li>
      <li>Contact</li>
      <li>Feedback</li>
   </menu>
</body>
</html>