Emmet 插件使用教程

时间 2020-06-03

标签 emmet 插件使用教程繁體版

原文原文链接

1）使用 Emmet 生成 HTML 的语法详解
生成 HTML 文档初始结构css

HTML 文档的初始结构，就是包括 doctype、html、head、body 以及 meta 等内容。你只须要输入一个 “!” 就能够生成一个 HTML5 的标准文档初始结构，你没有看错，输入一个感叹号（固然是英文符号），而后摁下 TAB 键，就会发现生成了下面的结构：html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    < title>Document</title>
</head>
<body>
<!-- code... -->
</body>
</html>

这就是一个 HTML5 的标准结构，也是默认的 HTML 结构。若是你想生成 HTML4 的过渡型结构，那么输入指令 html:xt 便可生成以下结构：git

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    < title>Document</title>
</head>
<body>

</body>
</html>

Emmet 会自动把 doctype 给你补全了，怎么样，这样的功能会不会让你动心？简单总结一下经常使用的 HTML 结构指令：github

html:5 或者 ! 生成 HTML5 结构
html:xt 生成 HTML4 过渡型
html:4s 生成 HTML4 严格型
生成带有 id 、class 的 HTML 标签web

Emmet 的语法有点相似 CSS 的语法，生成 id 为 aaa 的 div 标签，咱们只须要编写下面指令：c#

#aaa

Emmet 默认的标签为 div ，若是咱们不给出标签名称的话，默认就生成 div 标签。若是编写一个 class 为 bbb 的 span 标签，咱们须要编写下面指令：浏览器

span.bbb

而后就生成了对应的结构。同理，若是想要编写一个 id 为 ccc 的 class 为 ddd 的 ul 标签，咱们能够这样写：svg

ul#ccc.ddd

很简单吧？比你用手写 id 、class 方便多了吧工具

生成后代：>测试

大于号表示后面要生成的内容是当前标签的后代。例如我要生成一个无序列表，并且被 class 为 aaa 的 div 包裹，那么可使用下面指令：

div.aaa>ul>li

能够生成以下的结构：

<div class="aaa">
    <ul>
        <li></li>
    </ul>
</div>

生成兄弟：+

上面是生成下级元素，若是想要生成平级的元素，就须要使用 + 号。例以下面指令：

div+p+bq

就能够生成以下的 HTML 结构：

<div></div>
<p></p>
<blockquote></blockquote>

生成上级元素：^

上级（Climb-up）元素是什么意思呢？前面我们说过了生成下级元素的符号“>”，当使用 div>ul>li 的指令以后，再继续写下去，那么后续内容都是在 li 下级的。若是我想编写一个跟 ul 平级的 span 标签，那么我须要先用 “^” 提高一下层次。例如：

div>ul>li^span

就会生成以下结构：

<div>
    <ul>
        <li></li>
    </ul>
    <span></span>
</div>

若是我想相对与 div 生成一个平级元素，那么就再上升一个层次，多用一个“^”符号：

div>ul>li^^span

重复生成多份：*

特别是一个无序列表，ul 下面的 li 确定不仅是一份，一般要生成不少个 li 标签。那么咱们能够直接在 li 后面 * 上一些数字：

ul>li*5

这样就直接生成五个项目的无序列表了。若是想要生成多份其余结构，方法相似。

生成分组：()

用括号进行分组，这样能够更加明确要生成的结构，特别是层次关系，例如：

div>(header>ul>li*2>a)+footer>p

这样很明显就能够看出层次关系和并列关系，生成以下结构：

<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

此外，分组还能够很方便的结合上面说的 "*" 符号生成重复结构：

(div>dl>(dt+dd)*3)+footer>p

生成结构：

<div>
    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
    </dl>
</div>
<footer>
    <p></p>
</footer>

生成自定义属性：[attr]

a 标签中每每须要附带 href 属性和 title 属性，若是咱们想生成一个 href 为 http://www.yunxiu.org/blog ，title 为“我爱水煮鱼”的 a 标签，能够这样写：

a[href="http://www.yunxiu.org/blog" title="云袖网"]

其余标签和属性都相似。

对生成内容编号：$

例如无序列表，我想为五个个 li 增长一个 class 属性值 item1 ，而后依次递增从 1-5，那么就须要使用 $ 符号：

ul>li.item$*5

这样就生成了以下结构：

<ul>
 <li class="item1"></li>
 <li class="item2"></li>
 <li class="item3"></li>
 <li class="item4"></li>
 <li class="item5"></li>
</ul>

$ 就表示一位数字，只出现一个的话，就从1开始。若是出现多个，就从0开始。若是我想生成三位数的序号，那么要写三个 $：

ul>li.item$$$*5

输出：

<ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
    <li class="item004"></li>
    <li class="item005"></li>
</ul>

只能这样单调的生成序号？对于强大的 Emmet 来讲，确定不会会了，咱们也能够在 $ 后面增长 @- 来实现倒序排列：

ul>li.item$@-*5

生成以下结构：

<ul>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>

一样，咱们也可使用 @N 指定开始的序号：

ul>li.item$@3*5

这样就会从 3 开始排序，生成以下代码：

<ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
</ul>

配合上面倒序输出，能够这样写：

ul>li.item$@-3*5

生成的就是以 3 为底倒序：

<ul>
    <li class="item7"></li>
    <li class="item6"></li>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
</ul>

生成文本内容：{}

上面讲解了如何生成 HTML 标签，那里面的内容呢？固然也能够生成了：

a[href="http://www.yunxiu.org/blog"]{点击这里到 云袖网}

这样就生成了一个到我爱水煮鱼的超连接了。在生成内容的时候，特别要注意先后的符号关系，虽然 a>{Click me} 和 a{Click me} 生成的结构是相同的，可是加上其余的内容就不必定了，例如：

<!-- a{click}+b{here} -->
<a href="">click</a><b>here</b>

<!-- a>{click}+b{here} -->
<a href="">click<b>here</b></a>

这样就生成了彻底不一样的结构，注意这些小细节哦。

不要有空格

在写指令的时候，你可能为了代码的可读性，使用一些空格什么的排版一下。这就会致使代码没法使用。例以下面这句：

(header > ul.nav > li*5) + footer

而去掉空格以后，就能够正常执行生成结构了。

2）Emmet 快速编写 CSS 的技巧

首先，Sublime Text 2 已经提供了比较强大的 CSS 样式所写方法来提升 CSS 编写效率。例如编写 position: absolute; 这一个属性，咱们只须要输入 posa 这四个字母便可。它会弹出缩写样式的提示：

简写属性和属性值

若是你想生成 width:100px; 你只须要输入 w100 就能够了，由于 Emmet 的默认设置 w 是 width 的缩写，后面紧跟的数字就是属性值。默认的属性值单位是 px ，你能够在值的后面紧跟字符生成单位，能够是任意字符。例如，w100foo 会生成 width:100foo; 这样一条语句。你一样也能够简写属性单位，若是你紧跟属性值后面的字符是 p ，那么将会生成 width:100%; 这样的语句，其中 p 表示百分比单位。与此相似的还有：e → em; x → ex。

例如 margin 这样的属性，可能并非一个属性值，生成多个属性值须要用横杠（-）链接两个属性值，由于 Emmet 的指令中是不容许空格的。例如使用 m10-20 这条命令能够生成 margin: 10px 20px; 这样一条语句。若是你想生成负值，多加一条横杠便可。须要注意的是，若是你对每一个属性都指定了单位，那么不须要使用横杠分割。例如使用 m10ff20ff 这条命令能够生成margin: 10ff 20ff; 这条语句，若是你在 20ff 前面加了横杠的话，20ff 就会变成负值了。

若是你想一次生成多条语句，可使用 '+' 链接两条语句，例如使用 h10p+m5e 能够生成 height: 10%;margin: 5em; 这两条语句。

颜色值也是能够快速生成的，例如 c#3 → color: #333;，更复杂一点的，使用 bd5#0s 能够生成 border: 5px #000 solid; 这样一句。下面是规则：

#1 → #111111
#e0 → #e0e0e0
#fc0 → #ffcc00

生成 !important 这条语句也固然很简单，只须要一个 '!' 就能够了。

增长额外的选项

使用 @f 便可生成 CSS3 中的 font-face 的代码结构：

@font-face {
font-family:;
src:url();
}

可是这个结构太简单，不包含一些其余的 font-face 的属性，诸如 background-image、 border-radius、 font、@font-face、 text-outline、 text-shadow 等属性，咱们能够在生成的时候输入 '+' 生成加强的结构，例如咱们能够输入 @f+ 命令，便可输出选项加强版的 font-face 结构：

@font-face {
 font-family: 'FontName';
 src: url('FileName.eot');
 src: url('FileName.eot?#iefix') format('embedded-opentype'),
 url('FileName.woff') format('woff'),
 url('FileName.ttf') format('truetype'),
 url('FileName.svg#FontName') format('svg');
 font-style: normal;
 font-weight: normal;
}

增长实验性前缀（Vendor Prefixes）

CSS3 等如今尚未出正式的 W3C 规范，可是不少浏览器已经实现了对应的功能，仅做为测试只用，因此在属性前面加上本身独特的实验性前缀，不一样的浏览器只会识别带有本身规定前缀的样式。然而为了实现兼容性，咱们不得不编写大量的冗余代码，并且要加上对应的前缀。使用 Emmet 能够快速生成带有前缀的 CSS3 属性。

ST2 已经内置了一些常见的须要实验性前缀的 CSS3 属性，例如输入 trf 会弹出提示，而后敲击回车键便可生成。而 Emmet 加强了这个功能。在任意字符前面加上一条横杠（-），便可生成该属性的带前缀代码，例如输入 -foo-css，会生成：

-webkit-foo-css: ;
-moz-foo-css: ;
-ms-foo-css: ;
-o-foo-css: ;
foo-css: ;

虽然 foo-css 并非什么属性，可是照样能够生成。此外，你还能够详细的控制具体生成哪几个浏览器前缀或者前后顺序，使用 -wm-trf 便可生成：

-webkit-transform: ;
-moz-transform: ;
transform: ;

可想而知，w 就是 webkit 前缀的缩写，m 是 moz 前缀缩写，s 是 ms 前缀缩写，o 就是 opera 浏览器前缀的缩写。若是使用 -osmw-abc 便可生成：

-o-abc: ;
-ms-abc: ;
-moz-abc: ;
-webkit-abc: ;
abc: ;

生成渐变背景

CSS3 中新增长了一条属性 linear-gradient 使用这个属性能够直接制做出渐变的效果。可是这个属性的参数比较复杂，并且须要添加实验性前缀，无疑须要生成大量代码。而在 Emmet 中使用 lg() 指令便可快速生成，例如：使用 lg(left, #fff 50%, #000) 能够直接生成：

background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #fff), to(#000));
background-image: -webkit-linear-gradient(left, #fff 50%, #000);
background-image: -moz-linear-gradient(left, #fff 50%, #000);
background-image: -o-linear-gradient(left, #fff 50%, #000);
background-image: linear-gradient(left, #fff 50%, #000);

直接帮你生成好了浏览器前缀。

3) Emmet 经常使用的高级功能

生成 Lorem Ipsum

Lorem Ipsum 表示一段随机看不懂的文字。Lorem Ipsum 的文字让人看不懂，这样才能忽略内容的含义而专一内容的排版，做为测试数据填充用的。使用 Emmet 生成 Lorem Ipsum 文本很是简单，只须要使用 lorem 这一条命令便可，敲击 Tab 键以后，就会生成以下一段文字：

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, dolor, aperiam ab repellendus blanditiis eum exercitationem. Quae, reprehenderit repellat impedit asperiores consequatur? Illum quos magnam odit omnis recusandae natus similique.

Emmet 的 lorem 命令不只仅只有输出这么一段文字这样一个简单的功能，它既然做为测试数据，能够加上参数指定要输出的字符数量。例如，咱们若是想输出一个十个单词的 h1 标题，咱们就可使用以下命令 h1>lorem10 。可是这项功能对于使用中文的网页测试来讲，好像没有多大用处，毕竟中文和英语单词的排版是不一样的。

跳转编辑区域

写代码通常要用到两只手，有时候须要跳转到别的代码段等，你可使用键盘方向键也可使用鼠标。可是这都有缺陷，使用键盘方向键移动太慢了，并且须要按住 shift 键和方向键选中代码；使用鼠标的话，手就必须离开键盘，来回也会浪费一些时间。而 Emmet 提供了一个很实用的功能，就是整块的跳转。

为了方便理解，先看一下官方的 Demo 动画。这个功能，使用 Shift+Ctrl+. 和 Shift+Ctrl+, 分别向下或者向上移动，选取的是一整块，先从标签开始，再是整个属性，再是属性值。这样，比键盘的方向键移动高效多了。

增长图片的尺寸大小

有时候，咱们须要给标签增长对应的 width、height 属性来表示图片的大小或者给经过 background-image 属性引用的背景图片一个尺寸大小。一般的作法是看一下图片的尺寸，而后加上，而如今，你只须要将光标移动到代码段，摁下 Ctrl+U 便可让 Emmet 自动读取图片的尺寸添加上。前提条件是图片比较存在而且正确引用进来了。

若是是针对标签的，会在后面加上 width、height 属性，若是是 background 引入的，会在下面加上 width、height 的 CSS 属性。能够看一下官方的 Demo 。可是这里有个问题，官方的 Demo 中，实现这个功能的快捷键是 Shift+Ctrl+U 但实际使用中，这个快捷键不起做用。关于 Emmet 的 Mac、Win 下的快捷键，以这个页面上的为准：https://github.com/sergeche/emmet-sublime#available-actions。

更新 CSS 的属性值

咱们在写 CSS 的时候，有时候为了 hack 写不少带有前缀的属性。例如：

-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);

若是咱们忽然想修改一下旋转的角度值，那么咱们就须要依次修改或者按住 Ctrl 多个选中进行修改。使用 Emmet 的话，就方便多了，咱们只须要修改其中一个，而后摁下 Shift+Ctrl+R 键便可更新其余的相关属性值。

将图片资源转换成 data url 形式

data url 图片具备不少优势，在某些状况下比较实用，可是将图片转换成 data url 格式就比较麻烦了，得使用一些工具。而在 Emmet 中，将光标移动到 background: url() 中的图片位置的地方，按下 Ctrl+’ 便可将图片编码成 data url 格式。固然，前提条件是图片资源引用正确。

除此以外，Emmet 还有一些其余的诸如快速跳转、计算等等经常使用功能，在这里只是介绍了几个更经常使用的功能，有兴趣的朋友能够打开Emmet Action 的官方文档看一下 Demo，这里再也不赘述。