html有序列表应使用结构，语义正确且利于可访问性；type和start属性控制编号类型与起始值，但现代开发推荐css的list-style-type和::marker伪元素实现更灵活、语义更干净的样式定制。
HTML 有序列表的基本写法是 <ol></ol> 套 <li>
浏览器默认会自动编号，从 1 开始递增。不需要手动写数字，也不用加句点或括号——那是 CSS 控制的事。
常见错误是把 <li> 直接丢在 里，没包 <ol></ol>；或者误用 <ul></ul>（无序列表）却指望它出数字。这两种都会导致语义错误、样式不可控，还影响屏幕阅读器识别。
-
<ol> <li>第一步</li> <li>第二步</li> </ol>是最简可用形式 - 每个
<li>必须闭合，XHTML 风格的自闭合写法（<li>）在 HTML5 中无效 - 嵌套时，子
<ol></ol>应放在父<li>内部，而不是平级
用 type 和 start 控制编号格式和起始值
这两个属性解决的是“看起来不像操作手册”的典型问题：比如步骤要从“②”开始，或用字母代替数字。
type 只接受有限几个值："1"（默认数字）、"a"（小写字母）、"A"（大写字母）、"i"（小写罗马数字）、"I"（大写罗马数字）。注意不是 CSS 类名，也不能写成 type="lower-alpha"。
-
<ol type="a" start="3"> <li>导出配置</li> <li>重启服务</li> </ol>→ 渲染为 c. 导出配置，d. 重启服务 -
start值必须是整数，即使type="a"也得写start="3"，不能写start="c" - 现代项目中更推荐用 CSS 的
list-style-type替代type属性，语义更干净，兼容性也更好
CSS 覆盖编号样式比改 HTML 属性更灵活
想让编号带括号、加背景色、右对齐，或者换用自定义图标，全靠 CSS。HTML 层只管结构，别硬塞样式逻辑进去。
关键点是：用 ::marker 伪元素控制编号本身，而不是给 <li> 加 padding 或 text-indent——后者容易破坏可访问性。
-
ol { list-style-type: none; }先清空默认编号，再用li::marker { content: "▶ " counter(list-item) ". "; }自定义 - 如果要支持 IE，
::marker不可用，得退回到counter-reset+counter-increment+content组合方案 - 避免用
float或绝对定位挪动编号位置，会导致语音朗读顺序错乱
操作手册场景下最容易被忽略的语义细节
真正影响可用性的不是“能不能显示数字”，而是“机器是否理解这是线性步骤”。搜索引擎、辅助技术、自动化文档提取工具都依赖正确的语义标记。
- 不要为了视觉对齐把多个
<ol></ol>拆开写，哪怕中间插了说明段落——该用<li> <p>说明文字</p> <ol>...</ol> </li>就用嵌套 - 步骤中含代码块时，
<pre class="brush:php;toolbar:false;"><code></code> 应放在 <code><li></code> 内，别放在外面，否则编号和内容脱节</pre> - 如果某一步骤需跳过编号（比如“可选”提示），别删
<li>，而应保留结构，用aria-hidden="true"配合视觉隐藏处理
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
