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>
推荐教程：《html视频教程》
以上是html5页面交互元素有哪些的详细内容。更多信息请关注PHP中文网其他相关文章！
