Emmet属性和编号语法是高频刚需能力：属性用[]包裹且值须引号，编号$需在*重复中生效并正确嵌入属性值或{}内，否则解析失败。
Emmet 的属性和编号语法不是“可选技巧”，而是日常写 HTML 时高频、刚需的组合能力——比如批量生成带 data-id 的列表项、给多个 input 添加递增 name 和 id、或快速构建带编号标题的文档结构。用错位置或混用符号，轻则生成空标签，重则整个缩写被忽略。
属性写法：[] 里不能有空格，值必须用引号包裹（单/双均可）
Emmet 解析器对 [] 内容非常敏感：空格会中断解析，未引号的值（如 colspan=3）在多数编辑器中会被截断为 colspan="3"，但像 href=https://example.com 这类含冒号和斜杠的值，不加引号必然失败。
-
div[data-role="list" data-index="0"]→ 正确，双引号清晰界定值边界 -
a[href="https://a.com" target="_blank"]→ 正确，target值含下划线也不影响 -
input[type=number min=1 max=10]→ 错误，min=1会被解析为min="1"，但max=10后面若跟其他内容可能丢弃 -
img[src=logo.png alt=logo]→ 高风险，logo.png无引号时部分编辑器会报错或生成src="logo.png"但alt消失
编号 $：一个 $ 对应一位数字，多个 $ 控制位数，@ 控制起始与方向
$ 不是变量，而是“编号占位符”；它只在 *n 重复操作上下文中生效，单独写 div$ 不会生成任何数字。位数由 $ 个数决定：$ → 1,2,3；$$ → 01,02,03；$$$ → 001,002,003。
-
li.item$*4→- ...
-
h$[id="sec$"]{Section $}*3→Section 1
Section 2
Section 3
-
div.box$$$@-5*3→ 倒序且三位数，结果是box005、box004、box003 -
button.btn$@10*2→ 起始为 10，生成btn10、btn11，不是btn1、btn0
属性 + 编号混合时，$ 必须出现在属性值内部，不能放在 [] 外
常见错误是把 $ 写在 [] 右侧，比如 div[id="item"$]*3 ——这不会展开编号，只会原样输出 id="item"$。正确做法是让 $ 成为属性值字符串的一部分。
- ✅
a[href="page$.html" title="Link $"]*3→href="page1.html",href="page2.html"… - ✅
input#field$[name="field$" id="field$"]*3→ 三个input分别有id="field1"、name="field1"等 - ❌
div#id$[data-index="0"]*3→id会编号，但data-index固定为"0"，不会变 - ❌
div[id=item$]*3→ 多数编辑器直接忽略$，生成三个id="item$"
最易被忽略的是：当编号和文本 {} 同时出现时，$ 在 {} 里也要显式写出，比如 li{Item $}*3 才能生成 “Item 1”、“Item 2”，而 li{$}*3 会输出纯数字。属性值里的 $ 和文本里的 $ 是独立解析的，不能共用一个占位符。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
