是唯一语义正确、可访问、可打印且利于SEO的活动流程载体，因其原生支持顺序语义、辅助技术识别、嵌套规范及属性控制（如type、start），而或手动编号会丢失结构与功能。

是唯一语义正确、可访问、可打印、能被爬虫和屏幕阅读器识别的活动流程说明载体——别用

+ CSS 伪元素，也别手动写 “1. 签到 2. 开场…”。

为什么必须用

而不是其他方式

活动流程是强顺序依赖的操作序列：签到必须在开场前，合影必须在颁奖后。浏览器和辅助技术靠

的语义判断“不可颠倒”，而

表示并列，div + 手动编号则完全丢失结构信息。

• 手动编号（如

  1. 签到

  ）会导致打印时序号消失、高对比度模式下不可见、屏幕阅读器读不出“这是第几步”
• 套 display: flex + ::before 模拟数字，会破坏 listitem 角色，键盘焦点无法按序跳转
• 搜索引擎可能忽略无序标记的流程内容，影响活动页 SEO

type 和 start 属性怎么选才不翻车

活动流程常跨天、分章节或续接上一场，硬写死阿拉伯数字最易出错。优先用原生属性控制，而非 CSS 计数器。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• type="1"（默认）适合主流程：签到 → 开场 → 主题分享 → 茶歇 → 圆桌讨论 → 颁奖 → 合影
• type="a" 用于子环节：比如“茶歇”步骤下拆成
  1. 领取餐券
  2. 前往B区取餐
• start="3" 用在分段文档中：若活动手册第二页从“3. 主题分享”开始，直接加
  ，别用 CSS counter-reset 模拟
• 避免 type="I" 或 type="i"：部分 Android WebView 和旧版 Safari 会退化为阿拉伯数字，且小写罗马数字（如 iii）易与字母混淆

嵌套

的唯一合法写法

活动流程里常见“主步骤 → 多个并行子动作”，比如“5. 圆桌讨论”包含“主持人引导”“嘉宾发言”“观众提问”三项——这三项仍是线性执行，不是并列选项，所以仍用

，但必须严格嵌套。

• 错误写法：
  1. 圆桌讨论
  1. 主持人引导
  —— 内层
  会被浏览器自动移出，DOM 结构断裂
• 正确写法：
  1. 圆桌讨论
     1. 主持人引导
     2. 嘉宾发言
     3. 观众提问
• 嵌套后，内层编号默认从 1 开始，不会继承外层 start；若需显示为 “5.1、5.2”，得用 CSS counter-increment，但仅限视觉增强，语义仍以 DOM 层级为准

动态显示某步（如“当前进行中”）不能删 DOM

活动页面常需高亮“当前环节”，但切忌用 JS 删除或 display: none 隐藏非当前项——这会让屏幕阅读器跳过整段流程，且打印时内容丢失。

• 正确做法：保留全部
• ，用 aria-current="step" 标记当前项，配合 CSS 控制视觉样式
• 例如：
• 主题分享
，再写 CSS li[aria-current="step"] { font-weight: bold; color: #0066cc; }
• 若需折叠历史环节，用 aria-hidden="true" + tabindex="-1" 加在
• 上，而非父容器；否则键盘用户仍能 tab 进隐藏项
• 绝对不要用 visibility: hidden：它仍占布局空间，且屏幕阅读器默认会读

最容易被忽略的是：活动流程一旦嵌套或带条件分支（如“若天气晴好，则户外合影；否则移至室内”），就超出了

的语义边界——这时该用

或独立

包裹分支，并用文字明确标注触发条件，而不是强行塞进主线列表里。

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