html5 menu标签的具体定义和html5menu标签的用法详细解析
html5 menu标签的定义和用法:
<menu> 标签定义命令的列表或菜单。
<menu> 标签用于上下文菜单、工具栏以及用于列出表单控件和命令。
HTML5 <menu> 标签实例
带有两个菜单按钮 ("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菜单列表在浏览器中显示效果和无序列表是相同的,在这一点上的功能也可以通过无序列表来实现。

运行结果:

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('您单击了我一下')" icon=""> </menuitem> </menu>html5 menu标签的代码解析:
<menu>标签用于上下文菜单、工具栏以及用于列出表单控件和命令;
上例<span>标签的contextmenu属性值即为<menu>属性id的值;
label属性设置的是菜单项的名字;
onclick属性设置点击菜单项的事件;
icon属性设置菜单项左侧小图标;
<menu>标签下可以有多个<menuitem>;
当然,menu属性不止这么多,本文章只是列举出了一些常用的属性。
运行结果如下:

html5 menu标签的提示和注释:
提示:请使用 CSS 来设置菜单列表的样式!
HTML 4.01 与 HTML5 之间的差异
在 HTML 4.01 中已弃用 <menu> 元素。
在 HTML5 中重新定义了 <menu> 元素。
HTML 与 XHTML 之间的差异
在 HTML 4.01 中,menu 元素不被赞成使用。
在 XHTML 1.0 Strict DTD 中,menu 元素不被支持。
本篇文章到这里就结束了,如果有什么问题,可以在下方提问
【小编的相关文章】
html sup和sub标签怎么用?html sup标签和sub标签的定义和用法实例
html5 details标签的作用是什么?<details>标签的使用方法介绍(附使用实例)
以上就是html5 menu标签的具体定义和html5menu标签的用法详细解析的详细内容,更多请关注php中文网其它相关文章!
本站内容来源于网络,如有侵权请与我们联系,我们会及时删除,我们深感抱歉!
注:本站所有信息仅供用于网络技术学习参考,学习中请遵循相关法律法规!
本文地址: https://v30.fanwenzhu.com/jiaob/cssm/6764.shtml
相关文章
热门TAG
win10 ecshop 主机 阿里云 解决 配置 C# C++ 解析 SQL语句 命令 Go语言 方法 CSS3 HTML5 CSS win7 MSSQL 服务器配置 IIS7.5 IIS7 IIS6 IIS CentOS 7 Linux oracle数据库 oracle phpcms discuz discuz教程最新文章
-
其中border-left决定了底部直
时间:2021-01-23
-
当你自己回头来看你写的
时间:2021-01-23
-
④格式标签 粗体:b/b 斜
时间:2021-01-23
-
我们直接看代码: !DOCTY
时间:2021-01-23
-
这里就是吐槽的IE6!) 图
时间:2021-01-23
-
假设我们的HTML代码如下:
时间:2021-01-23
-
那么使用 CSS3 新增的选择
时间:2021-01-23
-
scaleGlassRectangle.y
时间:2021-01-23
热门文章
-
可以加我的HTML5前端交流群111645711 CSS源码
时间:2021-01-15
-
就可以对子元素进行 3D 变形操作了
时间:2021-01-12
-
用css让一个容器水平垂直
时间:2021-01-12
-
而没有设置高度
时间:2021-01-19
-
canvas与html5实现视频截图成果
时间:2021-01-19
-
所以通常不需要发送
时间:2021-01-19
-
我们尝试一下更新一下HTML结构
时间:2021-01-23
-
scaleGlassRectangle.y
时间:2021-01-23
-
HTML5生拖放实例分析
时间:2021-01-12
-
在全局:root{ }伪类中定义了一个 CSS 变量
时间:2021-01-21
