标签在现代HTML中基本不能当工具栏用，因其无默认样式、不支持键盘导航、不可访问，且主流浏览器未实现原生上下文菜单支持；应改用或等语义化替代方案。
menu 标签在现代 HTML 中基本不能当工具栏用
<menu></menu> 标签语义上是“用户操作菜单”，但浏览器默认渲染极其简陋：只缩进、无 hover 效果、不支持键盘导航、点击无反馈。它既不是 <nav></nav>，也不等价于桌面应用的菜单栏（如 File/Edit），更不是移动端常见的底部工具栏。W3C 规范里明确说它“主要用于上下文菜单（需配合 contextmenu 属性）”，而主流浏览器至今未实现原生右键上下文菜单支持——所以直接写 <menu><li>保存</li></menu>，结果就是一串没样式、没交互、不可访问的纯文本。
替代方案：用语义正确 + 可控性强的组合
真正做工具栏，推荐三类组合，按场景选：
- 纯功能按钮组（无文字图标为主）→ 用
<div role="toolbar"> + <code><button></button>，显式声明角色，方便屏幕阅读器识别 - 带文字标签的操作栏（如编辑器顶部）→
<nav aria-label="编辑工具"></nav>+<button></button>或<a></a>，避免用<ul></ul>套<li>除非真需要列表语义 - 需要响应式折叠的工具栏 → 用
<header></header>或<section></section>包裹，配合 CSS Grid/Flex 控制布局，别依赖<menu></menu>的“自动换行”幻觉（它根本不会） - 必须加
role="toolbar"覆盖默认语义，否则 AT（辅助技术）会读成“菜单”，误导用户 - 每个子项必须是
<button></button>或带tabindex="0"的<span></span>，原生<li>不可聚焦、无法键盘触发 - CSS 里重置所有默认样式：
menu { display: flex; list-style: none; padding: 0; margin: 0; }，否则 Safari 会额外缩进 - JavaScript 补全键盘支持：监听
Enter和Space事件，手动触发点击逻辑
如果非要保留 menu 标签，必须手动接管全部行为
仅当项目强制要求保留 <menu></menu>（比如老系统迁移），才考虑补救：
容易被忽略的兼容性细节
<menu></menu> 在 Chrome 117+ 对 type="toolbar" 有实验性支持（需开启 flag），但 Firefox 和 Safari 完全忽略该属性；type="context" 则全平台无效。也就是说，靠 type 属性切模式这条路已经走不通。真正稳定的做法，是放弃标签名本身的意义，把 <menu></menu> 当作一个无默认样式的空容器来用——但它和 <div> 比毫无优势，反而增加语义混淆风险。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<p>工具栏的核心从来不是“用什么标签”，而是“是否可聚焦、是否可键盘操作、是否在焦点顺序中合理、是否对屏幕阅读器传达正确意图”。标签只是起点，后面每一步都得亲手填平。</p>
</div>
