Emmet是干啥的？为什么要用Emmet
在前端开发过程中，重复代码片段是比不可少的。Emmet就是一款生成HTML+CSS代码片段的神器。初识Emmet是在VS code上，因为没有发现自带HTML摸板……去问怎么快速生成。回答曰，!+Tab键即可。这就是因为VS code中内置了Emmet，而!+Tab也就是Emmet快速生成<!DOCTYPE html>代码片段的快捷键。
中文文档
http://yanxyz.github.io/emmet-docs/全部功能请移步中文文档。看上去很牛逼，但是有很多功能在webstorm和VS code中并不能用……不知道是快捷键冲突还是什么其他原因。
常用功能
类CSS写法
- 后代：>
- 兄弟：+
- 添加ID：#
- 添加class：.
- 自定义属性：如
p[title="Hello world"]就是<p title="Hello world"></p> - 文本：{}如
a{Click me}就是<a href="">Click me</a>
独特写法
- 分组：()
- 上级：^
- 简写：
:可以简写一部分常见type，比如input:file就是<input type="file" name="" id="">，form:post就是<form action="" method="post"></form>,link:favicon就是<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
防复读机
- 乘法：*，可以重复元素。
- 自增符号：$，多个$可以表达多个位数如$$$就是从0001开始。
- 修饰符：@，配合自增符号使用，可以改变编号的方向（升序或降序）及起点。将@- 放在$后，可以改为降序。将@N放在$后，可以改变起点，如@3就从3开始增加。
- 随机生成英文字符：lorem，后面可以加数字lorem30就是生成30个随机字符。
CSS简单缩写处理
大多数情况还是要用自动化构建工具，比如postcss。
- 厂商前缀：
-wmso-+需要加前缀的属性即可，wmso即webkit，moz，ms，o的缩写。
小小疑惑
Emmet在某次更新后改成了H5类型的标签不闭合模式，无论当前文档模式是如何。比如input标签就会补全为<input>而不是<input/>或者<input></input>。在webstorm环境下似乎还没啥快捷改回去的方法，用兼容性模式看了下暂时也没发现什么问题，可以先用着。
