Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具。Emmet把片段这个概念提高到了一个新的层次:你可以设置CSS形式的能够动态被解析的表达式,然后根据你所输入的缩写来得到相应的内容。Emmet是很成熟的并且非常适用于编写HTML/XML 和 CSS 代码的前端开发人员,但也可以用于编程语言。
示例
下载
插件下载地址:http://emmet.io/download/
支持的编辑器如下
文后有快捷键图下载地址
使用
在编辑器输入 html:5
按下tab键
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
1、新建一个标签
在编辑器输入 div
按下tab键
<div></div>
2、新建一个带class(名字为c1)和id(名字为id1)的标签
在编辑器输入 div#id1.c1
按下tab键
<div id="id1" class="c1"></div>
3、嵌套的标签
ul>li
<ul>
<li></li>
</ul>
4、创建多个标签
ul>li*5
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
5、创建多个标签并添加class
ul>li.l$*5
<ul>
<li class="l1"></li>
<li class="l2"></li>
<li class="l3"></li>
<li class="l4"></li>
<li class="l5"></li>
</ul>
6、创建同级标签
div.div1+ul>li*2
<div class="div1"></div>
<ul>
<li></li>
<li></li>
</ul>
更多使用方法,可以参见
Emmet快捷键图
图片下载地址
链接:http://pan.baidu.com/s/1jIjSQ7W 密码:27mx