HTML5文档中的页面交互元素(details、progress、meter)

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>
分享到 :

发表评论

登录... 后才能评论