PHP小码农

Appearance

menu 菜单列表 ​

<menu> 标签用于创建交互式菜单或工具栏。在 HTML5.2 中，<menu> 被重新引入，语义上表示一组命令（commands）。配合 <li> 元素来定义菜单项。

前置知识

阅读本节前，建议先了解：dl / dt / dd 定义列表

基础概念 ​

<menu> 在早期的 HTML 中用于创建上下文菜单（后被废弃）。在 HTML5.2 中，<menu> 被重新定义为交互式菜单的容器，表示一组用户可以执行的命令。它通常与 <button> 或 <a> 等交互元素配合使用。

浏览器支持

<menu> 的语义化用法（作为命令菜单）在现代浏览器中的支持有限。目前大多数项目使用 <nav> + <ul> 来实现导航菜单。<menu> 更适合用于语义化标记上下文菜单或工具栏。

语法 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>menu 示例</title>
</head>
<body>
  <!-- 简单工具栏 -->
  <menu>
    <li><button type="button" onclick="document.execCommand('bold')">加粗</button></li>
    <li><button type="button" onclick="document.execCommand('italic')">斜体</button></li>
    <li><button type="button" onclick="document.execCommand('underline')">下划线</button></li>
  </menu>
</body>
</html>

详细说明 ​

版本状态说明
HTML4存在用于创建上下文菜单（type="context"）
HTML5 早期废弃<menu> 被标记为废弃
HTML5.2重新引入作为命令菜单容器重新定义
特性<menu><ul>
语义交互式命令菜单无序列表
用途工具栏、上下文菜单信息列表、导航
子元素<li><li>
典型场景编辑工具栏导航链接、特性列表
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>menu type 属性</title>
</head>
<body>
  <!-- type="toolbar"：工具栏 -->
  <menu type="toolbar" label="文本编辑">
    <li><button>B</button></li>
    <li><button>I</button></li>
    <li><button>U</button></li>
  </menu>

  <!-- type="context"：上下文菜单（浏览器支持有限） -->
  <menu type="context" id="context-menu">
    <li><button>复制</button></li>
    <li><button>粘贴</button></li>
    <li><button>删除</button></li>
  </menu>
</body>
</html>

不推荐用于导航

大多数情况下，导航菜单应使用 <nav> + <ul> 的组合，而非 <menu>。

html
<!-- 推荐：使用 nav + ul 实现导航 -->
<nav>
  <ul>
    <li><a href="/">首页</a></li>
    <li><a href="/about">关于</a></li>
  </ul>
</nav>

<!-- 不推荐：使用 menu 实现导航 -->
<menu>
  <li><a href="/">首页</a></li>
  <li><a href="/about">关于</a></li>
</menu>

实战示例 ​

简易文本编辑工具栏 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>编辑工具栏</title>
  <style>
    body { max-width: 680px; margin: 0 auto; padding: 2rem 1rem; font-family: sans-serif; }
    menu[type="toolbar"] {
      list-style: none;
      padding: 0.5rem;
      margin: 0;
      background: #f0f0f0;
      border: 1px solid #ddd;
      border-radius: 4px;
      display: flex;
      gap: 0.25rem;
    }
    menu[type="toolbar"] button {
      padding: 0.5rem 1rem;
      border: 1px solid #ccc;
      border-radius: 3px;
      background: white;
      cursor: pointer;
      font-weight: bold;
    }
    menu[type="toolbar"] button:hover {
      background: #e0e0e0;
    }
    #editor {
      min-height: 200px;
      border: 1px solid #ddd;
      border-top: none;
      padding: 1rem;
      margin: 0;
    }
  </style>
</head>
<body>
  <menu type="toolbar" label="文本编辑工具栏">
    <li><button type="button"><strong>B</strong></button></li>
    <li><button type="button"><em>I</em></button></li>
    <li><button type="button"><u>U</u></button></li>
  </menu>
  <div id="editor" contenteditable="true">
    <p>在此输入文本，然后使用工具栏按钮格式化。</p>
  </div>
</body>
</html>

注意事项 ​

  • <menu> 的浏览器支持有限，type="context" 几乎不被支持
  • 推荐使用 <nav> + <ul> 实现导航菜单
  • <menu> 更适合用于语义化标记工具栏或命令列表

最佳实践 ​

  1. 工具栏用 menu：编辑器工具栏等命令列表
  2. 导航用 nav + ul：页面导航使用更标准的语义标签
  3. 考虑兼容性：<menu> 的语义支持有限，需权衡使用

下一节

继续学习：a 标签基础

参考链接 ​