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

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

研发阶段（如需求分析 → 设计 → 开发 → 测试 → 上线）本质是强顺序流程，<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></ol> 或 <ul></ul> 必须放在父级 <li> 内部，不能直接塞进父 <ol></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> 当布局工具用

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

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

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！