<menu>: The Menu element
<menu> HTML 元素在 HTML 规范中被描述为 <ul> 的语义替代，但浏览器将其视为（并通过可访问性树公开）与 <ul> 没有什么不同。它表示一个无序列表的项目（由 <li> 个元素表示）。
¥The <menu> HTML element is described in the HTML specification as a semantic alternative to <ul>, but treated by browsers (and exposed through the accessibility tree) as no different than <ul>. It represents an unordered list of items (which are represented by <li> elements).
Try it
属性
使用说明
¥Usage notes
<menu> 和 <ul> 元素均表示项目的无序列表。主要区别在于 <ul> 主要包含用于显示的项目，而 <menu> 用于交互项目。相关的 <menuitem> 元素已被弃用。
¥The <menu> and <ul> elements both represent an unordered list of items. The key difference is that <ul> primarily contains items for display, while <menu> was intended for interactive items. The related <menuitem> element has been deprecated.
注意：在 HTML 规范的早期版本中，
<menu>元素有一个额外的用例作为上下文菜单。此功能被认为已过时，并且不在规范中。¥Note: In early versions of the HTML specification, the
<menu>element had an additional use case as a context menu. This functionality is considered obsolete and is not in the specification.
示例
工具栏
¥Toolbar
在此示例中，<menu> 用于创建编辑应用的工具栏。
¥In this example, a <menu> is used to create a toolbar for an editing application.
HTML
<menu>
<li><button onclick="copy()">Copy</button></li>
<li><button onclick="cut()">Cut</button></li>
<li><button onclick="paste()">Paste</button></li>
</menu>
请注意，这在功能上与：
¥Note that this is functionally no different from:
<ul>
<li><button onclick="copy()">Copy</button></li>
<li><button onclick="cut()">Cut</button></li>
<li><button onclick="paste()">Paste</button></li>
</ul>
CSS
menu,
ul {
display: flex;
list-style: none;
padding: 0;
width: 400px;
}
li {
flex-grow: 1;
}
button {
width: 100%;
}
结果
¥Result
技术总结
规范
| Specification |
|---|
| HTML Standard # the-menu-element |
浏览器兼容性
BCD tables only load in the browser