步骤引导页中阶段标题必须用语义化标签按逻辑层级定义，作为各步骤主标题（如“1. 填写基本信息”），统一置于内；子任务用细化；视觉样式须由css控制，严禁降级标签换取样式。

在步骤引导页（如注册流程、安装向导、多步表单）中，阶段标题不是装饰性文字，而是用户导航和理解进度的关键信息。应使用语义化标题标签按逻辑层级定义，既保障可访问性，又提升SEO与结构清晰度。

阶段标题用

作为主步骤标题

每个步骤板块的主标题（如“1. 填写基本信息”“2. 设置账户安全”）应统一用

。它代表该步骤在整页中的第一级子内容，紧接在页面

（如“欢迎创建账号”）之后。一个引导页通常有多个

，但必须按顺序连续出现，不可跳过或混用。

• ✅ 正确：

  第一步：验证手机号

• ❌ 错误：

  第一步：验证手机号

  （层级过低，削弱语义）
• ❌ 错误：

  第一步

  验证手机号

  （拆分成两个

  ，破坏步骤完整性）

子任务或说明项用

细化

若某一步骤内需进一步拆解操作单元（如“上传身份证正反面”“拍摄手持证件照”），可用

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

作为子标题。它从属于当前

，体现“步骤下的动作分支”，便于屏幕阅读器用户逐层聚焦。

• 示例：

  第三步：实名认证

  上传身份证正面

  请确保四角清晰可见……

  上传身份证反面

• 注意：不要为按钮文字、提示图标或纯装饰性数字（如“①”）套用

  ——它们不属于内容标题，应使用或等中性标签。

避免视觉误导，样式交给CSS

引导页常需突出步骤序号（如圆圈数字+粗体），但切勿用

假装“小标题”来缩小字号。所有视觉效果（颜色、间距、序号图标、进度条联动）应通过CSS控制，标题标签只表达结构意义。

• ✅ 推荐：

  第二步：绑定邮箱

  + CSS设置字体大小、背景圆点、active状态
• ❌ 不推荐：

  第二步：绑定邮箱

  （用标签降级换取样式，损害语义与辅助技术识别）

配合语义区块增强结构可信度

为每个步骤包裹

，并在其中放置

，能明确划分独立语义区域。HTML5允许每个

拥有自己的标题层级，这样即使后续嵌套

，也不会干扰全局结构。

• 示例：

  第四步：完成设置

  点击确认即开通服务……

• 好处：当用户用键盘Tab跳转或屏幕阅读器按标题导航时，
  能提供更准确的上下文边界。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！