是唯一语义正确、可访问、可打印且利于SEO的活动流程载体，因其原生支持顺序语义、辅助技术识别、嵌套规范及属性控制（如type、start），而或手动编号会丢失结构与功能。
<ol></ol> 是唯一语义正确、可访问、可打印、能被爬虫和屏幕阅读器识别的活动流程说明载体——别用 <ul></ul> + CSS 伪元素，也别手动写 “1. 签到 2. 开场…”。
为什么必须用 <ol></ol> 而不是其他方式
活动流程是强顺序依赖的操作序列：签到必须在开场前，合影必须在颁奖后。浏览器和辅助技术靠 <ol></ol> 的语义判断“不可颠倒”，而 <ul></ul> 表示并列，div + 手动编号则完全丢失结构信息。
- 手动编号（如
<p>1. 签到</p>）会导致打印时序号消失、高对比度模式下不可见、屏幕阅读器读不出“这是第几步” -
<ul></ul>套display: flex+::before模拟数字，会破坏listitem角色，键盘焦点无法按序跳转 - 搜索引擎可能忽略无序标记的流程内容，影响活动页 SEO
type 和 start 属性怎么选才不翻车
活动流程常跨天、分章节或续接上一场，硬写死阿拉伯数字最易出错。优先用原生属性控制，而非 CSS 计数器。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
-
type="1"（默认）适合主流程：签到 → 开场 → 主题分享 → 茶歇 → 圆桌讨论 → 颁奖 → 合影 -
type="a"用于子环节：比如“茶歇”步骤下拆成<ol type="a"> <li>领取餐券</li> <li>前往B区取餐</li> </ol> -
start="3"用在分段文档中：若活动手册第二页从“3. 主题分享”开始，直接加<ol start="3"></ol>，别用 CSScounter-reset模拟 - 避免
type="I"或type="i"：部分 Android WebView 和旧版 Safari 会退化为阿拉伯数字，且小写罗马数字（如 iii）易与字母混淆
嵌套 <ol></ol> 的唯一合法写法
活动流程里常见“主步骤 → 多个并行子动作”，比如“5. 圆桌讨论”包含“主持人引导”“嘉宾发言”“观众提问”三项——这三项仍是线性执行，不是并列选项，所以仍用 <ol></ol>，但必须严格嵌套。
- 错误写法：
<ol> <li>圆桌讨论</li> <ol><li>主持人引导</li></ol> </ol>—— 内层<ol></ol>会被浏览器自动移出，DOM 结构断裂 - 正确写法：
<ol><li>圆桌讨论<ol> <li>主持人引导</li> <li>嘉宾发言</li> <li>观众提问</li> </ol> </li></ol> - 嵌套后，内层编号默认从 1 开始，不会继承外层
start；若需显示为 “5.1、5.2”，得用 CSScounter-increment，但仅限视觉增强，语义仍以 DOM 层级为准
动态显示某步（如“当前进行中”）不能删 DOM
活动页面常需高亮“当前环节”，但切忌用 JS 删除或 display: none 隐藏非当前项——这会让屏幕阅读器跳过整段流程，且打印时内容丢失。
- 正确做法：保留全部
<li>，用aria-current="step"标记当前项，配合 CSS 控制视觉样式 - 例如：
<li aria-current="step">主题分享</li>，再写 CSSli[aria-current="step"] { font-weight: bold; color: #0066cc; } - 若需折叠历史环节，用
aria-hidden="true"+tabindex="-1"加在<li>上，而非父容器；否则键盘用户仍能 tab 进隐藏项 - 绝对不要用
visibility: hidden：它仍占布局空间，且屏幕阅读器默认会读
最容易被忽略的是：活动流程一旦嵌套或带条件分支（如“若天气晴好，则户外合影；否则移至室内”），就超出了 <ol></ol> 的语义边界——这时该用 <details></details> 或独立 <ol></ol> 包裹分支，并用文字明确标注触发条件，而不是强行塞进主线列表里。
