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


如果我们想在 HTML 中创建一个菜单列表,我们需要使用 <menu> 标签,它用于定义用户可以用来创建列表表单控件、上下文菜单、工具栏和命令的命令列表。

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

语法

下面显示了 HTML 中 <menu> 标签的用法:

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

下面显示了菜单标签中存在的属性

<menu type="list|context|toolbar">
  • list 包含默认值,用于定义可以执行某些操作的菜单列表,这些操作在与用户交互时会执行。

  • context 用于定义可以在与用户交互之前执行操作的上下文菜单。

  • toolbar 用于定义工具栏菜单,该菜单允许命令,并且还允许用户立即与命令交互。

示例

以下是如何在 HTML 中添加菜单列表的示例:

Open Compiler
<!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://tutorialspoint.com/questions/category/HTML"></menuitem> <menuitem label="Operating System" onclick="https://tutorialspoint.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 中添加菜单列表:

Open Compiler
<!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>

示例

让我们看另一个例子:

Open Compiler
<!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>

更新于: 2023年10月10日

831 次浏览

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告