正确使用<ol>标签实现自动编号：每个步骤用<li>直接子元素；跳过编号用start属性（整数）；子步骤通过嵌套<ol>实现；样式用CSS list-style-type控制。
用 <ol> 标签直接包裹步骤，别套 <div> 或 <p>
浏览器只认语义化标签来生成序号，<ol> 是唯一能自动编号的容器。如果把每个步骤写成独立的 <p> 再手动加“1.”“2.”，不仅维护麻烦，打印或屏幕阅读器也无法识别流程顺序。
正确写法就是让每个步骤作为 <li> 直接子元素：
<ol> <li>考生入场，出示准考证和身份证</li> <li>监考员核对信息并分发试卷</li> <li>开考前5分钟启封试卷袋</li> <li>考试结束铃响后立即停笔</li> </ol>
需要跳过某一步编号？改用 start 属性而不是删 <li>
比如流程中“步骤3”是系统自动校验环节，不需人工操作，但后续步骤仍要延续编号逻辑（即下一步显示为“4”），这时不能删掉那个 <li> —— 否则整个序号会重排。
更稳妥的做法是保留 <li>，用 start 属性指定起始值：
立即学习“前端免费学习笔记（深入）”；
<ol start="4"> <li>考生提交答题卡并离场</li> </ol>
常见误操作：start 写成字符串如 start="four"，必须是整数；另外它只影响当前 <ol>，不会继承上一个列表的末尾序号。
考试流程含子步骤？嵌套 <ol> 比用缩进 CSS 更可靠
像“阅卷环节”可能拆成“扫描→AI初筛→人工复核”，这种层级关系靠 CSS margin-left 模拟容易在响应式或打印时错位，且语义丢失。
嵌套写法天然支持多级编号（如 3.1、3.2）且兼容性好：
<ol>
<li>考试结束后72小时内完成阅卷</li>
<li>阅卷流程：
<ol>
<li>答题卡扫描生成图像</li>
<li>AI识别填涂并标记异常卷</li>
<li>人工对异常卷进行二次评分</li>
</ol>
</li>
</ol>
注意：嵌套的 <ol> 必须放在 <li> 内部，不能放在 <ol> 外面，否则 HTML 结构非法，部分浏览器会自动闭合外层标签导致序号错乱。
需要阿拉伯数字以外的编号样式？优先用 CSS list-style-type
考试正式文档有时要求用“一、二、三”或“（1）（2）（3）”，这些不用 JavaScript 或手动替换，CSS 就能控制：
-
list-style-type: decimal（默认，1 2 3） -
list-style-type: lower-roman（i ii iii） -
list-style-type: cjk-ideographic（一 二 三，中文环境推荐） -
list-style-type: lower-alpha（a b c）
关键限制：cjk-ideographic 在 Safari 旧版本和部分安卓 WebView 中支持不稳定，若必须兼容，可退回到 decimal + 中文前缀（如 <li>一、考生入场…</li>），但会失去自动序号更新能力。
<ol> 和 <li> 的开闭完全匹配。 
