web前端面试问题，HTML5 新标签progress 的用法

作者：System 时间：2024年08月23日分类：所有,html5 字数：606

HTML5 的 <progress> 标签用于表示一个进度条，通常用来显示任务的完成进度，如下载进度、加载时间等。

使用方法：




<progress value="50" max="100"> </progress>

在这个例子中，value 属性设定了进度条的当前值，max 属性设定了进度条的最大值。这将显示一个进度条，进度条的完成度为 50%，因为完成了 50% 的工作量。

CSS 样式可以用来美化进度条：




progress {
  width: 100%;
  height: 20px;
  color: #00ff00;
  background-color: #ff0000;
}

这段 CSS 将进度条的宽度设置为 100%，高度设置为 20px，颜色设置为绿色文字和红色背景。

HTML 和 CSS 结合使用：




<progress value="50" max="100" style="width: 100%; height: 20px; color: #00ff00; background-color: #ff0000;"> </progress>

在这个例子中，style 属性直接定义了进度条的样式，不需要额外的 CSS 文件。