准备阶段：制定指南、设计问题、培训考官实施阶段：关系建立→导入→正题→结束评价阶段：评分、汇总、反馈与存档
用 <ol></ol> 表达面试阶段顺序，语义最准
面试流程天然有先后、不可跳过、需编号呈现——这正是 <ol></ol> 的核心语义场景。别用 <ul></ul> 加 CSS 伪造序号，屏幕阅读器不会播报“第一轮”“第二轮”，对残障用户和 SEO 都不友好。
正确结构只有一条铁律：<ol></ol> 的直接子元素必须且只能是 <li>。下面这些写法都错：
-
<ol>一面</ol>（纯文本，被忽略） -
<ol><p>二面</p></ol>（<p></p>不允许作为<ol></ol>子元素） -
<ol><div>终面</div></ol>（同上，解析结果不可控）
必须写成：
<ol> <li>初筛（HR 电话）</li> <li>技术一面（前端基础）</li> <li>技术二面（项目深挖）</li> <li>总监终面（文化匹配）</li> </ol>
start 属性能接续前序，但别指望它改语义
如果简历页已用 <ol></ol> 列出「过往公司」，面试流程要从第 5 步开始编号，用 start="5" 最省事：
<ol start="5"> <li>笔试（在线编程）</li> <li>视频初面</li> <li>现场终面</li> </ol>
但注意两点：
- IE11 及更早版本完全忽略
start，编号一律从 1 开始（若需兼容，得用 CSS 计数器兜底） -
start只影响视觉数字，DOM 顺序和可访问性播报仍是“第 1 项”“第 2 项”。真要语义上跳过前 4 步，得加aria-posinset和aria-setsize
编号样式优先用 CSS，type 属性已过时
想把「1. 2. 3.」换成「A. B. C.」？别写 <ol type="A"></ol>。原因很实际：
-
type只支持"1"/"a"/"A"/"i"/"I"五种，连小写希腊字母alpha都不支持 - Safari 对
type="I"渲染不一致，长列表里VIII和III容易看混 - 无法控制编号与文字间距、颜色、字体粗细等细节
直接上 CSS：
<ol class="interview-stages">
<li>HR 初筛</li>
<li>技术一轮</li>
</ol><p><style>
.interview-stages {
list-style-type: upper-alpha;
}
</style></p>
这样既干净，又方便响应式切换（比如小屏改用 decimal）。
嵌套多轮子环节，用 CSS 计数器比 <ol></ol> 嵌套更可控
如果某轮面试还要拆成「自我介绍→编码题→系统设计」，硬套 <ol><ol></ol></ol> 会带来两个麻烦：
- 缩进靠
padding-left控制，容易和外层列表冲突 - 默认编号变成
1.1、1.2，但浏览器原生不支持这种格式（type和start都不管用）
推荐用 CSS 计数器实现精准层级：
<ol class="rounds">
<li>技术一面
<ol class="substeps">
<li>自我介绍</li>
<li>算法题</li>
<li>React 原理提问</li>
</ol>
</li>
</ol><p><style>
.rounds { counter-reset: round; }
.rounds > li { counter-increment: round; }
.rounds > li::before { content: "第 " counter(round) " 轮："; font-weight: bold; }</style></p><p>.substeps { counter-reset: step; }
.substeps > li { counter-increment: step; }
.substeps > li::before { content: counter(round) "." counter(step) " "; }
</p>
这种写法不依赖 HTML 层级嵌套深度，编号逻辑全由 CSS 控制，改起来也只动样式不碰结构。
真正容易被忽略的是：当面试阶段动态增减（比如临时加一轮）、或需要 JS 读取当前轮次时，CSS 计数器生成的内容无法被 textContent 获取——此时得用 data-* 属性手动维护状态，不能只靠视觉编号。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
