第2章 HTML5中常用的交互元素
2.1 内容交互元素
在H5中，与元素属于新增的内容交互元素，主要用于文档的标题、细节、内容的交互显示。
2.1.1 detail元素
(详情)是HTML5中新增的一个标记，用于说明文档或某个细节信息的作用，常与(概要)元素搭配使用。
默认是不显示的，与summary配合使用时，单击summary标记后才显示details中设置的内容。
元素的常用属性以及描述：
- open：值open，用于控制summary元素是否显示，默认不可见。
- subject：值sub_id，用于设置元素对应的项目ID号。
- draggable：值true/false，用于是否可以拖动元素，默认不可拖动。
示例：交互元素details的使用
1.功能描述
创建新H5页面，加入details元素，通过不设置open和设置，查看结果并比较。
2.实现代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>交互元素<details>的使用</title><style>body {font-size: 12px;}span {font-weight: bold;}details {overflow: hidden;padding-left: 20px;position: relative;display: block;}details[open] {height: auto;}</style>
</head><body><span>隐藏注脚</span><details>本页面生成于2024-9-11</details><span>显示注脚</span><details open>本页面生成于2024-9-11</details>
</body></html>3.页面效果
2.1.2 summary元素
summary常包含于元素中，配合使用，元素说明文档的标题，
说明文档的详细信息。summary是details第一个子元素，二者经常同时出现在页面中。
实例：交互元素summary与details的结合使用
1.功能描述
新建页面中分别加入一个元素和一个元素，当显示summary元素内容时，其子元素details以字体加粗的形式展示在页面中。summary尽量放第一个位置。
2.实现代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>交互元素summary的使用</title><style>body {padding: 5px;font-size: 12px;}summary {font-weight: bold;}</style></head><body><details open>本页面生成于2024-9-11<summary>页面说明</summary>本页面生成于2024-9-12</details></body>
</html>3.页面效果
2.2 菜单交互元素
在H5交互元素中，除了内容交互元素外，使用较为频繁的是菜单交互元素，其中以menu与command两个元素为代表。
2.2.1 menu元素
menu是H5重新恢复使用并赋予了新的功能含义。常与
- 列表元素结合使用，用来定义一个列表式的菜单，其属性如下：
- autosubmit：true/false，true表示表单中的元素发生变化时会自动提交。
- label：任意字符，为菜单定义一个可见的标注。
- type：context toolbar list，定义菜单显示的类型，默认list，表示列表显示菜单中的选项。
案例：交互元素menu的使用
1.功能描述
新建H5页面，添加menu元素，在该元素中加入li列表元素，列表元素中放置与元素，用于展示图片与标题，最后通过样式代码，当用户将鼠标移至某个menu元素时，展示菜单中某选项被选中的效果。
2.代码实现
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>交互元素<menu>的使用</title><style>body {padding: 5px;font-size: 12px;}menu {padding: 0;margin: 0;display: block;border: 1px solid #365167;width: 222px;}menu li {list-style-type: none;padding: 5px;margin: 5px;width: 200px;}menu li:hover {border: 1px solid #7da2ce;background-color: #cfe3fd;}menu li img {clear: both;padding-right: 8px;}menu li span {display: inline-block;font-size: 13px;}</style>
</head><body><menu><li><img src="img/JS高级.jpg" alt="" /><span>JS高级程序设计</span></li><li><img src="img/并发编程.jpg" alt="" /><span>Java并发编程</span></li><li><img src="img/计算机网络.jpg" alt="" /><span>计算机网络</span></li><li><img src="img/实战.jpg" alt="" /><span>HTML5实战</span></li></menu>
</body></html>3.页面效果
这里忘记了浮动相关的内容，导致span无法垂直居中，还需复习后再完善！！！！！！
2.2.2 command元素(谷歌不支持了解即可)
定义各种类型的命令按钮，利用该标记的url属性可以添加图片，并且实现图片按钮效果，改变标记中的type属性值，还可以定义复选框或单选框按钮。属性如下：
- checked：值checked，类型定义为checkbox或radio是否选中
- disabled：disabled，按钮是否可用
- icon：url，按钮中图片地址
- label：command name，可显示于页面中按钮的名称
- radiogroup：radiogroup name，定义为radio是，设置群组
- type：checkbox command radio，按钮的类型，默认radio
与menu结合使用，可以实现弹出式下拉菜单，单击菜单的某个选项时，执行相应的操作。
实例：交互元素command与menu的结合使用
1.功能描述
新建H5页面，分别添加一个menu和两个command元素，并将command元素包含于menu中，当单击其中一个command元素时，弹出一个对话框，并显示对应操作的内容。
2.代码实现
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>交互元素command与menu的结合使用</title><style>body {padding: 5px;font-size: 12px;}menu {display: block;width: 30px;height: 50px;padding-left: 10px;padding-bottom: 10px;border: 1px solid #365167;}command {float: left;cursor: hand;width: 30px;margin: 5px;}#dialog {display: none;position: absolute;left: 25%;top: 9%;font-size: 13px;width: 320px;height: 150px;border: 3px solid #666;}#dialog.title {padding: 5px;background-color: #eee;height: 21px;line-height: 21px;}#dialog .title .fletf {float: left;}#dialog.content {padding: 50px;}</style><script>function commClick(strS) {document.getElementById("dialog").style.display = "block";var strContent = "正在操作<font color=red>" + strS + "</font>选项";document.getElementById("divTip").innerHTML = strContent;}</script>
</head><body><menu><command onclick="commClick('文件')">文件</command><command onclick="commClick('打开')">打开</command></menu><div id="dialog"><div class="title"><div class="fleft">提示</div><div class="fright">关闭</div></div><div class="content"><div class="divTip"></div></div></div>
</body></html>3.页面效果
由于主流浏览器不兼容，则无法正常显示，火狐可以查看，这里只做了解即可。
2.3 状态交互元素
增强用户UI体验，状态交互元素包括与元素
2.3.1 progress元素
用来表示某个任务完成的进度(进程)。
例如下载文件的进度值，可以通过该元素动态展示在页面中，展示的方式既可以使用整数1-100，也可以使用百分比10%-100%.
元素的属性：
- max：整数或者浮点数，设置完成时的值，表示总体工作量。
- value：整数或者浮点数，设置正在进行时的值，表示已完成的工作量。
元素设置的值value必须小于或者等于max的值，且两者都必须大于0。
示例：交互元素的使用
1.功能描述
创建新页面，增加progress元素和一个下载按钮，当单击按钮时，元素progress动态展示下载进度状态和百分比信息，下载结束时，提示下载完成！
2.实现代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>交互元素progress在下载中的使用</title>
</head><body><p id="pTip">开始下载</p><progress value="0" max="100" id="proDownFile"></progress><input type="button" value="下载" onclick="btnClick();" /><script>var intValue = 0;var intTimer;var objPro = document.getElementById('proDownFile');var objTip = document.getElementById("pTip");//定时事件function intervalHandler() {intValue++;objPro.value = intValue;if (intValue >= objPro.max) {clearInterval(intTimer);objTip.innerHTML = "下载完成！";} else {objTip.innerHTML = "正在下载" + intValue + "%";}}//下载按钮单击事件function btnClick() {intTimer = setInterval(intervalHandler, 100);}</script>
</body></html>3.页面效果
2.3.2 meter元素
用于在一定数量范围内的值，如投票中，候选人各占比例情况以及考试分数等。
meter元素的属性以及描述：以下属性全是数值
- value：展示的实际值，可以是浮点数，默认0
- min：展示的最小值，默认0
- max：展示的最大值，默认1
- low：最低值，必须小于等于min
- high：最高值，必须小于等于max
- optimum：最优值，必须在min与max之间
案例：交互元素meter的使用
1.功能描述
创建两个meter元素，通过设置不同的属性值，展示两个候选人的占票数比例，同时用span元素说明比例的百分数。
2.实现代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>交互元素meter的使用</title>
</head><body><p>共120人参与投票，明细如下：</p><p>张三：<meter value="0.3" optimum="1" high="0.6" low="0.1" max="1" min="0"></meter><span>30%</span></p><p>李四：<meter value="70" optimum="100" high="60" low="10" max="100" min="0"></meter><span>70%</span></p>
</body></html>3.页面效果
