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>
声明:1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!