HTML代码：Emmet(Zen coding)的使用技巧

Emmet（即Zen coding）称为是最棒的用以书写HTML代码的利器之一，能够提高你书写HTML代码的效率的一种工具。今天分享给大家关于Emmet书写HTML的技巧，希望能够为大家带去一丝的帮助吧！

1、跳过Div
跳过Div，Emmet可以很清楚的读懂你想要输入什么内容，你只需要输入class或是id，Emmet就会自动帮助你去生成正确的div。如下：

从上面这幅图片大家可以发现，不管是否主动添加div，Emmet都会自动生成需要的div元素。

含糊标签名称
这个技巧属性implicit names 特性，你完全不需要指定div或是li，Emmet会自动帮助你生成，如下图所示：

2、带有DOM导航的链式缩写
如果你使用Emmet来扩展简单的class名称生成div的话，通过Emmet是可以帮助节省更多时间的。你只需要记住下面这几个语法：

> 子节点：在DOM树下一层添加创建一个元素
+ 同级别：在DOM树下同一层添加创建一个元素
^ 向上层：向上一层添加创建一个元素

向上一层

根据需要你可以向上多层，如下图所示：

3、使用分组简化你的代码结构
很多时候会发现使用向上符号通常会显得比较复杂，这时候分组的方式却变得更为合适。如下图所示：

下面是一个较为复杂的图例：

4、插入文本和属性
如果需要生成HTML，内容和属性是一定要添加的。对于很多开发人员来说Emmet在生成页面框架的同时可以直接添加属性和内容，而不必先去生成框架，然后在去添加内容。
下面的图片可以看到，你所想要出现的文字和属性都是可以通过一个大括号和中括号同步生成一步到位的。

5、添加多个class到一个元素中
这个是非常简单的，只需要使用逗号隔开多个class就可以实现，如下图所示：

6、重复添加
这个可能对于开发者来说非常的方便，也不用绞尽脑汁的去思考了，傻瓜式的重复操作即可完成重复元素的添加：

如果你有整合分组功能，那么你就能够处理复杂的HTML生成：

7、自动列表记数
如果需要按照顺序生成HTML元素，那么下面这个技巧可以帮助你节省很多麻烦，使 “$” 符号可以帮助你生成一系列的数字，同样支持class，id，属性，内容等等。如下图所示：

如果你想要生成两位的数字，那么则需要添加两个“ $ ” 符号才可以实现效果！
对于以上的一下关于HTML开发中Emmet的使用技巧不知道有多少是大家所需要的，能够为大家提供多的帮助。不管采用哪一种方法，还是按照自己的习惯进行选择，可能使用起来会更加的顺手和方便吧，但是多掌握一项技巧也不是什么坏事，当遇到特殊环境或是遇到特殊问题的时候，或许多一种技巧方式能够帮你尽快解决问题呢！