Emmet 的官网：http://emmet.io/
以前写html和css常用的插件就是zen_coding，后来它升级为emmet了，现在搜集一下常用的技巧，希望对新手一些帮助。
在html文件中输入下面的简写脚本，按tab键就可生成标准的代码了。
1、html5
脚本：
html:5 生成： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
2、简单标签
脚本： div.header#header 生成： <div class="header" id="header"></div>
3、模糊标签
脚本： .wrap>ul>.item 生成： <div class="wrap"> <ul> <li class="item"></li> </ul> </div>
4、链式缩写
> 子节点：在DOM树下一层添加创建一个元素
+ 同级别：在DOM树同一层添加创建一个元素
^ 向上层：向上一层添加创建创建一个元素。
脚本： .outer>.inner>div+p>a^span 生成： <div class="outer"> <div class="inner"> <div></div> <p><a href=""></a></p> <span></span> </div> </div>
5、分组
脚本： (.top>a)+(.bom>a) 生成： <div class="top"><a href=""></a></div> <div class="bom"><a href=""></a></div>
6、添加文本和属性
脚本： div[title='测试']>span{测试}+a[href='/a/b']{测试} 生成： <div title="测试"><span>测试</span><a href="/a/b">测试</a></div>
7、多个class
脚本： .left.con.info 生成： <div class="left con info"></div>
8、控制标签个数
脚本： .wrap>ul>li*5 生成： <div class="wrap"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> 脚本： .wrap>(h1+p.con)*3 生成： <div class="wrap"> <h1></h1> <p class="con"></p> <h1></h1> <p class="con"></p> <h1></h1> <p class="con"></p> </div>
9、列表自动添加行号
脚本： ul>li.nav${$$标题}*5 生成： <ul> <li class="nav1">01标题</li> <li class="nav2">02标题</li> <li class="nav3">03标题</li> <li class="nav4">04标题</li> <li class="nav5">05标题</li> </ul>
可用的操作
展开缩写 - Tab键或按Ctrl + E
互动“展开缩写” - 按Ctrl + Alt + Enter键
对外的标签匹配对 - ^ D（MAC）/ Ctrl键 + ,（PC）
作用：选中光标所在的标签或文本,每多按一次都会向外层元素扩展选择。
标签匹配对向内 - ^ J / 按Ctrl + Alt +，
作用：选中光标所在的标签或文本,每多按一次都会向内层元素收缩选择。
对匹配 - ⇧^ T / 按Ctrl + Alt + J
作用：在标签的开始<>和结束</>来回跳转。
使用缩写包裹 - ^ W / Shift键+ Ctrl键+ G
ul.nav>li.nav-item$*>a|t |t能够去掉ul,ol等列表项的包裹内容标记，比如排序的数字。
ul>li[title=$#]*>{$#}+img[alt=$#] $#可以控制包裹内容位置
转到编辑点 - 按Ctrl + Alt +→或按Ctrl + Alt +←
使用缩写包裹 - ^ W / Shift键+ Ctrl键+ G
选择“属性值”html和css都可以选 - “ ⇧⌘。或⇧⌘ / 按Ctrl + Shift +。或Shift + Ctrl + ,
切换注释 - ⇧⌘/ / Shift + Ctrl键+ /
拆分/加入标签 - ⇧⌘ / Shift + Ctrl +`
删掉标签间的内容，并合并标签开始和结束符。生成标签的开始和结束符。
删除标记 - ⌘' / Ctrl + Shift +;
快速删掉标签并保留标签中的内容调整缩进。
更新图片大小 - ⇧^ I / 按Ctrl + U
html和css中设置默认图片大小
评估数学表达式 - ⇧⌘Ÿ / Shift键+ Ctrl键+ Y
2*4 or 10/2 做简单的加减乘除算术
体现价值CSS - ⇧⌘直径 / 按Ctrl + Shift + R
统一修改css3数据，修改透明数值。
编码/解码图像数据：URL - ⇧^ D / 按Ctrl +'
图片转编码
递增/递减编号操作：
改变数值
增量为1：按Ctrl +↑
减1：按Ctrl +↓
增量0.1：Alt +↑
递减0.1：Alt +↓
10增量：⌥⌘↑ / Shift键+ Alt +↑
递减10：⌥⌘↓ / Shift键+ Alt +↓
补充：
html:4t
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
html:4s
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
html:xt
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
html:xs
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
html:xxs
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">