emmet高级技巧

编写好HTML和CSS代码时，咱们也须要修改或添加一些内容，Emmet提供了不少很是独特的工具，能够大大提升编辑体验，下面咱们挑选几个经常使用的功能来介绍。

萨龙龙发如今sublime text中安装的Emmet插件的快捷键与官方的演示文档中提供的快捷键不同，这时咱们就要修改Emmet快捷键或者查找在sublime text中的Emmet快捷键。

修改快捷键，打开PreFerences——Package Settings——Emmet中进行修改，只查看快捷键，好比：Match Tag Pair快捷键，打开工具中的命令面板ctrl+shift+p，输入：match就能够查看到。

本文的使用到的快捷键与官方演示中的快捷键同样。

一、展开缩写（Expand Abbreviation） Demo

这个功能在一开始介绍Emmet时就已经介绍，这是Emmet最核心的功能。

二、生成测试文本Lorem Ipsum Demo

在编写HTML代码时，有时须要添加一些内容，Emmet提供了一段随机的看不懂的英文字段，做为测试数据咱们就能够调用。而生成Lorem Ipsum文本也很是简单，输入lorem，按Tab键，就能够生成下面这段文字：

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, non, minima, voluptas ducimus
voluptatem perspiciatis id delectus maiores saepe porro aliquam sunt pariatur eaque. Enim,
voluptatem nesciunt voluptate ad veritatis.

Emmet的lorem这一功能不只仅只为生成一段文本，使用lorem默认生成30个单词的文本，能够为它指定单词的数量来随机生成一大段文本。

三、若是要生成标题呢，只需减小单词的数量，好比：lorem4将生成下面的标题：

Lorem ipsum dolor sit.

上面的例子只是生成单独的测试文本，与HTML标签一块儿编写也很简单，就像Emmet快速编写HTML代码文章中生成父子关系的代码同样：

h2>lorem4

将生成：

<h2>Lorem ipsum dolor sit.</h2>

p*4>lorem4

将生成：

<p>Lorem ipsum dolor sit.</p>
<p>Dolores, similique veritatis reprehenderit.</p>
<p>Cupiditate repudiandae numquam earum.</p>
<p>Atque, sequi autem praesentium?</p>

因此lorem为咱们提供了强大的测试数据，提升了编写HTML代码的速度，让咱们专心编写代码。

四、扩展缩写（Wrap with Abbreviation）Demo

一个很是强大的功能，在当前HTML代码的基础上添加缩写，将向外扩展代码，好比这段代码，光标在p标签上或者外部：

<div id="page">
    <p>Hello world</p>
</div>

再按shift+ctrl+g，弹出：Enter Wrap Abbreviation（输入扩展缩写），在其中输入：

.wrapper>h1{Title}+.content

将获得：

<div id="page">
    <div class="wrapper">
        <h1>Title</h1>
        <div class="content">
            <p>Hello world</p>
        </div>
    </div>
</div>

五、把文本转换成HTML标签

当客户给咱们提供了一个文本文档，把标题复制过来，好比：

首页
公司简介
公司动态
关于咱们
联系咱们

转换成导航，选择文本，再按shift+ctrl+g，弹出：Enter Wrap Abbreviation（输入扩展缩写），在其中输入：

nav>ul.nav>li.nav-item$*>a

将获得：

<nav>
    <ul class="nav">
        <li class="nav-item1"><a href="">首页</a></li>
        <li class="nav-item2"><a href="">公司简介</a></li>
        <li class="nav-item3"><a href="">公司动态</a></li>
        <li class="nav-item4"><a href="">关于咱们</a></li>
        <li class="nav-item5"><a href="">联系咱们</a></li>
    </ul>
</nav>

注意，导航中有5个菜单，这里不须要在li标签后面使用*5，只需使用单独的操做符*就能够。

若要设置class="nav-item001"，则用：

nav>ul.nav>li.nav-item$$$*>a

六、删除文本中的列表标记

word文档中的文本不少都是列表块，好比：

1.首页
2.公司简介
3.公司动态
4.关于咱们
5.联系咱们

在编写HTML代码又不须要，Emmet让咱们能够删除文本中的标记，在上一功能的缩写的基础代码的后面添加|t就能够删除文本中的标记:

nav>ul.nav>li.nav-item$*>a|t

最终获得的HTML代码与上面的效果是同样的，你能够试试！

七、控制文本的输出位置

默认状况下，用Emmet把文本转换为HTML代码时，使用$#操做符Emmet能够将文本输出到多个元素中，而$#平上Emmet缩写语法中的一部分，因此得将$#放在属性值[]或文本{}操做符中。

以上面的导航文本为例，在Enter Wrap Abbreviation中输入：

ul>li[title=$#]*>{$#}+img[alt=$#]

将获得：

<ul>
    <li title="首页">首页<img src="" alt="首页"></li>
    <li title="公司简介">公司简介<img src="" alt="公司简介"></li>
    <li title="公司动态">公司动态<img src="" alt="公司动态"></li>
    <li title="关于咱们">关于咱们<img src="" alt="关于咱们"></li>
    <li title="联系咱们">联系咱们<img src="" alt="联系咱们"></li>
</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+shift+r快捷键，其它相关的属性值也相应的改变。

十、选择匹配标签（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。

1三、添加与删除注释（Toggle Comment）Demo

以前在添加注释时都是一个符号一个的敲出来的，真有点辛苦，也很烦。Emmet提供的注释开关功能太棒了，只需使用ctrl+/快捷键就能够添加与删除注释，不过其注释的范围是以行为单位，在HTML和CSS代码中均可以使用。

1四、移除标签（Remove Tag）Demo

在一些大型的HTML代码中，有时标签嵌套的太多，经过Emmet移除标签这一功能，快速的移除多余的匹配的开始标签与闭合标签，快捷键：ctrl+shift+;(in windows)。

1五、更新图片大小（Update Image Size）Demo

不少时候在编写HTML代码中的img标题与CSS样式中的background-image时，须要知道图片的宽度与高度，老是在电脑中找到图片查看其尺寸，浪费时间又很不爽。而Emmet为咱们提供这一功能，只需将光标移动到img或background-image标签上，按下ctrl+u(in windows)，Emmet会自动读取图片的尺寸并添加。

前提是引用的图片地址正确且存在，并且路径中不能有中文，必需是英文字符，否则把键盘敲烂也不会有反应。

1六、数字递增/递减（Increment/Decrement Number）Demo

数字递增/递减，能够以0.一、1和10三个值进行递增/递减，快捷键分别是：ctrl+up/down、alt+up/down和ctrl+alt+up/down。

1七、数学计算表达式（Evaluate Math Expression）Demo

有了Emmet在HTML和CSS文件中均可以进行简单的数字运算，神奇了，输入4*8再按ctrl+shift+y，Emmet能给出最终的结果。

1八、将图片编译成data:URL模式（Encode/Decode Image to data:URL）Demo

data:URL模式，是利用base64编码把图片数据翻译成标准ASCII字符，在本地直接绘制图片，不是从服务器加载，减少HTTP请求，从而提升网页的加载速度。

将图片转换成data:URL模式，Emmet为咱们提供的最简便、快速的方法，将光标放在img或background-image标签的图片上，按ctrl+shift+b快捷键，完美的转换。

 

原文出至：http://yfdxs.com/emmet-advanced.html

参考：http://docs.emmet.io/actions/expand-abbreviation/

标红处作出了修改