<menu>标签在HTML5中仅适用于上下文菜单，不可用于普通导航或工具栏；其type="toolbar"模式无默认样式、无障碍支持差，应改用<div role="toolbar">或<nav><ul>等语义化替代方案。
menu 标签在现代 HTML 中基本不可用
直接说结论：<menu> 标签在 HTML5 中已被重新定义为“上下文菜单”（需配合 contextmenu 属性），**不是用来写普通导航或命令列表的**。你如果照着旧教程用它写侧边栏、工具栏或操作按钮，浏览器不会报错，但语义错误、无障碍支持差、CSS 默认样式极弱，且大多数屏幕阅读器会忽略其结构。
为什么 menu 不适合做命令列表
HTML5 规范中，<menu> 仅支持两种模式：toolbar（需显式声明 type="toolbar"）和 context（右键菜单）。但现实是：
-
type="toolbar"在所有主流浏览器中**无默认样式、无键盘焦点逻辑、不触发任何 ARIA role 映射** - 即使写了
<menu type="toolbar"><li><button>保存</button></li></menu>，它也不会被识别为工具栏（role="toolbar"不自动添加） - WAI-ARIA 实践指南明确建议：**用
<div role="toolbar">或<nav>+<ul>替代**
替代方案：用语义正确且可用的组合
要实现带按钮、快捷键提示、可聚焦、支持键盘导航的命令列表，推荐以下组合：
场景一：顶部/侧边功能栏（如编辑器工具栏）
立即学习“前端免费学习笔记（深入）”；
<div role="toolbar" aria-label="文档操作"> <button aria-label="加粗 Ctrl+B"><span aria-hidden="true">B</span></button> <button aria-label="斜体 Ctrl+I"><span aria-hidden="true">I</span></button> </div>
场景二：上下文右键菜单（真正需要 <menu> 的唯一合理场景）
<div contextmenu="my-menu">右键试试</div> <menu type="context" id="my-menu"> <menuitem label="复制" onclick="copy()"></menuitem> <menuitem label="粘贴" onclick="paste()"></menuitem> </menu>
注意：<menuitem> 已被移出标准，Chrome/Firefox 实际只支持部分属性，**生产环境应改用自定义弹层 + role="menu" + role="menuitem"**。
容易被忽略的兼容性细节
哪怕你坚持用 <menu type="toolbar">，也得手动补全这些才真正可用：
- 必须加
role="toolbar"（否则辅助技术无法识别） - 内部按钮需有
tabindex="0"或原生可聚焦（如<button>），否则键盘无法到达 - 需用 JS 实现
ArrowLeft/ArrowRight导航逻辑——浏览器不提供默认 toolbar 键盘行为 -
<menu>不支持disabled属性，禁用项得靠aria-disabled="true"+ CSS 灰色样式
真正省心又合规的做法，是放弃 <menu>，用 <div role="toolbar"> 或 <nav> 起手，再按需增强交互与语义。
