应使用<ol>标记研发阶段以准确表达强顺序语义，自动编号并提升可访问性与SEO；禁用手动编号，优先用type属性（如type="A"）控制序号类型，嵌套时子列表必须置于<li>内，避免语义丢失。

用 <ol> 表达研发阶段的天然语义

研发阶段（如需求分析 → 设计 → 开发 → 测试 → 上线）本质是强顺序流程，<ol> 不仅能自动编号，还向屏幕阅读器、搜索引擎明确传递“这一步必须在上一步之后”的结构意图。手动写“1. 需求分析”“2. 设计”属于反模式——既难维护，又破坏可访问性。

type 和 start 属性的实际取舍

浏览器默认用阿拉伯数字（type="1"），但研发阶段常需字母或罗马数字标识子阶段（如“Phase A”“Phase II”）。这时直接用 type="A" 或 type="i" 即可，无需 CSS 覆盖。但注意：start 属性只影响起始数字，不支持字母起始（start="B" 无效）；若要从 B 开始，得用 CSS counter-reset。

• 推荐优先用 type 控制标记类型，它语义清晰、兼容性好（所有现代浏览器都支持）
• 避免混用 type 和 CSS list-style-type，后者会覆盖前者
• reversed 属性极少用于研发流程（倒序展示阶段无实际意义）

嵌套时必须用 <li> 包裹子列表

研发阶段常含子步骤（如“开发”阶段下分“前端开发”“后端开发”“接口联调”）。嵌套必须严格遵循：子 <ol> 或 <ul> 必须放在父级 <li> 内部，不能直接塞进父 <ol>。否则 HTML 结构非法，部分屏幕阅读器会跳过子内容。

正确写法示例：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

立即学习“前端免费学习笔记（深入）”；

<ol>
  <li>需求分析
    <ul>
      <li>用户访谈</li>
      <li>竞品分析</li>
    </ul>
  </li>
  <li>系统设计
    <ol type="a">
      <li>数据库设计</li>
      <li>API 接口定义</li>
    </ol>
  </li>
</ol>

别把 <ol> 当布局工具用

有人用 <ol> 实现横向阶段导航栏，靠 display: inline-flex 拉平。这看似省事，但代价明显：语义丢失（阶段不再是“顺序”，变成“并列”）、键盘焦点顺序错乱、打印样式崩坏。真要横向展示，应保持 <ol> 结构，仅用 CSS 调整视觉排列（如 flex-direction: row），不改变 DOM 顺序。

最容易被忽略的一点：研发文档若导出为 PDF 或被爬虫抓取，<ol> 的语义层级会直接影响大纲生成和内容解析质量——手动编号或 div 模拟根本不会被识别为“阶段序列”。