HTML制作ol列表步骤是什么？完整编写流程介绍-html教程-PHP中文网

合法ol结构必须严格满足：ol仅直接包含li，禁止文本/p/div；嵌套子列表须完整置于li内；type和start属性已不推荐，应优先用CSS控制编号样式与逻辑。

html制作ol列表步骤是什么？完整编写流程介绍

ol 列表不是“运行”出来的，而是写好 HTML 后由浏览器解析渲染——只要结构合法、标签闭合正确，保存为 .html 文件双击打开就能看到编号效果。别被“制作”“步骤”误导，重点是写对、用对、不滥用。

怎么写一个合法的 `ol` 结构

浏览器只认嵌套关系和标签语义，不认缩进或空格。必须严格满足：ol 只能直接包含 li，不能塞 div、p 或文本节点（除非在 li 里）。

ol 标签必须成对出现：...，HTML5 不允许省略闭合标签
每个列表项必须用 li 包裹，不能写成 第一步
禁止在 ol 内直接写文字，比如 A 是无效结构，会触发解析纠错
嵌套时，子 ol 或 ul 必须放在某个 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 驱动