menu与menuitem标签因浏览器支持差且被废弃，不推荐使用；应采用ul+li配合aria角色实现语义化、可访问的菜单结构。
HTML5 提供了更丰富的语义化标签来构建网页结构，但在实际开发中，menu 和 menuitem 这两个标签虽然被设计用于菜单场景，目前并不推荐在生产环境中使用，因为它们的浏览器支持有限且已被废弃或重新定义。
menu 标签的历史与现状
在早期 HTML5 草案中，menu 标签被用来定义用户命令菜单（如上下文菜单），配合 menuitem 表示具体的菜单项。但随着标准演进，该标签的实际用途被削弱。
- menu 曾支持 type="context"、type="toolbar" 等属性，但现在大多数浏览器已不再支持这些功能。
- 目前主流浏览器对 menu 的渲染行为不一致，部分当作普通块元素处理。
- WHATWG 已将 menu 视为“历史遗留”标签，不鼓励新项目使用。
menuitem 标签已被移除
menuitem 是一个完全未被广泛实现的元素，在现代 HTML 标准中已被删除。
- 没有主流浏览器默认支持 menuitem 元素的行为或样式。
- 使用它不会带来任何可访问性或语义优势。
- 尝试用 JavaScript 激活其功能会导致兼容性和维护问题。
推荐的语义化替代方案
为了实现真正语义化、可访问且跨浏览器兼容的菜单，应使用标准结构和 ARIA 角色。
立即学习“前端免费学习笔记（深入）”；
- 使用 nav 表示主导航区域，例如顶部导航栏。
- 使用 ul + li + a 构建清晰的列表型菜单结构。
- 通过 ARIA 属性增强语义，如 role="menu"、role="menuitem"、aria-haspopup、aria-expanded 等。
- 配合 JavaScript 实现下拉或上下文菜单交互时，确保键盘可访问性。
例如一个语义化的下拉菜单结构：
<nav aria-label="主菜单">
<ul role="menu">
<li role="none"><a href="/" role="menuitem">首页</a></li>
<li role="none">
<button aria-haspopup="true" aria-expanded="false" role="menuitem">
产品
</button>
<ul role="menu" hidden>
<li role="none"><a href="/prod1" role="menuitem">产品一</a></li>
</ul>
</li>
</ul>
</nav>
基本上就这些。虽然 menu 和 menuitem 听起来很合适，但现实是它们不可靠。坚持使用标准 HTML 列表结构加上 ARIA 才是实现语义化菜单的正确方式。不复杂但容易忽略。
