如何在 HTML 中添加菜单列表?
如果我们想在 HTML 中创建一个菜单列表,我们必须使用 <menu> 标签,它用于定义用户可以用来创建列表表单控件、上下文菜单、工具栏和命令的命令列表。
目前,这个 <menu> 标签已从 HTML 中移除,并在 HTML5 中重新引入。在大多数平台上,此标签不受支持。
语法
下面显示了 HTML 中<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://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 |
文本 指定可见标签。 |
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>
广告
数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP