VS Code中Emmet生成ol列表的正确写法是ol>li*5，按Tab展开；避免ol+li*3等易错结构，嵌套推荐用ol>li{文本}+li{文本}>ol>li*2并手动检查闭合。

ol 标签本身没有浏览器原生的“快捷输入”能力，所谓“快速生成”完全依赖编辑器（如 VS Code）的 Emmet 功能，不是 HTML 标准的一部分。

VS Code 里用 Emmet 写 ol 列表的正确写法

Emmet 是唯一被广泛支持的快捷生成方式，但必须写对语法，否则会生成空标签或结构错乱：

• ol>li*5 → 生成带 5 个 li 的 ol，这是最常用、最稳妥的写法
• ol+li*3 → 生成一个空 ol + 三个独立 li（不在 ol 内），容易误用
• ol*2>li*3 → 生成两个并列的 ol，每个含 3 个 li，适合对比场景
• 写完按 Tab 触发展开，别用回车 —— 回车会换行中断 Emmet 解析

为什么 ol type="A" 不该在快捷输入里硬编码

Emmet 支持加属性，比如 ol[type="A"]>li*3，但不建议这么做：

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

• type 属性是 HTML4 遗留方案，现代项目统一用 CSS 控制： ol { list-style-type: upper-alpha; }
• Emmet 生成的 type 值只支持 1/A/a/I/i，不能写 type="Step 1." 或 emoji
• 如果后续要加 class 或 data 属性，ol.list-steps[type="A"]>li*3 一长串易出错，不如先生成基础结构再手动补

嵌套有序列表时，Emmet 容易漏掉闭合层级

想生成「主步骤 → 子步骤」结构，比如安装流程中的“配置环境”下再分三项，常见错误写法：

• ol>li>ol>li*3 → 看似合理，但实际生成的是 1 个 li 里塞了整个子 ol，没写文本占位，后期补内容容易错位
• 推荐写法：ol>li{第一步}+li{第二步}>ol>li*2，用 {} 显式注入文本，+ 表示同级，> 表示嵌套
• 更安全的做法：先写 ol>li*3，再手动把第二个 li 改成 li>ol>li*2
，结构清晰、不易嵌套错层

真正卡住人的从来不是“怎么生成”，而是生成后没检查 DOM 结构是否闭合完整 —— 尤其当 ol 里混了 div 或条件渲染片段时，少一个 就会让后续所有 li 被吞进上一级文本节点里。

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