HTML - <menu> 标签

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

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

语法

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

属性

HTML menu 标签支持全局和事件HTML 属性。也接受一些特定的属性，如下所示。

属性	值	描述
label	文本	指定可见标签。
type	popup toolbar context	指定要显示的菜单类型。

属性

值

描述

label

文本

指定可见标签。

type

popup

toolbar

context

指定要显示的菜单类型。

HTML menu 标签示例

下面的示例将说明 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 来样式化 menu 元素。

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

支持的浏览器

标签
menu	是	是	是	是	是

html_tags_reference.htm

打印页面