html页面交互元素

1.details元素和summary元素

details元素用于描述文档或文档某个部分的细节。summary元素用于和details元素配合使用，

作为details元素的第一个子元素，用于为details定义标题。标题可见，点击标题，会显示或

隐藏details中的其他内容。

 

 以上是通过details元素summary元素实现的隐藏列表，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>博客</title>
</head>
<body>
<details>
    <summary>显示</summary>
    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ul>
</details>
</body>
</html>

2.progress元素

progress元素用于表示一个任务的完成进度，可用数字与百分比进行表示完成度。

progress元素有两个属性值，如下：

value：已经完成的工作量。

max：总共的工作量。

以上两个值都必须大于0，且value的值要小于或等于max的值

 以上效果是通过progress元素制作的一个任务进程进度条，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>博客</title>
</head>
<body>
<h1>任务进程</h1>
<progress value="50" max="100"></progress>
</body>
</html>

3.meter元素

该元素用于表示指定范围内的数值。

以下为该元素属性值：

属性 说明
high 定义度量的值位于哪个点被界定为高的值
low　 定义度量的值位于哪个点被界定为高的值
max 定义最大值，默认值为1
min 定义最小值，默认值为0
optimum 定义什么样的度量值是最佳的值
value 定义度量的值

 代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>博客</title>
</head>
<body>
<h1>任务进程</h1>
aaa:
<meter value="65" min="0" max="100" low="60" high="80" optimum="100"></meter>
<br>
bbb:
<meter value="80" min="0" max="100" low="60" high="80" optimum="100"></meter>
<br>
ccc:
<meter value="75" min="0" max="100" low="60" high="80" optimum="100"></meter>
<br>
</body>
</html>

 

posted @ 2021-12-25 14:30  Lhaoyu  阅读(212)  评论(0)  编辑  收藏  举报