本节书摘来自异步社区《HTML5 开发实例大全》一书中的第1章，第1.12节,作者： 张明星 更多章节内容可以访问云栖社区“异步社区”公众号查看。
实例说明
在HTML 5中，< command >是一个新增的标记元素，功能是定义各种类型的命令按钮。利用该标记的“url”属性可以添加图片，并且实现图片按钮效果。另外，通过改变标记中的“type”属性值，可以定义复选框或单选框按钮。< command >元素包含的属性及描述信息如表1-2所示。
https://yqfile.alicdn.com/9cd88bb1ee7839fcedc0f3564bfd218293ceceb5.png" >< command >能够定义各种类型的按钮，例如，命令按钮、单选按钮、图片按钮，另外，也能够定义复选框。如果< command >元素与< menu >元素结合使用，可以在网页中实现弹出式的下拉菜单。当单击菜单中的某个选项时，将执行相应的操作。
在本实例的页面中，分别添加一个< menu >元素和两个< command >元素，并将< command >元素包含在< menu >中。当单击其中一个< command >元素时会弹出一个对话框，并且显示对应操作的内容。
注意
虽然各浏览器对HTML 5兼容性都进行了很好的支持，但毕竟不可能照顾到每个元素的全部属性，例如，< command >元素就有许多属性不能被浏览器支持，因此，所提到的功能也只是HTML 5元素所具有的功能，暂时还不能真正执行，但随着各大浏览器厂商对HTML 5的兼容性力度的加强，这种暂时不兼容的功能终将解决。具体实现
使用Dreamweaver创建一个名为“012.html”的文件，具体代码如下所示：
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>联合使用<menu>与<command></title> <style type="text/css"> body{ padding:5px; font-size:12px } menu{ padding-left:10px; padding-bottom:10px; display:block; border: solid 1px #365167; width:40px; height:50px } command{ float:left; margin:5px; width:30px; cursor:hand; } #dialog{ display:none; position:absolute; left:25%; top:9%; font-size:13px; width:320px; height:150px; border:#666 solid 3px } #dialog .title{ padding:5px; background-color:#eee; height:21px; line-height:21px } #dialog .title .fleft{ float:left } #dialog .title .fright{ float:right } #dialog .content{ padding:50px } </style> </head> <body> <menu> <command onClick="command_click('文件')">文件</command> <command onClick="command_click('打开')">打开</command> <command icon="Images/chrome.png" label="带图片的按钮"></command> </menu> <div id="dialog"> <div class="title"> <div class="fleft">提示</div> <div class="fright">关闭</div> </div> <div class="content"> <div id="divTip">中...</div> </div> </div> <script type="text/javascript"> function command_click(strS){ document.getElementsByName("command").disabled="disabled" document.getElementById("dialog").style.display="block"; var strContent="正在操作<font color=red> "+strS+" </font>选项"; document.getElementById("divTip").innerHTML=strContent; } </script> </body> </html>在上述代码中，< command >标记元素被包含在< menu >元素中，同时为了使元素显示手状的被单击效果，加入了如样式中粗体所示的代码；另外，当< command >元素被单击时，弹出一个显示操作内容的对话框，具体内容是JavaScript代码中的部分，如图1-22所示。
其实< command >元素除了可以触发onClick事件外，还可以通过icon属性设置按钮图片，例如下面的代码：
<command icon="Images/chrome.png" label="有图的按钮”></command>通过上述代码创建了一个带图片的< command >元素，并且指定了元素的名称是“有图的按钮”。另外，还可以通过JavaScript代码控制< command >元素的“disabled”属性，例如下面的代码：
< script type="text/j avascript"> …… document. getElement sByName("command").disabled="disabled"j …… </ script>上述JavaScript代码的功能是，禁止单击全部的< command >元素。通常将上述代码放置在单击< command >元素操作某项功能的后面，这样可以防止用户反复单击或提示用户按钮已经单击成功。
相关资源：敏捷开发V1.0.pptx