html有序列表应使用包裹步骤，浏览器自动编号；仅允许子元素，支持type和start属性定制样式与起始值；避免css伪元素重编号或混用无序列表，分支逻辑需独立，动态显示用aria-hidden而非删除dom。

用 <ol></ol> 标签包裹步骤，浏览器自动编号

HTML 有序列表的核心就是 <ol></ol> 元素，它默认按 1、2、3… 顺序渲染子项。不需要手动写数字，也不依赖 CSS 计数器——只要每个步骤用 <li> 包裹，浏览器就自动处理序号生成和更新。

常见错误是把步骤写成普通段落或无序列表，导致语义丢失、屏幕阅读器无法识别操作顺序，也失去后续通过 reversed 或 start 属性调整序号的灵活性。

• <ol></ol> 必须只包含 <li>（或脚本生成的内容），不能直接放文本
• 嵌套步骤时，可在某个 <li> 内部再套一层 <ol></ol>
• 避免用 <div> 模拟序号（如 “1. 点击按钮”），这会让语义断裂且不利于可访问性 <h3> <code>type 和 start 属性控制编号样式与起始值

  默认编号是阿拉伯数字，但实际场景中可能需要字母、罗马数字，或从非 1 的数字开始（比如续接上一页的第 5 步）。这时靠 type 和 start 就够用，无需 JS 或 CSS 干预。

  注意：HTML5 中 type 的合法值只有 "1"（数字）、"a"（小写字母）、"A"（大写字母）、"i"（小写罗马）、"I"（大写罗马）；其他值（如 "circle"）已被废弃，不要混用 CSS 的 list-style-type。

  

  anything-to-html

  将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

  下载
  • <ol start="3"></ol> → 第一项显示为 “3.”
  • <ol type="a"></ol> → 显示为 “a. b. c.”
  • <ol type="I" start="2"></ol> → 显示为 “II. III. IV.”

  避免用 CSS 覆盖默认序号，除非有强定制需求

  用 counter-reset + ::before 手动实现编号，看似灵活，实则绕过 HTML 语义、增加维护成本，且容易在打印、高对比度模式或辅助技术下失效。

  真正需要定制样式（比如带背景色的圆角序号）时，应优先用 list-style: none 隐藏原生序号，再用伪元素仅装饰视觉，同时保留 <ol><li></ol> 结构供语义和逻辑使用。

  • 纯视觉调整（颜色、间距、字体大小）直接作用于 ol li 即可
  • 若必须重绘序号，请确保 aria-label 或 data-attr 同步暴露逻辑序号，供自动化工具读取
  • 移动端缩放时，CSS 生成的序号可能错位，原生序号更稳

  多步骤流程中，别把条件分支塞进同一 <ol></ol>

  有序列表表达的是线性、确定的操作序列。如果某一步要根据用户选择跳转到不同后续步骤（比如“若登录成功，执行 A；否则执行 B”），强行塞进一个 <ol></ol> 会破坏顺序语义，也让 JS 判断逻辑变复杂。

  此时更合理的做法是：主流程用 <ol></ol>，分支用独立的 <ol></ol> 或 <details></details> 包裹，并通过文字明确标注触发条件。

  • 错误示例：<li>点击提交</li> <li>如果弹窗出现 → <ol><li>点确定</li></ol> 否则 → <ol><li>刷新页面</li></ol> </li>
  • 正确做法：主 <ol></ol> 到“点击提交”为止，后续分支各自用新 <ol></ol>，并加说明文字前缀
  • JS 动态控制显示时，用 aria-hidden 配合 display: none，别删 DOM
  语义清晰比视觉整齐更重要；浏览器对 <ol></ol> 的原生支持已经足够健壮，多数定制需求其实是误判了问题本质。