</ul>
分解与添加标签（Split/Join Tag）Demo
光标在标签上时，按ctrl+j，可以将标签：
<div></div>
转换为
<div />
标签，反之亦然。当div中有内容时，使用这一功能一样会转换成上一标签，其中的内容也将删除，所以使用的时候我们也需要注意。
映射CSS属性值（Reflect CSS Value）Demo为了浏览器的兼容性，CSS样式中有很多带有属性值的前缀样式，如果修改值，需要修改好几个处，比如：
div {
padding: 10px;
-webkit-transform: rotate(50deg);
-moz-transform: rotate(50deg);
-ms-transform: rotate(50deg);
-o-transform: rotate(50deg);
transform: rotate(50deg);
opacity: 0.7;
filter: alpha(opacity=70);
}
在Emmet中我们只需修改旋转属性值的其中一个，再按ctrl+b快捷键，其它相关的属性值也相应的改变。
选择匹配标签（Match Tag Pair）Demo
在我们编写HTML代码时，需要选择开始标签到闭合标签中的代码，一般我们就用鼠标框选，虽然不是太麻烦，但Emmet为我们提供了更加方便、快捷的功能，扩大与缩少选择。
在鼠标光标处按快捷键ctrl+d，将会选择光标所在标签范围内的所有内容，多次运行将扩大选择。有扩大就有缩小，快捷键：crtl+shift+d，多次运行将缩小选择范围。
转到匹配的标签（Go to Matching Pair）Demo
在开始标签与闭合标签中跳转，快捷键：ctrl+t。在编写大型HTML文件时，总是找不到匹配的闭合标签，Emmet提供的这一功能就可以方便的为我们在开始与闭合标签中轻松地跳转。
跳 转到文本编辑点（Go to Edit Point）Demo这个功能适合在标记之间、空属性和空的文章标签中进行上下跳转，比如title、a、li、href、src等等需要输入内容的标题 中。上一个，下一个编辑点快捷键分别为ctrl+alt+left、ctrl+alt+right。
添加与删除注释（Toggle Comment）Demo
之前在添加注释时都是一个符号一个的敲出来的，真有点辛苦，也很烦。Emmet提供的注释开关功能太棒了，只需使用ctrl+/快捷键就可以添加与删除注释，不过其注释的范围是以行为单位，在HTML和CSS代码中都可以使用。
移除标签（Remove Tag）Demo
在一些大型的HTML代码中，有时标签嵌套的太多，通过Emmet移除标签这一功能，快速的移除多余的匹配的开始标签与闭合标签，快捷键：ctrl+k。
更 新图片大小（Update Image Size）Demo很多时候在编写HTML代码中的img标题与CSS样式中的background-image时，需要知道图片的宽度与高度，总是在电 脑中找到图片查看其尺寸，浪费时间又很不爽。而Emmet为我们提供这一功能，只需将光标移动到img或background-image标签上，按下 ctrl+shift+u，Emmet会自动读取图片的尺寸并添加。
前提是引用的图片地址正确且存在，而且路径中不能有中文，必需是英文字符，不然把键盘敲烂也不会有反应。
数字递增/递减（Increment/Decrement Number）Demo数字递增/递减，可以以0.1、1和10三个值进行递增/递减，快捷键分别是：ctrl+up/down、alt+up/down和ctrl+alt+up/down。
数学计算表达式（Evaluate Math Expression）Demo有了Emmet在HTML和CSS文件中都可以进行简单的数字运算，神奇了，输入4*8再按ctrl+shift+y，Emmet能给出最终的结果。
将 图片编译成data:URL模式（Encode/Decode Image to data:URL）Demodata:URL模式，是利用base64编码把图片数据翻译成标准ASCII字符，在本地直接绘制图片，不是从服务器加载， 减小HTTP请求，从而提高网页的加载速度。
将图片转换成data:URL模式，Emmet为我们提供的最简便、快速的方法，将光标放在img或background-image标签的图片上，按ctrl+shift+l快捷键，完美的转换。
Emmet的一些常用的快捷功能和特性，就介绍到这，现在运用这些功能与特性编写代码时，也许会觉得慢，当熟悉后，编写HTML代码和CSS样式会变得非常快速，将大大提高前端开发效率。
原文链接：http://salonglong.com/emmet-advanced.html
分解与添加标签（Split/Join Tag）Demo
光标在标签上时，按ctrl+j，可以将标签：
<div></div>
转换为
<div />
标签，反之亦然。当div中有内容时，使用这一功能一样会转换成上一标签，其中的内容也将删除，所以使用的时候我们也需要注意。
映射CSS属性值（Reflect CSS Value）Demo为了浏览器的兼容性，CSS样式中有很多带有属性值的前缀样式，如果修改值，需要修改好几个处，比如：
div {
padding: 10px;
-webkit-transform: rotate(50deg);
-moz-transform: rotate(50deg);
-ms-transform: rotate(50deg);
-o-transform: rotate(50deg);
transform: rotate(50deg);
opacity: 0.7;
filter: alpha(opacity=70);
}
在Emmet中我们只需修改旋转属性值的其中一个，再按ctrl+b快捷键，其它相关的属性值也相应的改变。
选择匹配标签（Match Tag Pair）Demo
在我们编写HTML代码时，需要选择开始标签到闭合标签中的代码，一般我们就用鼠标框选，虽然不是太麻烦，但Emmet为我们提供了更加方便、快捷的功能，扩大与缩少选择。
在鼠标光标处按快捷键ctrl+d，将会选择光标所在标签范围内的所有内容，多次运行将扩大选择。有扩大就有缩小，快捷键：crtl+shift+d，多次运行将缩小选择范围。
转到匹配的标签（Go to Matching Pair）Demo
在开始标签与闭合标签中跳转，快捷键：ctrl+t。在编写大型HTML文件时，总是找不到匹配的闭合标签，Emmet提供的这一功能就可以方便的为我们在开始与闭合标签中轻松地跳转。
跳 转到文本编辑点（Go to Edit Point）Demo这个功能适合在标记之间、空属性和空的文章标签中进行上下跳转，比如title、a、li、href、src等等需要输入内容的标题 中。上一个，下一个编辑点快捷键分别为ctrl+alt+left、ctrl+alt+right。
添加与删除注释（Toggle Comment）Demo
之前在添加注释时都是一个符号一个的敲出来的，真有点辛苦，也很烦。Emmet提供的注释开关功能太棒了，只需使用ctrl+/快捷键就可以添加与删除注释，不过其注释的范围是以行为单位，在HTML和CSS代码中都可以使用。
移除标签（Remove Tag）Demo
在一些大型的HTML代码中，有时标签嵌套的太多，通过Emmet移除标签这一功能，快速的移除多余的匹配的开始标签与闭合标签，快捷键：ctrl+k。
更 新图片大小（Update Image Size）Demo很多时候在编写HTML代码中的img标题与CSS样式中的background-image时，需要知道图片的宽度与高度，总是在电 脑中找到图片查看其尺寸，浪费时间又很不爽。而Emmet为我们提供这一功能，只需将光标移动到img或background-image标签上，按下 ctrl+shift+u，Emmet会自动读取图片的尺寸并添加。
前提是引用的图片地址正确且存在，而且路径中不能有中文，必需是英文字符，不然把键盘敲烂也不会有反应。
数字递增/递减（Increment/Decrement Number）Demo数字递增/递减，可以以0.1、1和10三个值进行递增/递减，快捷键分别是：ctrl+up/down、alt+up/down和ctrl+alt+up/down。
数学计算表达式（Evaluate Math Expression）Demo有了Emmet在HTML和CSS文件中都可以进行简单的数字运算，神奇了，输入4*8再按ctrl+shift+y，Emmet能给出最终的结果。
将 图片编译成data:URL模式（Encode/Decode Image to data:URL）Demodata:URL模式，是利用base64编码把图片数据翻译成标准ASCII字符，在本地直接绘制图片，不是从服务器加载， 减小HTTP请求，从而提高网页的加载速度。
将图片转换成data:URL模式，Emmet为我们提供的最简便、快速的方法，将光标放在img或background-image标签的图片上，按ctrl+shift+l快捷键，完美的转换。
Emmet的一些常用的快捷功能和特性，就介绍到这，现在运用这些功能与特性编写代码时，也许会觉得慢，当熟悉后，编写HTML代码和CSS样式会变得非常快速，将大大提高前端开发效率。
原文链接：http://salonglong.com/emmet-advanced.html