1、progress元素
progress元素用于定义运行或下载中的进度或进程，经常与javascript脚本一起使用显示耗费时间的函数的进度。
progress元素的属性值有三个，具体说明如下：
min：进度条的最小值
max：进度条的最大值
value：进度条的当前值
下面插入一个案例：
<!DOCTYPE HTML> <html> <head> <title>Page Title</title> <Meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <Meta name="description" content="Description" /> <link rel="stylesheet" href="Stylesheet Location" type="text/css" /> </head> <body> <header> <nav> </nav> </header> <h1>隐形的翅膀</h1> <p>每一次我都在徘徊孤独中坚强 每一次计算很受伤也不闪泪光</p> <p>我知道 我有一双隐形的翅膀 带我飞 飞过绝望</p> 单击统计网友喜欢度：<input type="button" value="统计" onClick="Btn_Click()" /><br/><br/> <span id="pTip">统计进度（喜欢度）：</span> <progress id="objprogress" min="0" max="10" value="8">正在统计。。。</progress> <!-- content goes here --> <footer> </footer> <script type="text/javascript"> var intValue=0; var intTimer; var objPro=document.getElementById("objprogress"); var objTip=document.getElementById("pTip"); function Interval_handler(){ intValue++; if(intValue>=objPro.max){ clearInterval(intTimer); objTip.innerHTML="统计完成"; objPro.value=8; }else{ objPro.value=intValue; objTip.innerHTML="正在统计"+intValue+"%"; } } function Btn_Click(){ intTimer=setInterval(Interval_handler,1000); } </script> </body> </html>
2、meter元素
meter元素定义度量衡，表示指定范围内的数值。例如磁盘的使用量、投票人数、投票分数以及上传文档的等级评分等
meter元素常用属性：
max：定义最大值，默认值为1
min：定义最小值，默认值为0
low：定义度量的值位于哪个点，被界定为低的值
high：定义度量位于哪个点，被定义为高的值
optimum：定义什么样的值是最佳的值，如果该值高于high属性则表示值越高越好
value：定义度量的值
注：目前IE浏览器并不支持这个元素
飞鸟和鱼:<meter value="8" max="10" min="0" high="5" low="3" optimum="6" title="5分">5</meter >
3、details元素和summary元素
details元素用来描述文档或者文档某个部分的细节，summary元素包含details元素的标题。两个元素配合使用可以为details定义标题，标题是可见的，单击标题时就会显示details的内容。details的open属性定义details元素是否可见，默认情况下为false，如果希望一打开页面就显示details元素隐藏的内容可以设置open=“true”。
示例代码：
<details open="true"> <summary>日记分类</summary> <ul> <li><a href="#">好贴分享</a></li> <li><a href="#">个人日记</a></li> <li><a href="#">校园风景</a></li> <li><a href="#">星座命运</a></li> </ul> </details> <details> <summary>照片展览</summary> <ul> <li><a href="#">查看风景</a></li> <li><a href="#">查看动物</a></li> <li><a href="#">查看人物</a></li> </ul> </details>
注：目前只有 Chrome 和 Safari 6 支持 <details> 标签。
4、menu元素
menu元素定义菜单列表，如果用户希望列出表单中的控件可以使用该元素。它是HTML5重新启用的一个旧标记，常常和li元素结合使用，来定义一个列表式菜单
menu元素包含三个属性：
autosubmit：如果该值为true，表示表单控件改变时自动提交
label：为表单定义一个可见的标注
type：定义哪种类型的表单，其值包括list（默认）、context和toolbar
具体用法：http://www.w3school.com.cn/tags/tag_menu.asp
5、command元素
HTML5新增加的元素，表示能够调用的命令，并且用户可以定义命令按钮，如单选按钮、复选按钮等。只有当commend元素位于menu元素中时该元素才是可见的，否则不会显示这个元素，但是可以用它规定键盘快捷键。以下是它的属性：
checked：定义是否被选中，仅适用于radio和checkBox类型
disabled：定义command是否可用
icon：定义作为command来显示的图像URL
label：为command定义可见的label
radiogroup：定义command所属的组名，仅在类行为rado时使用
typ：定义该command元素的类型，它的值包括checkBox、command（默认）和radio
具体用法：http://www.w3school.com.cn/tags/tag_command.asp
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
