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

鳄鱼君

发表文章数:642

热门标签

,

Vieu四代商业主题

高扩展、安全、稳定、响应式布局多功能模板。

¥69 现在购买
首页 » HTML » 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>

未经允许不得转载:作者:鳄鱼君, 转载或复制请以 超链接形式 并注明出处 鳄鱼君
原文地址:《HTML5文档中的页面交互元素(details、progress、meter)》 发布于2020-04-07

分享到:
赞(1) 赏杯咖啡

评论 抢沙发

2 + 8 =


文章对你有帮助可赏作者一杯咖啡

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.6主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册