{}用于在emmet中为标签直接插入文本内容，按tab生成带子节点的闭合标签；其作用范围受>、+、()等操作符影响，与$结合可实现编号但不支持文本内补零，且不解析lorem等命令。
{} 操作符的基本用法
直接在标签缩写后加 {}，里面填文本，按 Tab 就能生成带内容的闭合标签。它不是“插入”或“追加”，而是从一开始就把文本作为元素的子节点生成。
常见错误是写成 p{Hello}+span{World} 却期待结果是 <p>Hello</p>
<span>World</span> —— 实际上这确实可行；但若写成 p>{Hello}+span{World}，就会变成 <p>Hello<span>World</span></p>，因为 > 改变了作用域层级。
-
p{Hello World}→<p>Hello World</p> -
a[href="#"]{Click me}→@#@#@#@#@#@#@#@#@#@0 -
h2{Section $}*3→ 生成三个<h2>Section 1</h2>、<h2>Section 2</h2>、<h2>Section 3</h2>
{} 和 $ 序号结合时的坑
当 {} 里含 $，它会和前面的 *n 或 item$ 中的 $ 同步计数，但不会自动补零 —— 补零只对 class/id/属性值生效，对文本内容无效。
比如 li.item$$$*3{Item $}，结果是：<li class="item001">Item 1</li>、<li class="item002">Item 2</li>、<li class="item003">Item 3</li>。但如果你只写 {Item $$$}，$$$ 不会被解析为补零，只是原样输出字符串 Item $$$。
- 想让文本也补零？得靠外部工具或手动拼接，Emmet 本身不支持
{Item $$$}这种写法 -
$@5可用于起始编号，如li{Item $@5}*2→<li>Item 5</li> <li>Item 6</li> - 多个
$出现在同一缩写中（如 class + text），它们共享同一个计数值
{} 在嵌套结构中的行为差异
括号 () 和父子操作符 > 会影响 {} 的归属范围，这点极易混淆。
例如：div>p{hello}+span{world} 生成的是 <div>
<p>hello</p>
<span>world</span>
</div>；而 div>(p{hello}+span{world}) 效果一样；但 div>p>{hello}+span{world} 会把 span 塞进 p 里，变成 <div><p>hello<span>world</span></p></div>。
- 没写
>时，{}绑定到最近的左侧标签 - 写了
>，{}就绑定到被嵌套的子元素上 -
+是同级，>是父子，这个优先级必须理清，否则文本会出现在错的位置
{} 与 lorem 占位文本混用的限制
lorem 是 Emmet 内置的假文生成器，但它和 {} 不是同一机制：前者是命令式函数调用，后者是静态文本插值。
你不能写 p{lorem3} 来生成三词假文 —— 这只会输出字面量 <p>lorem3</p>。正确写法是 p>lorem3（无 {}），或 p{Lorem ipsum dolor} 手动填。
-
lorem必须单独作为子元素出现，如div>lorem10、p>lorem（默认 30 字） -
{}里无法触发任何 Emmet 解析逻辑，纯文本透传 - 需要动态占位又带编号？只能组合使用，比如
li{Item $}>lorem2，先编号再生成假文子节点
最常被忽略的一点：{} 里的空格、换行、中文标点都会原样保留，但 HTML 渲染时连续空白会被压缩。如果需要保留格式，得额外加 white-space: pre-wrap 或用 <pre class="brush:php;toolbar:false;"></pre> 包裹 —— Emmet 不处理样式，只管结构和文本字面量。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
