您好,登录后才能下订单哦!
这篇文章主要介绍html5中有哪些页面交互元素,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
html5页面交互元素有:1、details,用来表示一段具体内容;2、summary;3、datagrid,用来控制客户端数据与显示;4、menu,用于交互菜单;5、command,用来处理命令按钮;6、progress;7、meter。
本教程操作环境:windows7系统、HTML5版、Dell G3电脑。
HTML5交互性元素:功能性的内容表达,会有一定的内容和数据的关联,是各种事件的基础。
details
:用来表示一段具体的内容,但是内容默认可能不显示,通过某种手段(如单击)与legend交互才会显示出来。
summary
:标签包含 details 元素的标题,"details" 元素用于描述有关文档或文档片段的详细信息。
datagrid
:用来控制客户端数据与显示,可以由动态脚本及时更新。
menu
:主要用于交互菜单(曾被废弃又被重新启用的元素)。
command
:用来处理命令按钮。
progress
:用于表示一个任务的完成进度。这个进度可以是不确定的,只是表示进度正在进行,但是不清楚还有多少工作量没有完成。也可以用0到某个最大数字(如100)之间的数字来表示准确的进度完成情况(如进度百分比) 属性值有两个: value:已经完成的工作量。 max:总共有多少工作量。 注意的是value和max属性的值必须大于0,且value的值要小于或等于max属性的值。
meter
:标签定义已知范围或分数值内的标量测量。也被称为 gauge(尺度)。
示例:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>HTML5中常用的交互元素</title> <script type="text/javascript"> function command_click(){ document.getElementById("show").innerHTML= "点击了打开command·"; } var intVal = 0; var intTimer; var objpro = document.getElementById('objpro'); var title = document.getElementById('mytitle'); function interval_handler(){ intVal++; objpro.value = intVal; if(intVal >= objpro.max){ clearInterval(intTimer); title.innerHTML = "下载完成"; }else{ title.innerHTML = "正在下载"+intVal+"%"; }} function btn_click(){ intTimer = setInterval(interval_handler,100); } </script> ------------------------------------------------------------------ <menu> <command onclick="command_click();"> 打开 </command> </menu> <div id="show"></div> </head> <body> <form> <input id="myCar" list="cars" > <datalist id="cars"> <option value="BMW"> <option value="Ford"> <option value="Volvo"> </datalist> </input> <hr><hr> <span>显示内容</span> <details id="detail" open="open"> 我被显示出来了 </details> <hr><hr> <details> <summary>HTML 5</summary> 欢迎使用 summary 标签 </details> <hr><hr> </form> <menu> <li> <img src="Chrome.png"> <span>Chrome浏览器</span> </li> <li> <img src="360.png"> <span>360浏览器</span> </li> <li> <img src="IE.png"> <span>IE浏览器</span> </li> </menu> <hr><hr> <menu> <command onclick="alert('command click');"> Click Me! </command> </menu> <hr><hr> <p id="mytitle">开始下载</p> <progress value="0" max="100" id="objpro"> </progress> <input type="button" value="下载" onclick="btn_click();"> <hr><hr> <p>120人参与投票,明细如下:</p> <p>张三: <meter value="0.3" optimum="1" high="0.9" low="1" max="1" min="0"></meter> <span>30%</span> </p> <p>李四: <meter value="70" optimum="100" high="90" low="10" max="100" min="0"></meter> <span>70%</span> </p> <hr><hr> </body> </html>
以上是“html5中有哪些页面交互元素”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。