前言： 自从换上了Visal Studio Code后，爱不释手， 主要还是相对于IDE而言比较的是轻便，其实在开发过程中，很多的功能不是很需要。特别是在开发网页中就不的不提一下Emmet插件了。之前没有怎么好好看，最近前端网页写的比较多，稍微学了一下Emmet发现效率大增。我目前的主力编辑器还是Visal Studio Code，这款编辑器内置了Emmet，所以不需要安装任何插件，如果你使用的是Atom或者Sublime Line可以需要配置一下。
语法
所有的Emmet的出发都是快捷键的Tab，所以在使用上了Emmet后的场景通常是需要编写缩写标签后疯狂按Tab。
首先我们从一个HTML网页开始吧，目前所有的网页基本上都是H5页面，所以我们使用Emmet可以非常快捷的生成H5页面架子， 所需要做 html5 然后按下回车即可（仅在VS code中）。
子元素操作符: >
所有的元素都是靠近的，中间不能有空格。
div>ul>li
展开后表示
<div>
<ul>
<li></li>
</ul>
</div>
相近元素操作符：+
+号表示所有的元素都是在同一级
div+p+bq
展开后表示
<div></div>
<p></p>
<blockquote></blockquote>
父元素操作符：^
因为 + > 操作符都是向下，所以如果要相对当前曾经向上一级可以使用^
div+div>p>span+em^bq
展开后表示
<div></div>
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div>
乘法操作符： *
使用 * 可以让元素重复输出
ul>li*5
展开后表示
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
括号操作符:（）
使用括号来讲一些元素 放在一起来操作
div>(header>ul>(li>a)*2)+footer>p
展开后表示为
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
ID 和class操作符
通过Emmet也可以很方便的给标签赋予 ID和class
div#header+div.page+div#footer.class1.class2.class3
展开后表示
<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>
重复数字操作符: $
$ 可以和 * 配合快速给 大量的标签起名 每一个$表示一个数字占位符
ul>li.item$*5
展开后表示
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>
字符操作符: {}
通过使用大括号 还给标签内部的字符串复制
a{Click me}
展开后表示
<a href = ""> Click me </a>
