HTML之交互标签

发布于:2022-10-27 ⋅ 阅读:(165) ⋅ 点赞:(0)

目录

details标签

progress标签

常用属性

meter标签 

常用属性


details标签

<details>
	<summary></summary>
</details>

       details元素用于描述文档或文档某个部分的细节。summary元素经常与details 元素配合使用,作为details 元素的第一个子元素,用于为details定义标题。在默认情况下,标题可见,不显示details中的内容;当用户点击标题时,会显示或隐藏details中的其他内容。

示图:

progress标签

<h2>项目正在进行中</h2>
<p><progress></progress></p> 
<h2>当前项目进度</h2>
<p><progress max="100" value="80"></progress> </p>

        progress标签是行内元素,不会独占一行,一般用来定义运行中的任务进度(进程)。如Windows系统中软件的安装、文件的复制等场景的进度。

常用属性

progress标签的常用属性有两个

1 value :已经完成的工作量。不设置此属性时,此进度条为“不确定”型,无具体进度信息,只是表示进度正在进行,但是不清楚还有多少工作量没有完成。
(2) max :总共有多少工作量。可以自行设置max 值。 value 的默认取值范围为 0.01~1 ,无 max 属性时,如果value 值为 0.5 则表示当前进度为 50% 。( value和max属性的值必须大于0 )

示图:

meter标签 

<h2>我的周考成绩</h2>
<p>
  第一周:<meter value="50" min="0" max="100" high="80" low="60" optimum="100"></meter>
  第二周:<meter value="70" min="0" max="100" high="80" low="60" optimum="100"></meter>
  第三周:<meter value="90" min="0" max="100" high="80" low="60" optimum="100"></meter>
</p>

         meter标签是行内元素,不会独占一行,一般用于表示指定范围内的数值。如磁盘使用情况、查询结果、周考成绩或投票比例等

常用属性

1value:定义度量的值。

(2min:定义最小值,默认值是 0。

(3max:定义最大值,默认值是 1。

(4high:定义度量的值位于哪个点被界定为高的值。

(5low:定义度量的值位于哪个点被界定为低的值。

(6optimum:定义什么样的度量值是最佳的值。如果该值高于high属性,则意味着值越高越好;如果该值低于low属性的值,则意味着值越低越好。

示图:

 

本文含有隐藏内容,请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到