直接用 HTML+CSS 可实现可用步骤条：语义化用 或 ，状态靠 active/current 类控制，CSS 用 flex 横向布局与伪元素画线，JS 更新需同步 ARIA 属性和可访问性。

直接用 HTML + CSS 就能做出可用的步骤条，不需要框架或构建工具；关键在结构语义清晰、状态类名统一、CSS 横向对齐和视觉反馈明确。

用

或

构建步骤结构

步骤条本质是有序流程，

更语义正确，但

也常见（尤其当后端动态生成时）。每个步骤用

，状态靠 class 控制：

• 表示已完成（含圆圈+文字+连接线）
• 表示当前进行中（通常圆圈高亮、文字加粗）
• （无 class）表示未开始（灰阶、不可点击）

别用

套 模拟列表——屏幕阅读器无法识别流程顺序，SEO 和可访问性都会打折。

CSS 实现横向排列与状态样式

核心是让

水平铺开，并用伪元素画连接线。典型写法：

`.steps {
  display: flex;
  justify-content: space-between;
  counter-reset: step;
}
.steps li {
  position: relative;
  flex: 1;
  text-align: center;
}
.steps li::before {
  content: counter(step);
  counter-increment: step;
  width: 28px;
  height: 28px;
  line-height: 28px;
  border-radius: 50%;
  background: #ccc;
  color: #fff;
  font-size: 14px;
  display: inline-block;
}
.steps li.active::before,
.steps li.current::before {
  background: #007bff;
}
.steps li.active::after {
  content: '';
  position: absolute;
  top: 14px;
  left: 100%;
  width: 100%;
  height: 2px;
  background: #007bff;
}`

注意：flex: 1 让每步等宽自适应，::after 画的是“已完成”步骤右侧的连接线；“当前”步骤不画线，“未开始”步骤连线上也不显示。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

JavaScript 动态更新步骤状态要谨慎

如果需要点击跳转或表单验证后推进，用 JS 切换 class 即可，但必须同步更新 DOM 状态和 ARIA 属性：

• 调用 goToStep(n) 时，确保 n 是合法索引（0 ≤ n ）
• 给当前
• 加 aria-current="step"，提升读屏体验
• 禁用未完成步骤的点击（pointer-events: none），或加逻辑拦截，否则用户可能乱跳
• 不要只改 class，漏掉 tabindex 或 aria-disabled，键盘用户会卡住

纯静态步骤条（如文档导航）完全不用 JS；加交互前先问：这个步骤是否真需要用户主动触发？还是只是反映表单填写进度？后者更适合由表单验证逻辑驱动，而非手动调用 goToStep()。

最易被忽略的是响应式断点——小屏下横向步骤条必须折叠为垂直列表，且连接线要转为顶部/底部边框；另外，所有颜色需满足 WCAG 4.5:1 对比度，灰色圆圈配浅灰文字是常见翻车点。