HTML - menu 标签_HTML 菜鸟教程

HTML <menu> 标签用于创建菜单内容列表。我们可以使用 <li> 标签在菜单项内部创建列表项。

HTML <menu> 标签在 HTML4 中已弃用，并在 HTML5 中重新引入。但最好忽略此标签，因为它是实验性的，不受许多浏览器的支持。

语法

 <menu>
 ... ... 
<menu>

属性

HTML <menu> 标签支持 HTML 的全局属性和事件属性。还接受下面列出的一些特定属性。

属性	值	描述
label	text	指定可见标签。（只适用html5）
type	popup toolbar context	指定要显示的菜单类型。（只适用html5）

属性

值

描述

label

text

指定可见标签。（只适用html5）

type

popup

toolbar

context

指定要显示的菜单类型。（只适用html5）

HTML <menu> 标签示例

下面的示例将说明<menu> 标签的用法。在哪里、何时以及如何使用<menu> 标签创建菜单列表。

使用<menu> 标签创建菜单项

让我们看一下以下示例，我们将在其中使用菜单标签。

<!DOCTYPE html>
<html>

<head>
	 <title>HTML menu Tag</title>
</head>

<body>
	 <menu>
			<li>ol - Ordered list</li>
			<li>ul - Unordered list</li>
			<li>dir - Directory list</li>
			<li>menu - Menu list</li>
	 </menu>
</body>

</html>

使用 CSS 设置菜单项的样式

在此示例中，我们将使用内部 CSS 设置菜单元素的样式。

<!DOCTYPE html>
<html>

<head>
		<title>HTML menu Tag</title>
		<style>
				menu {
						display: flex;
						list-style: none;
						padding: 10px;
						width: 600px;
				}

				li {
						flex-grow: 1;
				}

				button {
						width: 100%;
						padding: 10px;
						background-color: lightgray;
						font-weight: 600;
				}
		</style>
</head>

<body>
		<menu>
				<li><button onclick="html()">HTML</button></li>
				<li><button onclick="css()">CSS</button></li>
				<li><button onclick="js()">JS</button></li>
		</menu>
</body>

</html>

支持的浏览器

浏览器
是否支持	Yes	Yes	Yes	Yes	Yes

<< HTML - layer 标签 HTML - menuitem 标签 >>