HTML ＜menuitem＞标签

发布人：shili8 发布时间：2024-11-16 21:46 阅读次数：0

**HTML `` 标签**

`` 是 HTML 中的一个元素，用于定义菜单项。它是 `HTML5` 新增的元素之一，旨在提供一种标准化的方式来表示菜单项。

**语法**

html内容

* `value`: 必须指定的属性，用于定义菜单项的值。
* `label`: 可选的属性，用于定义菜单项的显示名称。
* `内容`: 菜单项的内容，可以是文本、图像或其他元素。

**示例**

html<menu>
 <menuitem value="新建" label="新建">
 <img src="icon-new.png" alt="新建">
 </menuitem>
 <menuitem value="打开" label="打开">
 <img src="icon-open.png" alt="打开">
 </menuitem>
 <menuitem value="保存" label="保存">
 <img src="icon-save.png" alt="保存">
 </menuitem>
</menu>

在这个例子中，我们定义了一个菜单，包含三个菜单项：新建、打开和保存。每个菜单项都有一个 `value` 属性和一个 `label` 属性，用于定义其值和显示名称。

**属性**

`` 元素支持以下属性：

* `value`: 必须指定的属性，用于定义菜单项的值。
* `label`: 可选的属性，用于定义菜单项的显示名称。
* `icon`: 可选的属性，用于定义菜单项的图标。
* `disabled`: 可选的属性，用于定义菜单项是否禁用。

**事件**

`` 元素支持以下事件：

* `click`: 当用户点击菜单项时触发。
* `mouseover`: 当用户鼠标悬停在菜单项上时触发。
* `mouseout`: 当用户鼠标离开菜单项时触发。

**示例代码**

html<menu>
 <menuitem value="新建" label="新建" icon="icon-new.png">
 <img src="icon-new.png" alt="新建">
 </menuitem>
 <menuitem value="打开" label="打开" disabled>
 <img src="icon-open.png" alt="打开">
 </menuitem>
 <menuitem value="保存" label="保存" icon="icon-save.png">
 <img src="icon-save.png" alt="保存">
 </menuitem>
</menu>

<script>
 document.addEventListener("DOMContentLoaded", function () {
 const menu = document.querySelector("menu");
 const menuitems = menu.querySelectorAll("menuitem");

 menuitems.forEach((menuItem) => {
 menuItem.addEventListener("click", function (event) {
 console.log(`菜单项 ${menuItem.value} 被点击`);
 });
 });
 });
</script>

在这个例子中，我们定义了一个菜单，包含三个菜单项：新建、打开和保存。我们使用 `querySelectorAll` 方法获取所有的 `` 元素，然后为每个元素添加一个 `click`事件监听器。当用户点击菜单项时，会输出一个消息到控制台。

**总结**

`` 是 HTML 中的一个元素，用于定义菜单项。它支持 `value`、`label` 和 `icon` 属性，以及 `disabled` 属性和 `click`、`mouseover` 和 `mouseout`事件。通过使用 `` 元素，可以创建一个标准化的菜单系统，使得开发者能够更容易地实现复杂的用户界面功能。

上一条：【雕爷学编程】Arduino动手做（138）---64位WS2812点阵屏模块8

下一条：【socket编程】TCP服务器、UDP服务器、本地套接字【C语言代码实现】

HTML ＜menuitem＞ 标签

HTML ＜menuitem＞标签