HTML中如何通过Emmet快速生成列表结构

常见错误是输入 ul>li*5 后按 Tab 没反应，或只生成单个 <li></li>。根本原因通常是：当前文件语言模式不是 html（比如误设为 plaintext 或 javascript），或光标不在标签可展开位置（如写在 JS 字符串里、注释中）。VSCode 默认只在 html、vue、jsx 等支持 Emmet 的语言模式下生效。

实操建议：

• 按 Ctrl+Shift+P（macOS 是 Cmd+Shift+P）调出命令面板，输入 “Change Language Mode”，确认当前是 HTML
• 确保光标在空白行或标签外（不要在引号内、{} 中、// 后）
• 输入后必须按 Tab 或 Enter，不能只靠回车或空格

如何给每个 li 添加 class 和自增序号？

手动写 class="item1"、class="item2" 很低效，$ 占位符才是关键。它不是变量，而是 Emmet 内置的编号指令，配合 * 才能触发递增。

正确写法示例：

立即学习“前端免费学习笔记（深入）”；

• li.item$*3 → 生成三个 <li class="item1"></li> 到 <li class="item3"></li>
• li.item$$$*4 → 三位补零：item001 ~ item004
• li.item$@10*2 → 从 10 开始：item10、item11
• 错误写法：li.item1*3（不会递增）、li.$item*3（$ 位置错，不生效）

带文本内容和属性的列表怎么一次写完？

用 {} 插入内容、[] 加属性，但顺序和嵌套层级直接影响输出结构。重点在于：内容和属性必须紧贴在标签缩写右侧，不能有空格隔开。

典型场景与写法：

• 普通带文字列表：ul>li{Item $}*3 → <li>Item 1</li> ×3
• 带 href 和 class 的导航项：nav>ul>li*3>a[href="#"]{Link $}
• 含 data 属性的菜单项：li[data-id=$]{Menu $}*5
• 错误示范：li {text} *3（空格导致解析失败）、li*3{Text}（{} 位置错，会被忽略）

复杂嵌套列表（如二级菜单）怎么避免手抖写漏？

多层 > 容易数错括号或漏掉符号，尤其当要混合 +（兄弟）和 ^（上移）时。最稳妥的方式是分段验证：先写最内层，再逐步外扩。

例如生成「主菜单 + 下拉子菜单」结构：

• 先试 li>a{Home}+ul>li*2>a{Sub $} → 验证子菜单是否生成正确
• 再包一层：nav>ul>li>a{Home}+ul>li*2>a{Sub $}+li>a{About}
• 注意 ^ 的作用：如果想让 ul 和 a 平级（即子菜单不嵌在链接里），得写成 li>a{Home}^ul>li*2
• VSCode 中可随时按 Ctrl+E（macOS Cmd+E）手动触发展开，避免依赖 Tab 键位置判断失误

真正容易被忽略的是：Emmet 不校验语义合法性，ul>div 这种 HTML5 不合法结构它也会照生成——你得自己知道什么该嵌、什么不该嵌。