本文介绍了HTML中的三种交互元素：progress元素用于下载进度指示，meter元素展示度量值，以及details/summary元素实现可展开内容。通过实例展示了如何在网页中使用这些元素提升用户体验。
一、交互元素的相关概念
二、progress元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>progerss元素的使用</title>
</head>
<body>
下载进度：
<!-- ********* Begin ******* -->
<progress max=100 value=30 ></progress>
<!-- ********* End ********* -->
</body>
</html>三、meter元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>meter元素的使用</title>
</head>
<body>
显示度量值：<br/>
<!-- ********* Begin ******* -->
<meter value=60 max=100 min=0> </meter>
<br/>
<meter value=30 max=100 min=0 high=90 low=50></meter>
<!-- ********* End ********* -->
</html>四、details/summary元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>details/summary元素</title>
</head>
<body>
<!-- ********* Begin ******* -->
<details>
<summary>第三章</summary>
<p>3.1结构元素</p>
<p>3.2页面结点</p>
<p>3.3交互元素</p>
</details>
<!-- ********* End ********* -->
</body>
</html>
扫一扫
4639
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
