HTML进度条怎么制作？<progress>标签怎么使用？

猿友 2021-04-26 17:29:31 浏览数 (3981)

在使用各类软件时我们经常可以看到各类的进度条，进度条可以让我们更直观的获取当前的进度，那么 HTML 中怎么使用<progress>标签作出进度条效果呢？W3Cschool 小编今天就来和大家分享一下。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<title>HTML进度条怎么制作 - w3cschool.cn</title></head>
<body>
   <p>进度：</p>
   <progress value="40" max="100"></progress>
</body>
</html>

仅需要使用一个标签就可以实现进度条了，使用value的数值可以控制进度条的长度，max的数值控制最大长度。

效果如下：

HTML进度条

HTML进度条怎么制作就为大家介绍到这里了，小伙伴们可以自己实践一下，按自己的需求修改代码中的数值，就能达到自己想要的进度条效果了，希望能对各位有所帮助。