emmet语法总结

emmet 语法

1. 标签与内容

标签名称{text}，如：

• {text},默认生成div块
  <div>text</div>
• h3{h3title}
  <h3>h3title</h3>

2. 属性和语法糖[attr]

• .classname{标签内容}, 如 title{div标签文本内容}
  <div class="title">div标签文本内容</div>
• [id=idname]{标签内容}
  <div id="idname">标签内容</div>
• [class=classname]{标签内容}
  <div class="classname">标签内容</div>
• 因为id和class是高频通用属性，emmet定制了“语法糖”：id=>#,class=>.
  — #idname{标签内容}
  <div id="idname">标签内容</div>
  — .classname{标签内容}
  <div class="classname">标签内容</div>

3. 重复生成 *

• .container{box}*3

  <div class="container">box</div>
  <div class="container">box</div>
  <div class="container">box</div>

4. 父子： >

• ul.ulst#ulst>li.liitem{listtext}*3

   <ul class="ulst" id="ulst">
    <li class="liitem">listtext</li>
    <li class="liitem">listtext</li>
    <li class="liitem">listtext</li>
   </ul>

5. 兄弟： +

• h3{h3标题}+h5{h5标题}

  <h3>h3标题</h3>
  <h5>h5标题</h5>

6. 父级 ^

• .box>span{text}^h3{h3小标题}

   <div class="box">
    <span>text</span>
  </div>
   <h3>h3小标题</h3>

• .container>.box>span{text}^^h3{顶层h3小标题}

  <div class="container">
    <div class="box"><span>text</span></div>
   </div>
   <h3>顶层h3小标题</h3>

7. 分组 (...)

• nav>h3{导航}+(ul>li*3>a{link})

   <nav>
    <h3>导航</h3>
    <ul>
      <li><a href="">link</a></li>
      <li><a href="">link</a></li>
      <li><a href="">link</a></li>
    </ul>
   </nav>

8. 序号 $,$@

• 默认从1开始 ul>li{item-$}*3

   <ul>
    <li>item-1</li>
    <li>item-2</li>
    <li>item-3</li>
   </ul>

• 自定义从6开始 ul>li{item-$@6}*3

   <ul>
    <li>item-6</li>
    <li>item-7</li>
    <li>item-8</li>
   </ul>

• 逆序 ul>li{item-$@-1}*3

   <ul>
    <li>item-3</li>
    <li>item-2</li>
    <li>item-1</li>
   </ul>

• 逆序 ul>li{item-$@-5}*3

   <ul>
    <li>item-7</li>
    <li>item-6</li>
    <li>item-5</li>
   </ul>

• $序号扩展之 h$[title=item$]{Header $}*3

   <h1 title="item1">Header 1</h1>
   <h2 title="item2">Header 2</h2>
   <h3 title="item3">Header 3</h3>

• $序号扩展之 ul>li.item$$$*5

  <ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
    <li class="item004"></li>
    <li class="item005"></li>
  </ul>

  9. 其他之包装文本

  选中多行文本，按下Ctrl + Shift + P 打开命令窗口
  输入 ewrap
  选择 Emmet: 使用缩写进行包装 选项
  输入缩写字符，如 ul>li* 按下回车键，将文本包装为一个无序列表