合法ol结构必须严格满足：ol仅直接包含li，禁止文本/p/div；嵌套子列表须完整置于li内；type和start属性已不推荐，应优先用CSS控制编号样式与逻辑。
ol 列表不是“运行”出来的，而是写好 HTML 后由浏览器解析渲染——只要结构合法、标签闭合正确，保存为 .html 文件双击打开就能看到编号效果。别被“制作”“步骤”误导，重点是写对、用对、不滥用。
怎么写一个合法的 ol 结构
浏览器只认嵌套关系和标签语义，不认缩进或空格。必须严格满足：ol 只能直接包含 li，不能塞 div、p 或文本节点（除非在 li 里）。
-
ol标签必须成对出现：<ol>...</ol>，HTML5 不允许省略闭合标签 - 每个列表项必须用
li包裹，不能写成<ol>第一步</ol> - 禁止在
ol内直接写文字，比如<ol>A</ol>是无效结构，会触发解析纠错 - 嵌套时，子
ol或ul必须放在某个li内部，例如：<li>主步骤<ol><li>子步骤</li></ol> </li>
type 和 start 属性要不要用
这两个属性虽可用，但现代项目中基本该禁用：它们能力有限、兼容性差、且与 CSS 冲突风险高。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
type="A"等仅支持 5 种值（1/A/a/I/i），无法加前缀如 “Step 1.” 或图标 -
start="3"在嵌套或动态插入时极易错位，比如第二层ol的start值不会自动继承父级计数 - 真正可控的方式是用 CSS：
ol { list-style-type: lower-alpha; }或li::before { content: "→ "; } - 如果只是想从 5 开始编号，用
ol { counter-reset: item 4; } li { counter-increment: item; } li::before { content: counters(item, ".") ". "; }更可靠
为什么不能把 ol 当步骤条用
常见错误是拿 ol 直接当多步注册流程的容器——它只负责语义化“有顺序”，不提供状态管理、校验联动或 DOM 切换能力。
立即学习“前端免费学习笔记（深入）”；
- 点击“第三步”按钮时，
ol不会阻止跳转，也不会检查前两步是否填完 - 用 CSS 隐藏非当前
li（比如li:not(:first-child) { display: none; }）会导致屏幕阅读器仍朗读全部内容，aria-hidden必须加在section或div容器上，不是li - 键盘焦点仍会落入
display: none的li中，造成可访问性断裂 - 真要实现步骤流程，外层用
div class="wizard"，步骤条视觉层可放ol class="steps"，但所有交互逻辑、状态更新、校验绑定都得靠 JS 驱动
最常被忽略的一点：ol 的语义一旦写错（比如该用 ul 却硬套 ol），后续所有 CSS 调整、JS 操作、无障碍修复都是在补漏洞——第一行就该决定它是不是真有顺序依赖。
