HTML——那些自带交互特征的HTML元素（progress元素、）

关注

原创 2026-09-25 18:40:40 341 阅读 AI 写同款· GEO 优化 ›

KEIL 5.38如何手动安装ARM Compiler V5？完整配置流程分享本文详细介绍了在KEIL 5.38环境下手动安装和配置ARM Compiler V5（AC5）的完整流程，解决历史遗留项目的兼容性问题。从获取安装包、环境变量设置到KEIL集成配置，逐步指导开发者完成AC5的部署，并提供了常见错误排查和性能优化建议，帮助开发者高效维护基于C编译器的老项目。阅读详情

那些自带交互特征的HTML元素

5、务必使用`<progress>`元素实现进度条

在上传图片或者下载资源的时候，往往都会用百分比进度条来表示当前任务的效果。

此时，千万不要花费大量的时间和代码去模拟，浏览器提供了原生的HTML元素，样式自定义方便，兼容性良好，且语义一级棒。

这个元素就是<progress>元素。

5.1、`<progress>`元素的基本特性

<progress>元素的使用方法非常简单，使用max属性设置进度范围，使用value属性值表示当前进度，就会显示对应的进度效果，例如：
在这里插入图片描述
此时效果如图所示。

如果我们没有设置value属性，则进度条进入不确定态，样式表现为循环等待状态。操作系统不同，浏览器不同，等待效果的样式也会有所不同，例如在Chrome 118Windows系统下，会看到一个胶囊一样的小色块反复横移，如图所示。

在这里插入图片描述
此状态会匹配CSS：indeterminate伪类，我们可以据此对<progress>元素的不确定态进行样式自定义，这在下一节会有说明。

DOM对象属性，<progress>元素有4个专属的DOM对象属性，分别是max、value、position和labels。其中：

max指最大值。若缺省，则进度值范围是0.0～1.0；若设置成max=“100”，则进度值范围是0～100。
value表示当前进度值。
position是只读属性，表示当前进度比例，计算值等于value/max，如果是不确定态，则position属性的值是-1。
labels也是只读属性，得到的是指向该<progress>元素的<label>元素合集。例如，有如下所示的HTML代码：

执行下面的JavaScript代码后，可以在控制台看到图所示的运行结果。

5.2、`<progress>`元素的样式自定义

由于默认的<progress>元素样式往往不是业务需要的，因此我们需要进行额外的样式自定义，此时参考下面的代码进行设置就可以了。

在这里插入图片描述
上述代码的效果如图所示。

如果同时希望对不确定态的进度条元素进行样式自定义，则可以使用：indeterminate及背景图像动画来模拟原生的水平来回移动效果，参考CSS代码如下（在上述自定义CSS代码的基础上新增）：
在这里插入图片描述
上述代码的效果如图所示。

以上所有代码和截图效果你都可以通过在浏览器中输入地址https://www.htmlapi.cn/3/5-1.html访问来体验。

6、务必使用`<meter>`元素显示密码强度

<meter>元素和<progress>元素类似，都是特定场景专用的HTML元素，非常适合用来实现图所示的密码强度提示效果。

在这里插入图片描述
无论是跟随强度的色值变化，还是弱、中、强的文字提示，都可以仅通过CSS方法实现，无须使用JavaScript代码去控制DOM元素的色值与尺寸变化。

在具体介绍如何实现之前，我们先了解一下<meter>元素的基本特性和美化技巧。

6.1、`<meter>`元素的基本特性

单词meter直译意思是“计量器”“计量表”，因此，在Web中，任何与丈量相关且需要分阶段提示的场景都非常适合使用<meter>元素。

例如，汽车油箱剩余油量、降雨量、风度、温度、游戏中人物角色的血量等。

先看下面一段代码：
在这里插入图片描述
此时，在Chrome浏览器下就会有图所示的效果（不同的操作系统和不同版本的Chrome下的效果可能会有所不同），从上往下进度部分的颜色分别是红、黄、绿。

上述示意代码中出现了6个HTML属性，正好涵盖了<meter>元素所有的常用属性。

属性简介

min和max属性表示数值范围，默认为0或1。也就是说，如果min属性不做设置，则默认为0；如果max属性不做设置，则默认为1。
value表示当前的值，默认为0。
low和high是比较特殊的HTML属性，目前仅出现在<meter>元素上，表示警戒值，其中low表示过低警戒值，high表示过高警戒值。

但是，大家务必注意，是过低还是过高、是否需要警戒值还需要一个属性进行判定，那就是optimum属性。

optimum属性表示最佳值，用来决定过低值和过高值是正常还是属于异常，这个属性很重要，也是学习<meter>元素的难点。

对optimum属性的作用表现描述如下。

如果optimum属性值在low和high之间，则说明low和high都是警戒值，只有在这个区间范围内的值才是正常的，因此，最终的色值状态只有两个，即橙色警戒和绿色正常。
代码示意：

效果如图所示，最多只会出现两种颜色。
如果optimum属性值比low小，则说明low不是警戒值，而是推荐值，也就是值越小安全性反而越高，此时，low-high之间的范围就属于警戒范围，而超过high的值就属于危险范围了。
于是，最终<meter>元素可以有3段色值状态，HTML代码示意如下：

效果如图所示，出现了三种颜色。
如果optimum属性值比high大，也会出现3段色值状态，此时，大于high的值会被认为是正常的，因此表现为绿色，这个效果就是一开始提到的密码强度对应的效果，代码示意：

效果如图所示，依次出现了红、黄、绿三种颜色。

回到一开始提到的密码强度效果，由于密码强度越强越好，因此，很显然需要设置optimum属性值比high大。