我们都用过Emmet，一款语法快捷生成辅助。输入
div然后 使用Tab键即可生成对应的<div></div>标签对，很大程度上可以帮助我们节省很大时间用来输出对应的html标签内容。
那这么好用的工具，我在想如果自己写一个实现呢？
首先我们要了解一下速写的一般规则。
1. 基础规则直接标签文字
比如使用div、span、ul、li等可以直接生成标签对
2. 一般选择器指令 # .
使用 #idname、.classname可以直接生成默认标签div的标签对，比如 #user生成<div id="user"></div>，跟上规则1的语法就可以生成指定标签的格式span.user-info生成<span class="user-info"></span>
3. 节点指令，这里就有 下级>、兄弟+、上级^
上级概念在css选择器中没有，但是在Emmet中拓展了。直接演示
1. div+span 生成相邻的两个节点
<div><div/>
<span></span>
2. div>span 生成父子嵌套节点
<div>
<span></span>
<div/>
3. div>span^ul 生成span上级的兄弟节点
<div>
<span></span>
<div/>
<ul></ul>
4. 属性 [attr]
属性选择器和一般选择器一样，默认标签为 div，但通常配合1.或者2.来使用，使用[ key=value ] 的格式，其中value如果是存在转义、空格的需要用引号概括起来，支持'和"
1. a[href="JavaScript:void(0)"]
<a href="JavaScript:void(0)"></a>
2. span[name=see]
<span name="see"></span>
5. 重复当前元素 *数量
ul>li*5 生成ul和5个li子节点
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
6. 分组 ()
分组也是很简单，表示当前为组合标签，主要和3.产生互动
1. div>span+div 分组前
<div>
<span></span>
<div></div>
</div>
2. (div>span)+div 分组后，将div>span看作一个整体，和+产生互动
<div>
<span></span>
</div>
<div></div>
7. 数字编号占位符 $
数字占编号位符用于重复元素的编号展位，和 5.产生交互，一个$代表从一位(1)开始，两个$$代表从2位(01)开始,依此类推。
@表示下表从几开始，@3代表从3开始计数
1. ul>li.class$*3
<ul>
<li class="class1"></li>
<li class="class2"></li>
<li class="class3"></li>
</ul>
2. ul>li.class$$*3
<ul>
<li class="class01"></li>
<li class="class02"></li>
<li class="class03"></li>
</ul>
3. ul>li.class$$@2*3 生成从2开始的两位
<ul>
<li class="class02"></li>
<li class="class03"></li>
<li class="class04"></li>
</ul>
8. 文本占位{文本}
文本占位可以迅速填充标签之间的文本内容，并且可以配合 7.一同使用
ul>li.class$@2*3{这是第$@6个}
<ul>
<li class="class2">这是第6个</li>
<li class="class3">这是第7个</li>
<li class="class4">这是第8个</li>
</ul>
9. 隐式标签
在一般情况下，元素的默认标签为div，但是在一些嵌套下，标签会根据父元素有所改变
ol、ul的默认下级标签为li
ol>.name*2
<ol>
<li class="name"></li>
<li class="name"></li>
</ol>
table、tbody、thead、tfoot的默认下级标签为tr
table>.row
<table>
<tr class="row"></tr>
</table>
tr的默认下级标签为td
tr>.col
<tr>
<td class="col"></td>
</tr>
*select和optgroup的默认下级标签为 option
select>optgroup>.car
<select name="" id="">
<optgroup>
<option class="car"></option>
</optgroup>
</select>
对于一些其他情况
基础规则下对于标签的一些缩写形似也是需要了解一些的，比如input系列
input <input />
input:p <input type="password"/>
input:t <input type="text"/>
input:f <input type="file"/>
input:h <input type="hidden"/>
input:c <input type="checkbox"/>
input:r <input type="radio"/>
input:b <input type="button"/>
input:i <input type="image"/>
input:s <input type="submit"/>
更多的内容其实我们不需要看，因为满足所需的日常规则都在这里了，这是规则的最小单元，而其他的无非就是规则的扩展，我们是不需要担心的。
