3.1 内容交互元素
在H5中，内容交互元素主要用于文档的标题、细节、内容的交互显示。
3.1.1 detail元素
detail元素是HTML5中新增的一个标记，用于说明文档或某个细节信息的作用，常与(概要)元素summary搭配使用。 默认是不显示的，与summary配合使用时，单击summary标记后才显示details中设置的内容。
detail元素的常用属性以及描述：
| 属性名称 | 值 | 描述 |
|---|---|---|
| open | open | 用于控制summary元素是否显示，默认不可见 |
| subject | sub_id | 用于设置元素对应的项目ID号 |
| draggable | true/false | 用于是否可以拖动元素，默认不可拖动 |
示例： 交互元素details的使用
功能描述 创建新H5页面，加入details元素，通过不设置open和设置，查看结果并比较。
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>detail交互元素</title>
</head>
<body>
<span>隐藏注脚</span>
<details>
本页面生成于2025年4月28日
</details>
<span>显示注脚</span>
<details open>
本页面生成于2025年4月28日
</details>
</body>
</html>
运行效果：
3.1.2 summary元素
summary是details第一个子元素，二者经常同时出现在页面中。
实例： 交互元素summary与details的结合使用
功能描述：
新建页面中分别加入一个元素和一个元素，当显示summary元素内容时，其子元素details以字体加粗的形式展示在页面中。summary尽量放第一个位置。
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>summary交互元素</title>
</head>
<body>
<details open>
本页面生成于2025年4月28日
<summary>页面说明</summary>
本页面生成于2025年4月28日
</details>
</body>
</html>
运行效果：
3.2 菜单交互元素menu
在H5交互元素中，除了内容交互元素外，使用较为频繁的是菜单交互元素。
3.2.1 menu元素
menu是H5重新启用的一个旧的标记。早在html2时menu元素就存在了，但在html4中被废弃了，而在html5中又重新被恢复并赋予了新的功能含义。它常于列表元素li结合使用，用来定义一个列表式的菜单.
menu元素的常用属性以及描述：
| 属性名称 | 值 | 描述 |
|---|---|---|
| autosubmit | true/false | true表示表单中的元素发生变化时会自动提交 |
| label | 任意字符 | 为菜单定义一个可见的标注 |
| type | context toolbar list | 定义菜单显示的类型，默认list，表示列表显示菜单中的选项 |
案例： 交互元素menu的使用
功能描述：
新建H5页面，添加menu元素，在该元素中加入li列表元素，列表元素中放置与元素，用于展示图片与标题，最后通过样式代码，当用户将鼠标移至某个menu元素时，展示菜单中某选项被选中的效果。
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>menu交互元素</title>
</head>
<body>
<menu>
<li>
<img src="../imgs/xiyouji.png" alt="" width="100px" height="130px"/>
<span>西游记</span>
</li>
<li>
<img src="../imgs/sanguo.png" alt="" width="100px" height="130px"/>
<span>三国演义</span>
</li>
<li>
<img src="../imgs/shuihu.png" alt="" width="100px" height="130px"/>
<span>水浒传</span>
</li>
<li>
<img src="../imgs/hongloumeng.png" alt="" width="100px" height="130px"/>
<span>红楼梦</span>
</li>
</menu>
</body>
</html>
运行效果：
3.3 meter元素
用于表示一定数量范围内的值，如投票中，候选人各占比例情况以及考试分数等。
meter元素的属性以及描述：
| 属性名称 | 值 | 描述 |
|---|---|---|
| value | 数量 | 展示的实际值，可以是浮点数，默认0 |
| min | 数量 | 展示的最小值，默认0 |
| max | 数量 | 展示的最大值，默认1 |
| low | 数量 | 最低值，必须小于等于min |
| high | 数量 | 最高值，必须小于等于max |
| optimum | 数量 | 最优值，必须在min与max之间 |
最优值 optimum 和 value 的不同决定了显示的颜色的不同。 绿色： 当value和optimum值在一个区间时，它就会呈现出绿色； 黄色： 当optimum在high和max之间的时候，value在low和high之间，它就会呈现出黄色； 红色： 当optimum在high和max之间的时候，value值在min和low之间时就会呈现出红色。
案例： 交互元素meter的使用
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>共120人参与投票，明细如下：</p>
<p>张三：
<meter min="0" low="3" high="6" max="9" optimum="2" value="3"></meter>
<span>20%</span>
</p>
<p>李四：
<meter min="0" low="3" high="6" max="9" optimum="2" value="6"></meter>
<span>30%</span>
</p>
<p>王五：
<meter min="0" low="3" high="6" max="9" optimum="2" value="8"></meter>
<span>50%</span>
</p>
</body>
</html>
运行效果：
小结：
页面中的交互操作是HTML5的一项重要的新增功能，本篇通过介绍HTML5的几个重要的交互元素的使用方法，可以进一步加深学员对HTML5元素的了解。
