A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://developer.cdn.mozilla.net/zh-CN/docs/Web/HTML/Reference/Elements/menu below:

<menu>ï¼šèœå•å…ƒç´ - HTMLï¼ˆè¶…æ–‡æœ¬æ ‡è®°è¯è¨€ï¼‰ | MDN

<menu>:菜单元素

Baseline Widely available

<menu> HTML 元素在 HTML 规范中被描述为 <ul> 的语义替代,但浏览器将其视为与 <ul> 没有区别(并通过无障碍树暴露)。它表示一个无序列表(由 <li> 元素表示)。

尝试一下
<div class="news">
  <a href="#">NASA’s Webb Delivers Deepest Infrared Image of Universe Yet</a>
  <menu>
    <li><button id="save">Save for later</button></li>
    <li><button id="share">Share this news</button></li>
  </menu>
</div>
.news {
  background-color: bisque;
  padding: 1em;
  border: solid thin black;
}

menu {
  list-style-type: none;
  display: flex;
  padding: 0;
  margin-bottom: 0;
  gap: 1em;
}
属性

这个元素只包含全局属性。

使用说明

<menu> 和 <ul> 元素都用于表示无序列表。它们的关键区别在于,<ul> 主要用于显示内容,而 <menu> 则用于交互式内容。

备注: 在早期版本的 HTML 规范中,<menu> 元素还有一个额外的用例,即作为上下文菜单。此功能被认为已过时,并且不在规范中。

示例 工具栏

在这个示例中,使用 <menu> 元素创建了一个编辑应用程序的工具栏。

HTML
<menu>
  <li><button onclick="copy()">复制</button></li>
  <li><button onclick="cut()">剪切</button></li>
  <li><button onclick="paste()">粘贴</button></li>
</menu>

请注意,这在功能上与以下内容没有区别:

<ul>
  <li><button onclick="copy()">复制</button></li>
  <li><button onclick="cut()">剪切</button></li>
  <li><button onclick="paste()">粘贴</button></li>
</ul>
CSS
menu,
ul {
  display: flex;
  list-style: none;
  padding: 0;
  width: 400px;
}

li {
  flex-grow: 1;
}

button {
  width: 100%;
}
结果 技术概要 规范 浏览器兼容性 参见

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4