Emmet常用的八种语法形式
1. !+tab:快速生成html5源码模板
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body></body></html>
2. 标签与内容 {text}
<!--h3{title}--><h3>title</h3>
3. 属性和“语法糖”：[attr]
<!--[id=app]{app1}--><div id="app">app1</div><!--[class=title]{title}--><div class="title">title</div>
id,class是高频通用属性，Emmet为他们定制了“语法糖”
id->#,class->.
<!--#app{app1}--><div id = "app">app1</div><!--.title{title}--><div class = "title">title</div>
4. 重复：*
<!--.container{box}*3--><div class="container">box</div><div class="container">box</div><div class="container">box</div>
5. 父子：>
<!--ul>li{item}*3--><ul><li>item</li><li>item</li><li>item</li></ul>
6. 兄弟：+
<!--h3{标题}+p{段落}--><h3>标题</h3><p>段落</p>
7. 回到上一级（父级）：^
<!--.box>span{text}^h3{666}--><div class="box"><span>text</span></div><h3>666</h3>
8. 分组（…）
<!--nav>h3{导航}+ul>li*3>a{link}--><!--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>
9. 序号：$,$@
<!--默认从1开始: ul>li{item-$}*3 --><ul><li>item-1</li><li>item-2</li><li>item-3</li></ul><!--自定义起始序号: 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>