当前位置:知识文库 ❯ 图文

HTML表单：HTML progress进度条详解 - 用法示例与样式自定义

教程简介

<progress> 是 HTML5 引入的行内元素，用于显示任务的完成进度。无论是文件上传、表单填写、软件安装还是数据处理，进度条都是向用户反馈任务进展状态的重要界面元素。<progress> 元素提供了语义化的方式来表示进度，浏览器会以原生进度条的形式渲染它，同时辅助技术也能正确识别并朗读进度信息。

本教程将详细介绍 <progress> 元素的使用方法、value 和 max 属性、确定与不确定进度条的区别、样式自定义，以及实际开发中的应用技巧。

核心概念

progress 元素

<progress> 元素用于显示任务的完成进度。它有两种状态：

确定进度：已知当前进度和总进度，显示具体百分比
不确定进度：只知道任务在进行中，但不知道具体进度

核心特性

语义化：明确表示这是一个进度指示器
原生渲染：浏览器以原生进度条样式渲染
可访问性：屏幕阅读器可以朗读进度百分比
两种状态：确定进度和不确定进度

progress 与 meter 的区别

对比项	progress	meter
语义	任务完成进度	已知范围内的度量值
适用场景	上传、下载、安装等任务	磁盘使用率、分数、温度等
值的含义	当前完成的量	当前测量的值
不确定状态	支持（不设 value）	不支持
阈值概念	无	有 low/high/optimum

语法与用法

基本语法

代码示例

<!-- 确定进度 -->
<progress value="当前值" max="最大值"></progress>

<!-- 不确定进度 -->
<progress></progress>

progress 元素属性

属性	值类型	必填	描述
`value`	浮点数	否	当前进度值，省略则表示不确定进度
`max`	正浮点数	否	进度的最大值，默认为 1.0

属性规则

规则一：value 的取值范围为 0 到 max
规则二：max 必须为正数，默认值为 1.0
规则三：如果 value 大于 max，则按 max 处理
规则四：省略 value 属性时，进度条显示为不确定状态（动画条纹）
规则五：value 和 max 都应该是有效的浮点数

代码示例

示例 1：基础进度条

代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>基础进度条</title>
  <style>
    body {
      font-family: "Microsoft YaHei", sans-serif;
      max-width: 600px;
      margin: 40px auto;
      padding: 20px;
      background: #f5f7fa;
    }
    .demo-section {
      background: #fff;
      padding: 24px;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
      margin-bottom: 20px;
    }
    h2 { margin-top: 0; color: #2c3e50; font-size: 18px; }
    .progress-group {
      margin-bottom: 16px;
    }
    .progress-label {
      display: flex;
      justify-content: space-between;
      margin-bottom: 6px;
      font-size: 14px;
      color: #555;
    }
    .progress-value {
      font-weight: 700;
      color: #4a90d9;
    }
    progress {
      width: 100%;
      height: 20px;
      border: none;
      border-radius: 10px;
      overflow: hidden;
    }
    /* Webkit 浏览器样式 */
    progress::-webkit-progress-bar {
      background: #e0e0e0;
      border-radius: 10px;
    }
    progress::-webkit-progress-value {
      background: linear-gradient(90deg, #4a90d9, #357abd);
      border-radius: 10px;
      transition: width 0.3s ease;
    }
    /* Firefox 样式 */
    progress::-moz-progress-bar {
      background: linear-gradient(90deg, #4a90d9, #357abd);
      border-radius: 10px;
    }
    .hint {
      margin-top: 12px;
      font-size: 13px;
      color: #888;
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <h1>基础进度条</h1>

  <div class="demo-section">
    <h2>确定进度</h2>

    <div class="progress-group">
      <div class="progress-label">
        <span>文件上传</span>
        <span class="progress-value">30%</span>
      </div>
      <progress value="30" max="100"></progress>
    </div>

    <div class="progress-group">
      <div class="progress-label">
        <span>系统安装</span>
        <span class="progress-value">75%</span>
      </div>
      <progress value="75" max="100"></progress>
    </div>

    <div class="progress-group">
      <div class="progress-label">
        <span>数据同步</span>
        <span class="progress-value">100%</span>
      </div>
      <progress value="100" max="100"></progress>
    </div>

    <div class="progress-group">
      <div class="progress-label">
        <span>默认 max=1.0</span>
        <span class="progress-value">0.7</span>
      </div>
      <progress value="0.7"></progress>
    </div>
  </div>

  <div class="demo-section">
    <h2>不确定进度</h2>
    <div class="progress-group">
      <div class="progress-label">
        <span>正在处理中...</span>
        <span class="progress-value">等待中</span>
      </div>
      <progress></progress>
    </div>
    <p class="hint">
      不设置 value 属性时，进度条显示为不确定状态（动画条纹），<br>
      表示任务正在进行但进度未知。
    </p>
  </div>
</body>
</html>

示例 2：动态进度条

代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动态进度条</title>
  <style>
    body {
      font-family: "Microsoft YaHei", sans-serif;
      max-width: 600px;
      margin: 40px auto;
      padding: 20px;
      background: #f5f7fa;
    }
    .card {
      background: #fff;
      padding: 24px;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
      margin-bottom: 20px;
    }
    h2 { margin-top: 0; color: #2c3e50; font-size: 18px; }
    progress {
      width: 100%;
      height: 24px;
      border: none;
      border-radius: 12px;
      overflow: hidden;
    }
    progress::-webkit-progress-bar {
      background: #e0e0e0;
      border-radius: 12px;
    }
    progress::-webkit-progress-value {
      background: linear-gradient(90deg, #27ae60, #2ecc71);
      border-radius: 12px;
      transition: width 0.3s ease;
    }
    progress::-moz-progress-bar {
      background: linear-gradient(90deg, #27ae60, #2ecc71);
      border-radius: 12px;
    }
    .progress-info {
      display: flex;
      justify-content: space-between;
      margin-top: 8px;
      font-size: 14px;
      color: #555;
    }
    .percent {
      font-weight: 700;
      color: #27ae60;
    }
    .btn-group {
      display: flex;
      gap: 10px;
      margin-top: 16px;
    }
    button {
      padding: 8px 20px;
      border: none;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s;
    }
    .btn-start { background: #27ae60; color: #fff; }
    .btn-start:hover { background: #219a52; }
    .btn-start:disabled { background: #95a5a6; cursor: not-allowed; }
    .btn-reset { background: #e0e0e0; color: #333; }
    .btn-reset:hover { background: #d0d0d0; }
    .status {
      margin-top: 12px;
      padding: 10px;
      border-radius: 6px;
      font-size: 14px;
      text-align: center;
    }
    .status.running { background: #e8f8ef; color: #27ae60; }
    .status.done { background: #d4edda; color: #155724; }
  </style>
</head>
<body>
  <h1>动态进度条</h1>

  <div class="card">
    <h2>文件上传模拟</h2>
    <progress id="uploadProgress" value="0" max="100"></progress>
    <div class="progress-info">
      <span id="uploadStatus">等待开始</span>
      <span class="percent" id="uploadPercent">0%</span>
    </div>
    <div class="btn-group">
      <button type="button" class="btn-start" id="startBtn" onclick="startUpload()">开始上传</button>
      <button type="button" class="btn-reset" onclick="resetUpload()">重置</button>
    </div>
    <div class="status" id="statusMsg"></div>
  </div>

  <script>
    let timer = null;
    const progressBar = document.getElementById('uploadProgress');
    const percentText = document.getElementById('uploadPercent');
    const statusText = document.getElementById('uploadStatus');
    const startBtn = document.getElementById('startBtn');
    const statusMsg = document.getElementById('statusMsg');

    function startUpload() {
      startBtn.disabled = true;
      statusText.textContent = '上传中...';
      statusMsg.className = 'status running';
      statusMsg.textContent = '正在上传文件，请稍候...';

      timer = setInterval(() => {
        let current = progressBar.value;
        if (current >= 100) {
          clearInterval(timer);
          timer = null;
          statusText.textContent = '上传完成！';
          percentText.textContent = '100%';
          startBtn.disabled = false;
          statusMsg.className = 'status done';
          statusMsg.textContent = '文件上传成功！';
          return;
        }
        // 模拟不均匀的上传速度
        const increment = Math.random() * 8 + 1;
        current = Math.min(100, current + increment);
        progressBar.value = current;
        percentText.textContent = Math.round(current) + '%';
      }, 200);
    }

    function resetUpload() {
      if (timer) {
        clearInterval(timer);
        timer = null;
      }
      progressBar.value = 0;
      percentText.textContent = '0%';
      statusText.textContent = '等待开始';
      startBtn.disabled = false;
      statusMsg.className = 'status';
      statusMsg.textContent = '';
    }
  </script>
</body>
</html>

示例 3：多步骤表单进度

代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>多步骤表单进度</title>
  <style>
    body {
      font-family: "Microsoft YaHei", sans-serif;
      max-width: 600px;
      margin: 40px auto;
      padding: 20px;
      background: #f0f2f5;
    }
    h1 { color: #1a1a2e; }
    .card {
      background: #fff;
      padding: 28px;
      border-radius: 10px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    }
    .progress-wrapper {
      margin-bottom: 24px;
    }
    .progress-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;
      font-size: 14px;
    }
    .step-label { font-weight: 600; color: #6c5ce7; }
    .step-count { color: #888; }
    progress {
      width: 100%;
      height: 10px;
      border: none;
      border-radius: 5px;
      overflow: hidden;
    }
    progress::-webkit-progress-bar {
      background: #e8e5ff;
      border-radius: 5px;
    }
    progress::-webkit-progress-value {
      background: linear-gradient(90deg, #6c5ce7, #a29bfe);
      border-radius: 5px;
      transition: width 0.4s ease;
    }
    progress::-moz-progress-bar {
      background: linear-gradient(90deg, #6c5ce7, #a29bfe);
      border-radius: 5px;
    }
    .step-content {
      padding: 20px;
      background: #f8f7ff;
      border-radius: 8px;
      margin-bottom: 16px;
      min-height: 120px;
    }
    .step-content h3 { margin-top: 0; color: #6c5ce7; }
    .form-group { margin-bottom: 12px; }
    label {
      display: block;
      margin-bottom: 4px;
      font-weight: 600;
      font-size: 14px;
      color: #333;
    }
    input[type="text"], input[type="email"] {
      width: 100%;
      padding: 9px 12px;
      border: 2px solid #e0ddf5;
      border-radius: 6px;
      font-size: 14px;
    }
    input:focus {
      outline: none;
      border-color: #6c5ce7;
    }
    .btn-group {
      display: flex;
      justify-content: space-between;
    }
    button {
      padding: 10px 24px;
      border: none;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
    }
    .btn-prev { background: #e0e0e0; color: #333; }
    .btn-prev:hover { background: #d0d0d0; }
    .btn-next { background: #6c5ce7; color: #fff; }
    .btn-next:hover { background: #5a4bd1; }
    .btn-prev:disabled, .btn-next:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
    .step-indicator {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-bottom: 16px;
    }
    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #e0e0e0;
      transition: background 0.3s;
    }
    .dot.active { background: #6c5ce7; }
    .dot.completed { background: #27ae60; }
  </style>
</head>
<body>
  <h1>多步骤注册</h1>
  <div class="card">
    <div class="progress-wrapper">
      <div class="progress-header">
        <span class="step-label" id="stepLabel">步骤 1：基本信息</span>
        <span class="step-count" id="stepCount">1 / 3</span>
      </div>
      <progress id="stepProgress" value="1" max="3"></progress>
    </div>

    <div class="step-indicator" id="stepIndicator">
      <span class="dot active"></span>
      <span class="dot"></span>
      <span class="dot"></span>
    </div>

    <div class="step-content" id="stepContent">
      <!-- 动态内容 -->
    </div>

    <div class="btn-group">
      <button type="button" class="btn-prev" id="prevBtn" onclick="prevStep()" disabled>上一步</button>
      <button type="button" class="btn-next" id="nextBtn" onclick="nextStep()">下一步</button>
    </div>
  </div>

  <script>
    const steps = [
      {
        title: '步骤 1：基本信息',
        content: '<h3>基本信息</h3>' +
          '<div class="form-group"><label for="name">姓名：</label>' +
          '<input type="text" id="name" name="name" placeholder="请输入姓名"></div>' +
          '<div class="form-group"><label for="email">邮箱：</label>' +
          '<input type="email" id="email" name="email" placeholder="请输入邮箱"></div>'
      },
      {
        title: '步骤 2：联系方式',
        content: '<h3>联系方式</h3>' +
          '<div class="form-group"><label for="phone">手机号：</label>' +
          '<input type="text" id="phone" name="phone" placeholder="请输入手机号"></div>' +
          '<div class="form-group"><label for="address">地址：</label>' +
          '<input type="text" id="address" name="address" placeholder="请输入地址"></div>'
      },
      {
        title: '步骤 3：确认提交',
        content: '<h3>确认信息</h3>' +
          '<p>请确认您填写的信息无误后提交注册。</p>' +
          '<p style="color:#27ae60;font-weight:600;">点击"完成注册"提交表单。</p>'
      }
    ];

    let currentStep = 0;

    function renderStep() {
      const step = steps[currentStep];
      document.getElementById('stepLabel').textContent = step.title;
      document.getElementById('stepCount').textContent = (currentStep + 1) + ' / ' + steps.length;
      document.getElementById('stepProgress').value = currentStep + 1;
      document.getElementById('stepContent').innerHTML = step.content;

      document.getElementById('prevBtn').disabled = currentStep === 0;
      const nextBtn = document.getElementById('nextBtn');
      nextBtn.textContent = currentStep === steps.length - 1 ? '完成注册' : '下一步';

      // 更新步骤指示器
      const dots = document.querySelectorAll('.dot');
      dots.forEach((dot, i) => {
        dot.className = 'dot';
        if (i < currentStep) dot.classList.add('completed');
        if (i === currentStep) dot.classList.add('active');
      });
    }

    function nextStep() {
      if (currentStep < steps.length - 1) {
        currentStep++;
        renderStep();
      } else {
        alert('注册成功！');
        currentStep = 0;
        renderStep();
      }
    }

    function prevStep() {
      if (currentStep > 0) {
        currentStep--;
        renderStep();
      }
    }

    renderStep();
  </script>
</body>
</html>

浏览器兼容性

浏览器	支持情况	备注
Chrome	完全支持	样式自定义支持良好
Firefox	完全支持	样式自定义方式不同
Safari	完全支持	部分样式属性支持有限
Edge	完全支持	Chromium 内核版本完全兼容
IE 11	不支持	显示为行内文本

兼容性注意事项

IE 11：不支持 <progress>，会显示标签内的回退文本
Chrome/Safari：使用 ::-webkit-progress-bar 和 ::-webkit-progress-value 自定义样式
Firefox：使用 ::-moz-progress-bar 自定义样式
动画差异：不确定进度的动画效果在各浏览器中表现不同

样式兼容方案

代码示例

/* 跨浏览器进度条样式 */
progress {
  /* 重置默认样式 */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  height: 20px;
  border: none;
  border-radius: 10px;
  overflow: hidden;
}

/* Chrome/Safari */
progress::-webkit-progress-bar {
  background: #e0e0e0;
  border-radius: 10px;
}
progress::-webkit-progress-value {
  background: #4a90d9;
  border-radius: 10px;
}

/* Firefox */
progress::-moz-progress-bar {
  background: #4a90d9;
  border-radius: 10px;
}

/* 不确定进度条样式（Chrome） */
progress::-webkit-progress-inner-element {
  /* 部分浏览器支持 */
}

注意事项与最佳实践

1. 始终提供回退文本

代码示例

<!-- 推荐：提供回退文本 -->
<progress value="60" max="100">60%</progress>

<!-- 不推荐：无回退文本 -->
<progress value="60" max="100"></progress>

2. 合理选择确定与不确定进度

代码示例

<!-- 确定进度：已知完成百分比 -->
<progress value="45" max="100">45%</progress>

<!-- 不确定进度：只知道在进行中 -->
<progress>处理中...</progress>

<!-- 不推荐：进度为0时使用不确定进度 -->
<!-- 应该在确实无法计算进度时才使用不确定进度 -->

3. value 和 max 的比例关系

代码示例

<!-- max 默认为 1.0，value 取 0-1 之间 -->
<progress value="0.7">70%</progress>

<!-- 常用百分比形式：max=100 -->
<progress value="70" max="100">70%</progress>

<!-- 也可以使用其他最大值 -->
<progress value="3" max="5">3/5</progress>
<progress value="256" max="1024">256/1024 KB</progress>

4. 配合 ARIA 属性增强可访问性

代码示例

<!-- 基础 ARIA 增强 -->
<progress value="60" max="100"
          aria-labelledby="progress-label"
          aria-describedby="progress-desc">
  60%
</progress>
<label id="progress-label">文件上传进度</label>
<p id="progress-desc">已完成 60%，请稍候</p>

5. 进度条不适合表示度量值

代码示例

<!-- 错误：用 progress 表示磁盘使用率 -->
<progress value="75" max="100">75%</progress>

<!-- 正确：用 meter 表示度量值 -->
<meter value="75" min="0" max="100" low="30" high="80" optimum="50">75%</meter>

代码规范示例

规范写法

代码示例

<!-- 规范：有回退文本、value/max 合理、有 label -->
<div class="form-group">
  <label for="uploadProgress">文件上传进度：</label>
  <progress id="uploadProgress" value="45" max="100">45%</progress>
  <span class="progress-text">45%</span>
</div>

不规范写法

代码示例

<!-- 不规范：无回退文本、无 label -->
<progress value="45" max="100"></progress>

<!-- 不规范：用 div 模拟进度条 -->
<div class="progress-bar">
  <div class="progress-fill" style="width:45%"></div>
</div>

JavaScript 操作规范

代码示例

// 规范：更新进度值
const progressBar = document.getElementById('uploadProgress');

// 设置进度
progressBar.value = 75;

// 获取当前进度
const current = progressBar.value;     // 75
const max = progressBar.max;           // 100
const percent = (current / max * 100).toFixed(0); // "75"

// 设置为不确定进度
progressBar.removeAttribute('value');

// 恢复确定进度
progressBar.value = 0;

// 规范：动态更新进度
function updateProgress(loaded, total) {
  const progress = document.getElementById('uploadProgress');
  progress.value = loaded;
  progress.max = total;
  progress.textContent = Math.round(loaded / total * 100) + '%';
}

常见问题与解决方案

问题 1：如何自定义进度条的颜色

代码示例

/* Chrome/Safari - 已完成部分 */
progress::-webkit-progress-value {
  background: #27ae60;
}

/* Chrome/Safari - 未完成部分 */
progress::-webkit-progress-bar {
  background: #e0e0e0;
}

/* Firefox - 已完成部分 */
progress::-moz-progress-bar {
  background: #27ae60;
}

/* Firefox 未完成部分通过 progress 本身的 background 设置 */
progress {
  background: #e0e0e0;
}

/* 渐变色进度条 */
progress::-webkit-progress-value {
  background: linear-gradient(90deg, #4a90d9, #27ae60);
}

问题 2：如何实现带动画的进度条

代码示例

/* CSS 动画进度条 */
progress::-webkit-progress-value {
  background: linear-gradient(90deg, #4a90d9, #357abd);
  transition: width 0.5s ease;
}

/* 不确定进度的自定义动画 */
@keyframes indeterminate {
  0% { width: 0%; margin-left: 0%; }
  50% { width: 60%; margin-left: 20%; }
  100% { width: 0%; margin-left: 100%; }
}

/* 如需更复杂的动画，建议使用自定义进度条组件 */

问题 3：IE 不支持 progress 怎么办

代码示例

<!-- 方案一：使用回退文本 -->
<progress value="60" max="100">
  <span>60%</span>
</progress>

<!-- 方案二：使用 div 模拟（IE 降级） -->
<div class="progress-fallback" role="progressbar"
     aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-fill" style="width: 60%"></div>
</div>

<!-- 方案三：JavaScript 检测并降级 -->
<script>
  if (!('value' in document.createElement('progress'))) {
    // IE 不支持，使用自定义进度条
  }
</script>

问题 4：如何让进度条显示百分比文字

代码示例

<!-- progress 本身不支持在条上显示文字 -->
<!-- 需要配合额外的文本元素 -->

<div class="progress-wrapper">
  <progress id="myProgress" value="60" max="100">60%</progress>
  <span class="progress-text" id="progressText">60%</span>
</div>

<style>
.progress-wrapper {
  position: relative;
}
progress {
  width: 100%;
  height: 24px;
}
.progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  font-weight: 700;
  color: #333;
}
</style>

问题 5：如何在文件上传中使用 progress

代码示例

// 使用 XMLHttpRequest 的 progress 事件
const xhr = new XMLHttpRequest();
const formData = new FormData();

xhr.upload.addEventListener('progress', function(e) {
  if (e.lengthComputable) {
    const progressBar = document.getElementById('uploadProgress');
    progressBar.value = e.loaded;
    progressBar.max = e.total;

    const percent = Math.round(e.loaded / e.total * 100);
    document.getElementById('uploadPercent').textContent = percent + '%';
  }
});

xhr.open('POST', '/api/upload');
xhr.send(formData);

总结

<progress> 元素为任务进度展示提供了语义化的原生解决方案：

特性	说明
value 属性	当前进度值，省略则为不确定进度
max 属性	最大进度值，默认为 1.0
确定进度	已知完成百分比，显示具体进度
不确定进度	只知任务在进行，显示动画条纹
样式自定义	通过伪元素跨浏览器自定义样式
可访问性	屏幕阅读器可朗读进度百分比

使用 <progress> 的核心原则：用于表示任务完成进度，而非度量值。当需要表示磁盘使用率、分数、温度等度量值时，应使用 <meter> 元素。在实际开发中，配合 JavaScript 实现动态进度更新，并提供回退文本以确保兼容性。

常见问题

progress 和 meter 有什么区别？

progress 用于表示任务完成进度（如文件上传、安装），支持不确定状态；meter 用于表示已知范围内的度量值（如磁盘使用率、分数），支持阈值区间和颜色渲染。简单来说，progress 表示"做了多少"，meter 表示"当前测量值是多少"。

如何自定义进度条的颜色？

不同浏览器使用不同的伪元素：Chrome/Safari 使用 ::-webkit-progress-bar（未完成部分）和 ::-webkit-progress-value（已完成部分）；Firefox 使用 ::-moz-progress-bar（已完成部分），未完成部分通过 progress 元素本身的 background 设置。

什么是不确定进度条？

当省略 value 属性时，progress 元素进入不确定状态，显示为动画条纹效果，表示任务正在进行但进度未知。适用于无法计算具体完成百分比的场景，如等待服务器响应。

IE 不支持 progress 怎么办？

有三种方案：一是在 progress 标签内提供回退文本（如百分比文字）；二是使用 div 配合 role="progressbar" 和 ARIA 属性模拟进度条；三是通过 JavaScript 检测浏览器支持情况，不支持时自动降级为自定义组件。

如何在文件上传中实时显示进度？

使用 XMLHttpRequest 的 upload.progress 事件，通过 e.loaded 和 e.total 获取已上传字节数和总字节数，然后更新 progress 元素的 value 和 max 属性即可实时显示上传进度。

progress 的 max 默认值是多少？

max 的默认值为 1.0。如果不设置 max 属性，value 的取值范围为 0 到 1 之间的浮点数。实际开发中通常设置 max="100" 以便使用整数百分比表示进度。

标签： progress标签 HTML进度条 HTML5教程动态进度条表单元素浏览器兼容

本文涉及AI创作

内容由AI创作，请仔细甄别

list快速访问

poll相关推荐

框架集成：01 HTML与前端框架概述 - 详细教程与实战指南

实战项目：项目10：个人作品集网站 - 详细教程与实战指南

实战项目：项目09：任务管理应用 - 详细教程与实战指南

实战项目：项目08：天气应用界面 - 详细教程与实战指南

快速访问

相关推荐