emmet使用方法.docx

生成兄弟：

+

上面是生成下级元素，如果想要生成平级的元素，就需要使用+号。

例如下面指令：

div+p+bq

就可以生成如下的HTML结构：

生成上级元素：

^

上级（Climb-up）元素是什么意思呢？

前面咱们说过了生成下级元素的符号“>”，当使用div>ul>li的指令之后，再继续写下去，那么后续内容都是在li下级的。

如果我想编写一个跟ul平级的span标签，那么我需要先用“^”提升一下层次。

例如：

div>ul>li^span

就会生成如下结构：

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

div>ul>li^^span

重复生成多份：

*

特别是一个无序列表，ul下面的li肯定不只是一份，通常要生成很多个li标签。

那么我们可以直接在li后面*上一些数字：

ul>li*5

这样就直接生成五个项目的无序列表了。

如果想要生成多份其他结构，方法类似。

生成分组：

（）

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

div>（header>ul>li*2>a）+footer>p

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

此外，分组还可以很方便的结合上面说的“*”符号生成重复结构：

（div>dl>（dt+dd）*3）+footer>p

生成结构：

生成自定义属性：

[attr]

a标签中往往需要附带href属性和title属性，如果我们想生成一个href为“”，title为“我爱水煮鱼”的a标签，可以这样写：

a[href=""title="我爱水煮鱼"]

其他标签和属性都类似。

对生成内容编号：

$

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

ul>li.item$*5

这样就生成了如下结构：

$就表示一位数字，只出现一个的话，就从1开始。

如果出现多个，就从0开始。

如果我想生成三位数的序号，那么要写三个$：

ul>li.item$$$*5

输出：

只能这样单调的生成序号？

对于强大的Emmet来说，肯定不会会了，我们也可以在$后面增加@-来实现倒序排列：

ul>li.item$@-*5

生成如下结构：

同样，我们也可以使用@N指定开始的序号：

ul>li.item$@3*5

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

配合上面倒序输出，可以这样写：

ul>li.item$@-3*5

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

生成文本内容：

{}

上面讲解了如何生成HTML标签，那里面的内容呢？

当然也可以生成了：

a[href=""]{点击这里到我爱水煮鱼}

这样就生成了一个到我爱水煮鱼的超链接了。

在生成内容的时候，特别要注意前后的符号关系，虽然a>{Clickme}和a{Clickme}生成的结构是相同的，但是加上其他的内容就不一定了，例如：

--a{click}+b{here}-->

clickhere

--a>{click}+b{here}-->

clickhere

这样就生成了完全不同的结构，注意这些小细节哦。

不要有空格

在写指令的时候，你可能为了代码的可读性，使用一些空格什么的排版一下。

这就会导致代码无法使用。

例如下面这句：

（header>ul.nav>li*5）+footer

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

HTML语法部分说完了，现在回头看看第一篇文字，你是否已经看懂了那一串指令？

下一篇将会讲解快速编写CSS的技巧。

Emmet在css中的应用：

首先，SublimeText2已经提供了比较强大的CSS样式所写方法来提高CSS编写效率。

例如编写position:

absolute;这一个属性，我们只需要输入posa这四个字母即可。

它会弹出缩写样式的提示：

你不妨在编写CSS的时候，留意一下ST2提供了哪些属性的缩写方法，这样就可以提高一定的效率了。

但是Emmet提供了更多的功能，请往下看。

简写属性和属性值

如果你想生成width:

100px;你只需要输入w100就可以了，因为Emmet的默认设置w是width的缩写，后面紧跟的数字就是属性值。

默认的属性值单位是px，你可以在值的后面紧跟字符生成单位，可以是任意字符。

例如，w100foo会生成width:

100foo;这样一条语句。

你同样也可以简写属性单位，如果你紧跟属性值后面的字符是p，那么将会生成width:

100%;这样的语句，其中p表示百分比单位。

与此类似的还有：

e →em; x →ex。

例如margin这样的属性，可能并不是一个属性值，生成多个属性值需要用横杠（-）连接两个属性值，因为Emmet的指令中是不允许空格的。

例如使用m10-20这条命令可以生成margin:

10px20px;这样一条语句。

如果你想生成负值，多加一条横杠即可。

需要注意的是，如果你对每个属性都指定了单位，那么不需要使用横杠分割。

例如使用m10ff20ff这条命令可以生成margin:

10ff20ff;这条语句，如果你在20ff前面加了横杠的话，20ff就会变成负值了。

如果你想一次生成多条语句，可以使用‘+’连接两条语句，例如使用 h10p+m5e 可以生成height:

10%;margin:

5em;这两条语句。

颜色值也是可以快速生成的，例如 c#3 → color:

#333;，更复杂一点的，使用 bd5#0s 可以生成border:

5px#000solid; 这样一句。

下面是规则：

#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;

}

增加实验性前缀（VendorPrefixes）

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,#fff50%,#000） 可以直接生成：

background-image:

-webkit-gradient（linear,00,100%0,color-stop（0.5,#fff）,to（#000））;

background-image:

-webkit-linear-gradient（left,#fff50%,#000）;

background-image:

-moz-linear-gradient（left,#fff50%,#000）;

background-image:

-o-linear-gradient（left,#fff50%,#000）;

background-image:

linear-gradient（left,#fff50%,#000）;

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

Emmet的还有一些其他的强大功能，将在后面继续讲解介绍，尽请关注。

Emmet高级功能介绍：

生成LoremIpsum

LoremIpsum 表示一段随机看不懂的文字。

LoremIpsum的文字让人看不懂，这样才能忽略内容的含义而专注内容的排版，作为测试数据填充用的。

使用Emmet生成LoremIpsum 文本非常简单，只需要使用 lorem 这一条命令即可，敲击Tab键之后，就会生成如下一段文字：

Loremipsumdolorsitamet,consecteturadipisicingelit.Qui,dolor,aperiamabrepellendusblanditiiseumexercitationem.Quae,reprehenderitrepellatimpeditasperioresconsequatur?

Illumquosmagnamoditomnisrecusandaenatussimilique.

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下的快捷键，以这个页面上的为准：

更新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 键即可更新其他的相关属性值。

将图片资源转换成dataurl形式

dataurl图片具有很多优点，在某些情况下比较实用，但是将图片转换成dataurl格式就比较麻烦了，得使用一些工具。

而在Emmet中，将光标移动到background:

url（）中的图片位置的地方，按下 Ctrl+’ 即可将图片编码成dataurl格式。

当然，前提条件是图片资源引用正确。

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

Emmet的前身是大名鼎鼎的Zencoding，如果你从事Web前端开发的话，对该插件一定不会陌生。

它使用仿CSS选择器的语法来生成代码，大大提高了HTML/CSS代码编写的速度，比如下面的演示：

 

 

Zencoding下的编码演示

去年年底，该插件已经改名为Emmet。

但Emmet不只改名，还带来了一些新特性。

本文就来直观地演示给你。

 

一、快速编写HTML代码 

1. 初始化 

HTML文档需要包含一些固定的标签，比如、、等，现在你只需要1秒钟就可以输入这些标签。

比如输入“!

”或“html:

5”，然后按Tab键：

 

∙html:

5或!

：

用于HTML5文档类型

∙html:

xt：

用于XHTML过渡文档类型

∙html:

4s：

用于HTML4严格文档类型

2. 轻松添加类、id、文本和属性 

连续输入元素名称和ID，Emmet会自动为你补全，比如输入p#foo：

 

连续输入类和id，比如p.bar#foo，会自动生成

相关搜索

当前位置：首页 > 高中教育 > 初中教育