emmet 八种常见的语法格式
!+tag:快速生成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>
1.标签与内容：’｛txet｝’
.title{内容} 输出<div class="title">内容</div>
2.属性和语法糖 ‘[attr]’
[id=title]{title} 输出<div id="title">title</div>[class=title]{title} 输出<div class="title">title</div>id的语法糖 '#' class的语法糖 '.'#title{title} 输出<div id="title">title</div>.title{title} 输出<div class="title">title</div>
3.重复 ‘*’
.content{文本}*3 输出<div class="content">文本</div><div class="content">文本</div><div class="content">文本</div>
4.父子 ‘>’
div>ul>li{文本}*3 输出<div><ul><li>文本</li><li>文本</li><li>文本</li></ul></div>
5.兄弟关系 ‘+’
h2{biaoti}+p{wenben} 输出<h2>biaoti</h2><p>wenben</p>
6.父级 ‘^’
.title>p{text}^h2{text2} 输出<div class="title"><p>text</p></div><h2>text2</h2>
7.分组 ‘()’
nav>h3{title}+(ul>li{title2}*3) 输出 <nav><h3>title</h3><ul><li>title2</li><li>title2</li><li>title2</li></nav>
8.序号 ‘$’ ‘$@’
ul>li{item-$}*3 输出<ul> <li>item-1</li> <li>item-2</li> <li>item-3</li></ul>ul>li{item-$@3}*3 输出<ul> <li>item-3</li> <li>item-4</li> <li>item-5</li></ul>倒序： ul>li{item-$@-3}*3 输出<ul> <li>item-5</li> <li>item-4</li> <li>item-3</li></ul>
