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