html步骤条仅可视化流程状态，不能驱动引导逻辑；流程引导需js独立控制定位、遮罩、焦点等交互行为，二者职责分离且须共存维护两个状态。
HTML步骤条本身不等于流程引导，也不能直接驱动引导逻辑——它只是状态的可视化出口，流程控制必须由JS单独维护。
步骤条（step indicator）和流程引导（onboarding tour）根本不是一回事
步骤条只回答“当前在第几步”，比如注册表单的「1. 填写信息 → 2. 验证身份 → 3. 设置密码」；流程引导则回答“用户该看哪、点哪、注意什么”，比如高亮邮箱输入框并弹出提示“请输入公司邮箱”。document.querySelector('.step-indicator') 拿不到用户是否已看完某步说明，querySelector('.tour-step') 也画不出进度线。
常见错误现象：progress 标签写死 value="1"，但用户点了“下一步”后 JS 没更新它，界面卡住；或用 CSS 动画做了个“引导箭头”，却没绑定到真实 DOM 元素上，缩放后偏移、点击无响应。
- 步骤条核心职责：同步显示、语义清晰、可访问（带
aria-current） - 流程引导核心职责：定位目标元素、遮罩背景、控制焦点、记录用户操作路径
- 两者可以共存，但不能互相替代——你得同时维护
currentStep和currentTourIndex两个状态
为什么不能用 <progress></progress> 实现流程引导
<progress></progress> 是纯展示型标签，没有交互能力，也不触发任何事件。它不感知用户是否阅读了提示、是否点击了按钮、是否跳过了某步。浏览器对它的支持也有限：IE 完全忽略，部分旧 Android WebView 渲染异常，且无法通过 tabindex 聚焦或用键盘操作。
使用场景：仅适合静态进度反馈，如文件上传、表单填写完成度；不适合需要用户主动参与的引导流程。
- 别给
<progress></progress>绑click事件——它不会响应 - 别依赖
progress.value判断用户行为——它只是个快照值，不是事件源 - 若需点击跳转步骤，必须另起一套按钮 + JS 状态机，
<progress></progress>只负责被动渲染
兼容性落地时最常漏掉的三件事
很多项目在 Chrome 里跑得好好的，一上 IE 或低版本 Safari 就崩：步骤圆点错位、连线断裂、引导浮层消失。问题往往不在主逻辑，而在降级路径没兜住。
- 没检测
<progress></progress>原生支持：用typeof document.createElement('progress').max === 'number'判断，不成立就 fallback 到<div class="progress-fallback"> + <code>style.width - 没处理 SVG 引导路径的
getBBox()兼容：IE 不支持该方法，需用offsetWidth/Height估算，或直接禁用 SVG 路径改用 CSS 线条 - 忘了 ARIA 属性同步：步骤条要加
aria-live="polite"，流程引导每步切换时得el.setAttribute('aria-current', 'step')，否则屏幕阅读器读不出变化
真正难的不是画几个圆圈或写几行 JS 切换 class，而是让状态在 DOM、JS 变量、无障碍 API、降级 UI 四者之间始终一致——只要有一处脱节，用户就会看到“进度条动了但内容没变”，或者“引导提示弹出来了，但焦点还在上一个输入框”。
