HTML5文档中的页面交互元素（details、progress、meter）
HTML5中的details元素
details元素用于描述文档或文档某个部分的细节。summary元素经常与detail元素配合使用，作为details元素的第一个子元素，用于为details定义标题。标题是可见的，当用户点击标题的时候会显示或隐藏。我们来通过一个案例来看一下如何使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>details和summery元素的使用</title>
</head>
<body>
<details>
<summary>常见问题</summary>
<ul>
<li>付款不成功</li>
<li>售后服务不好</li>
</ul>
</details>
</body>
</html>常用来展开某些内容，具体的演示效果自行尝试。
HTML5中的progress元素
progress元素用于定义一个正在完成的进度条，这个进度条可以是不确定的，只是表示进度正在进行，但是不清楚还有多少工作量没有完成。progress元素常用的属性值有两个：
- value，已经完成的工作量。value的值要小于或等于max属性的值。
- max，总共有多少工作量。value和max属性的值必须大于0.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>progress元素的使用</title>
</head>
<body>
<strong>鳄鱼教程目前的文章数量</strong>
<p><progress value="40" max="100"></p> <!--进度条会显示40%-->
</body>
</html>HTML5中的meter元素
meter元素用于表示指定范围内的数值，比方说显示硬盘容量或者某个候选者的投票人数占总人数的比例，都可以使用meter元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>meter元素的使用</title>
</head>
<body>
<strong>成绩列表</strong>
<p>
小明<meter value="88" min="0" max="100" low="20" high="70" title="88">88</meter><br>
小红<meter value="99" min="0" max="100" low="20" high="70" title="99">99</meter><br>
小兰<meter value="55" min="0" max="100" low="60" high="30" title="55">55</meter><br>
</p>
</body>
</html>