正确使用实现语义化有序列表：用type切换编号格式（如a、i），start指定起始数字，css仅用于视觉微调，避免手动编号或list-style:none破坏可访问性。
用 <ol></ol> 包裹步骤，别用 <ul></ul> 或手动写数字
有序列表的核心是语义——告诉浏览器“这些项有先后顺序”，而不是“看起来像1、2、3”。用 <ul></ul> 加手动编号（比如<li>1. 打开终端</li>）会导致可访问性差、无法被屏幕阅读器识别为序列，且后续增删步骤时容易漏改数字。
正确做法是只写内容，让 <ol></ol> 自动编号：
<ol> <li>打开终端</li> <li>切换到项目目录</li> <li>运行 <code>npm install</code> </li> </ol>
浏览器默认渲染为带阿拉伯数字的垂直列表，无需额外样式即可满足大多数步骤说明场景。
需要字母或罗马数字编号？改 type 属性就行
<ol></ol> 的 type 属性能快速切换编号格式，但注意它只影响显示，不改变语义顺序。常见值有：a（小写字母）、A（大写字母）、i（小写罗马数字）、I（大写罗马数字）、1（默认数字）。
-
type="a"：适合子步骤，比如主步骤用数字，子步骤用 a、b、c -
type="I"：常用于法律条文或正式文档，但注意 IE 旧版本对I和i支持不稳定 - 不要混用
type和 CSSlist-style-type——前者更语义化且在无 CSS 时仍有效
示例（子步骤用字母）：
<ol>
<li>初始化 Git 仓库</li>
<li>配置用户信息</li>
<ol type="a">
<li>设置用户名：<code>git config --global user.name "xxx"</code>
</li>
<li>设置邮箱：<code>git config --global user.email "xxx@example.com"</code>
</li>
</ol>
<li>提交首次变更</li>
</ol>
从指定数字开始编号？用 start 属性，不是 CSS
当步骤接续上一节（比如上一节结束于第5步），需要用 start 属性让编号从6开始。这是 HTML 原生支持的属性，比用 CSS 的 counter-reset 更轻量、兼容性更好。
常见误区：
- 写成
start="6"是对的；写成start=6（不加引号）在严格解析下可能出错 -
start只接受整数，不能是"6."或"第六步" - 如果嵌套了
<ol></ol>，内层start不会影响外层计数
示例：
<ol start="6"> <li>推送代码到远程仓库</li> <li>创建 Pull Request</li> </ol>
样式微调优先用 CSS，但别覆盖语义
如果要改缩进、行高或字体大小，直接给 <ol></ol> 或 <li> 加 class，用 CSS 控制。但避免用 list-style: none 再手动加伪元素编号——这会让列表失去语义，对无障碍和 SEO 不友好。
真正需要定制编号样式（如加括号、前缀文字）时，才考虑 CSS 计数器：
<ol class="step-list"> <li>克隆仓库</li> <li>安装依赖</li> </ol>
对应 CSS（仅当必须时用）：
.step-list {
counter-reset: step;
}
.step-list li {
counter-increment: step;
}
.step-list li::before {
content: "步骤 " counter(step) "：";
font-weight: bold;
}
注意：这种写法在打印或禁用 CSS 时会丢失编号，所以仅限视觉增强场景，不能替代原生 <ol></ol>。
嵌套层级深、编号类型多、或需跨页面连续编号时，start 和 type 就不够用了——这时候该考虑用 JS 动态生成或服务端模板控制，而不是硬塞 HTML 属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
