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→<li class="item1"> ... <li class="item4"> -
h$[id="sec$"]{Section $}*3→<h1 id="sec1">Section 1</h1> <h2 id="sec2">Section 2</h2> <h3 id="sec3">Section 3</h3> -
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 会输出纯数字。属性值里的 $ 和文本里的 $ 是独立解析的,不能共用一个占位符。



















