html5中区块引导标题应使用h2–h6语义化标题标签配合section容器，header仅作元信息包裹容器；h2为区块主标题且须连续有序；子任务用h3细化；所有视觉样式通过css实现，确保语义与表现分离。
在 HTML5 中，定义区块的引导标题，核心是用语义化标题标签（h2–h6）配合结构容器，而不是靠 header 标签本身充当“标题”。header 是页眉区域，不是标题标签——它只负责包裹标题及相关介绍性内容。
用 h2 作为区块主引导标题
每个独立功能区块（如步骤引导页中的“第二步：设置密码”）应以 h2 为第一级标题，放在 section 内部，紧接在区块起始位置：
- 必须连续、有序：多个步骤用 h2 依次编号，不跳级、不混用 h1 或 h3
- 不可降级换样式：即使视觉上要缩小序号或加圆点图标，也不能改用 h3 或 span 模拟标题
- 需包裹在 section 中：确保该标题有明确的语义上下文边界
用 header 包裹标题及辅助信息
当区块需要附带作者、时间、状态说明等元信息时，在 section 内部嵌套 header，再把 h2 放进去：
- header 本身不表达层级，只是语义容器；标题级别仍由 h2 明确体现
- 可在 header 中加入 p class="step-desc" 或 time 等元素，但不能替代 h2
- 避免空 header：如果只放一个按钮或装饰性图标，就该用 div
子任务用 h3 细化，不破坏主结构
若某一步骤内部需拆解操作项（如“上传身份证正反面”），可用 h3 作为从属标题：
- h3 必须位于当前 h2 所在 section 内，体现“步骤下的动作分支”
- 屏幕阅读器可据此逐层聚焦，用户也能感知层级关系
- 禁止对按钮文字、提示图标或纯序号（如“①”）套用 h3
样式与语义分离，全靠 CSS 控制视觉
引导标题的圆圈序号、高亮色、进度联动等效果，一律通过 CSS 实现：
- 用 ::before 伪元素生成序号图标，不写进 HTML
- 用类名（如 is-active）控制当前步骤样式，不靠标签切换
- 禁用 h2 { font-size: 14px; } 强行压小——标题语义不变，视觉由设计系统统一管理
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
