登录  /  注册
首页 > web前端 > H5教程 > 正文

html5 menu标签的具体定义和html5menu标签的用法详细解析

寻∝梦
发布: 2018-08-23 17:40:41
原创
6782人浏览过

这边文章主要的讲述了html5 menu标签的定义和用法实例,有实例和实例结果在,这让我们学习的时候更加简单了,所以,请认真的阅读本篇关于html5 menu标签的文章吧

html5 menu标签的定义和用法:

标签定义命令的列表或菜单。

标签用于上下文菜单、工具栏以及用于列出表单控件和命令。

HTML5

标签实例

带有两个菜单按钮 ("File" 和 "Edit") 的工具栏,每个按钮都包含带有一系列选项的下拉列表:

<menu type="toolbar">
 <li>
 <menu label="File">
 <button type="button" onclick="file_new()">New...</button>
 <button type="button" onclick="file_open()">Open...</button>
 <button type="button" onclick="file_save()">Save</button>
 </menu>
 </li>
 <li>
 <menu label="Edit">
 <button type="button" onclick="edit_cut()">Cut</button>
 <button type="button" onclick="edit_copy()">Copy</button>
 <button type="button" onclick="edit_paste()">Paste</button>
 </menu>
 </li>
</menu>
登录后复制

HTML5中的menu标签的两种使用方法:

1.menu标签定义菜单列表

menu元素在HTML4.01中已不被赞成使用,在现在的HTML5中,menu元素已被重新定义,该元素中的列表项同样可使用 li 标签来标记。

menu标签定义菜单列表,菜单列表通常用于文本菜单,工具条和命令列表选项,当希望列出表单控件时可使用该标签。menu菜单列表在浏览器中显示效果和无序列表是相同的,在这一点上的功能也可以通过无序列表来实现。

tuyi.png

运行结果:

tuer.png

html5 menu标签的新属性:

  • label属性(定义菜单项的可见标记,常用于标记菜单内的嵌套菜单,语法:menu label="File")

  • type 属性(定义菜单显示的类型,默认值为 "list",语法:menu type="value")

  • list:默认值。规定一个列表菜单。一个用户可执行或激活的命令列表(li元素)。

  • toolbar:规定一个工具栏菜单。主动式命令,允许用户立即与命令进行交互。

  • contextmenu:规定一个上下文菜单,当用户右击元素时将显示上下文菜单。

2.HTML5的menu菜单标签

代码示例

<span contextmenu="myMenu">右击一下</span>
<menu type="context" id="myMenu">
    <menuitem label="单击一下" onclick="alert(&#39;您单击了我一下&#39;)" icon="">
    </menuitem>
</menu>
登录后复制

html5 menu标签的代码解析:

标签用于上下文菜单、工具栏以及用于列出表单控件和命令;

上例标签的contextmenu属性值即为

属性id的值;

label属性设置的是菜单项的名字;

onclick属性设置点击菜单项的事件;

icon属性设置菜单项左侧小图标;

标签下可以有多个

当然,menu属性不止这么多,本文章只是列举出了一些常用的属性。

运行结果如下:

tusan.png

html5 menu标签的提示和注释:

提示:请使用 CSS 来设置菜单列表的样式!

HTML 4.01 与 HTML5 之间的差异

在 HTML 4.01 中已弃用

元素。

在 HTML5 中重新定义了

元素。

HTML 与 XHTML 之间的差异

在 HTML 4.01 中,menu 元素不被赞成使用。

在 XHTML 1.0 Strict DTD 中,menu 元素不被支持。

本篇文章到这里就结束了,如果有什么问题,可以在下方提问

【小编的相关文章】

html sup和sub标签怎么用?html sup标签和sub标签的定义和用法实例

html5 details标签的作用是什么?

标签的使用方法介绍(附使用实例)

以上就是html5 menu标签的具体定义和html5menu标签的用法详细解析的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号