Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生。它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,比如下面的演示:

 
Zen coding下的编码演示

去年年底,该插件已经改名为Emmet。但Emmet不只改名,还带来了一些新特性。本文就来直观地演示给你。

一、快速编写HTML代码

1.  初始化

HTML文档需要包含一些固定的标签,比如<html>、<head>、<body>等,现在你只需要1秒钟就可以输入这些标签。比如输入“!”或“html:5”,然后按Tab键:

  • html:5 或!:用于HTML5文档类型
  • html:xt:用于XHTML过渡文档类型
  • html:4s:用于HTML4严格文档类型

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

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

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

  1. <p class="bar" id="foo"></p>

下面来看看如何定义HTML元素的内容和属性。你可以通过输入h1{foo}和a[href=#],就可以自动生成如下代码:

  1. <h1>foo</h1>
  2. <a href="#"></a>

3.  嵌套

现在你只需要1行代码就可以实现标签的嵌套。

  • >:子元素符号,表示嵌套的元素
  • +:同级标签符号
  • ^:可以使该符号前的标签提升一行

效果如下图所示:

4.  分组

你可以通过嵌套和括号来快速生成一些代码块,比如输入(.foo>h1)+(.bar>h2),会自动生成如下代码:

  1. <div class="foo">
  2. <h1></h1>
  3. </div>
  4. <div class="bar">
  5. <h2></h2>
  6. </div>

5.  隐式标签

声明一个带类的标签,只需输入div.item,就会生成<div class="item"></div>。

在过去版本中,可以省略掉div,即输入.item即可生成<div class="item"></div>。现在如果只输入.item,则Emmet会根据父标签进行判定。比如在<ul>中输入.item,就会生成<li class="item"></li>。

下面是所有的隐式标签名称:

  • li:用于ul和ol中
  • tr:用于table、tbody、thead和tfoot中
  • td:用于tr中
  • option:用于select和optgroup中

6.  定义多个元素

要定义多个元素,可以使用*符号。比如,ul>li*3可以生成如下代码:

  1. <ul>
  2. <li></li>
  3. <li></li>
  4. <li></li>
  5. </ul>

7.  定义多个带属性的元素

如果输入 ul>li.item$*3,将会生成如下代码:

  1. <ul>
  2. <li class="item1"></li>
  3. <li class="item2"></li>
  4. <li class="item3"></li>
  5. </ul>

二、CSS缩写

1.  值

比如要定义元素的宽度,只需输入w100,即可生成

  1. width: 100px;

除了px,也可以生成其他单位,比如输入h10p+m5e,结果如下:

  1. height: 10%;
  2. margin: 5em;

单位别名列表:

  • p 表示%
  • e 表示 em
  • x 表示 ex

2.  附加属性

可能你之前已经了解了一些缩写,比如 @f,可以生成:

  1. @font-face {
  2. font-family:;
  3. src:url();
  4. }

一些其他的属性,比如background-image、border-radius、font、@font-face,text-outline、text-shadow等额外的选项,可以通过“+”符号来生成,比如输入@f+,将生成:

  1. @font-face {
  2. font-family: 'FontName';
  3. src: url('FileName.eot');
  4. src: url('FileName.eot?#iefix') format('embedded-opentype'),
  5. url('FileName.woff') format('woff'),
  6. url('FileName.ttf') format('truetype'),
  7. url('FileName.svg#FontName') format('svg');
  8. font-style: normal;
  9. font-weight: normal;
  10. }

3.  模糊匹配

如果有些缩写你拿不准,Emmet会根据你的输入内容匹配最接近的语法,比如输入ov:h、ov-h、ovh和oh,生成的代码是相同的:

  1. overflow: hidden;

4.  供应商前缀

如果输入非W3C标准的CSS属性,Emmet会自动加上供应商前缀,比如输入trs,则会生成:

  1. -webkit-transform: ;
  2. -moz-transform: ;
  3. -ms-transform: ;
  4. -o-transform: ;
  5. transform: ;

你也可以在任意属性前加上“-”符号,也可以为该属性加上前缀。比如输入-super-foo:

  1. -webkit-super-foo: ;
  2. -moz-super-foo: ;
  3. -ms-super-foo: ;
  4. -o-super-foo: ;
  5. super-foo: ;

如果不希望加上所有前缀,可以使用缩写来指定,比如-wm-trf表示只加上-webkit和-moz前缀:

  1. -webkit-transform: ;
  2. -moz-transform: ;
  3. transform: ;

前缀缩写如下:

  • w 表示 -webkit-
  • m 表示 -moz-
  • s 表示 -ms-
  • o 表示 -o-

5.  渐变

输入lg(left, #fff 50%, #000),会生成如下代码:

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

三、附加功能

生成Lorem ipsum文本

Lorem ipsum指一篇常用于排版设计领域的拉丁文文章,主要目的是测试文章或文字在不同字型、版型下看起来的效果。通过Emmet,你只需输入lorem 或 lipsum即可生成这些文字。还可以指定文字的个数,比如lorem10,将生成:

引用
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero delectus.

四、定制

你还可以定制Emmet插件:

五、针对不同编辑器的插件

Emmet支持的编辑器如下(链接为针对该编辑器的Emmet插件):

相关文档:http://docs.emmet.io/(其中包含了一个Demo,你可以试验文中所提到的这些缩写)

Emmet初探的更多相关文章

  1. Emmet初探2

    关于Emmet Emmet插件的前身是Zen coding,可以大幅度提高前端开发效率的一个工具,也有人说类似于jade(高性能的模板引擎,它深受 Haml 影响,它是用 JavaScript 实现的 ...

  2. emmet,jade,haml, slim,less,sass,coffeescript等的实战优缺点

    摘要: 文章背景,来自于群内周五晚上的一次头脑风暴式的思维碰撞交流活动. 随着前端技术的蓬勃发展, 各种新技术随着生产力的需要不断的涌入我们的视野, 那今天探讨的话题是这些新时代的前端兵器谱: 一. ...

  3. 初探领域驱动设计(2)Repository在DDD中的应用

    概述 上一篇我们算是粗略的介绍了一下DDD,我们提到了实体.值类型和领域服务,也稍微讲到了DDD中的分层结构.但这只能算是一个很简单的介绍,并且我们在上篇的末尾还留下了一些问题,其中大家讨论比较多的, ...

  4. CSharpGL(8)使用3D纹理渲染体数据 (Volume Rendering) 初探

    CSharpGL(8)使用3D纹理渲染体数据 (Volume Rendering) 初探 2016-08-13 由于CSharpGL一直在更新,现在这个教程已经不适用最新的代码了.CSharpGL源码 ...

  5. 从273二手车的M站点初探js模块化编程

    前言 这几天在看273M站点时被他们的页面交互方式所吸引,他们的首页是采用三次加载+分页的方式.也就说分为大分页和小分页两种交互.大分页就是通过分页按钮来操作,小分页是通过下拉(向下滑动)时异步加载数 ...

  6. JavaScript学习(一) —— 环境搭建与JavaScript初探

    1.开发环境搭建 本系列教程的开发工具,我们采用HBuilder. 可以去网上下载最新的版本,然后解压一下就能直接用了.学习JavaScript,环境搭建是非常简单的,或者说,只要你有一个浏览器,一个 ...

  7. .NET文件并发与RabbitMQ(初探RabbitMQ)

    本文版权归博客园和作者吴双本人共同所有.欢迎转载,转载和爬虫请注明原文地址:http://www.cnblogs.com/tdws/p/5860668.html 想必MQ这两个字母对于各位前辈们和老司 ...

  8. React Native初探

    前言 很久之前就想研究React Native了,但是一直没有落地的机会,我一直认为一个技术要有落地的场景才有研究的意义,刚好最近迎来了新的APP,在可控的范围内,我们可以在上面做任何想做的事情. P ...

  9. emmet 系列(1)基础语法

    emmet 系列(1)基础语法 emmet 是一个能显著提升开发html和css开发效率的web开发者工具 emmet基本上目前已知的编辑器都有相应的插件,各个编辑器的emmet插件的下载地址:点我下 ...

随机推荐

  1. 从零开始搭建linux下laravel 5.5所需环境(一)

    首先你需要有一台linux服务器,或者虚拟机,这里就不赘述了,不会的可以自行百度. 我这里准备的是一台腾讯云服务器,系统为CentOS 7.4 64位. 你可以使用腾讯云的登录按钮登录到服务器,也可以 ...

  2. perf 工具介绍2

    [root@localhost ~]# cat test1.c void longa() { int i,j; ; i < ; i++) j=i; //am I silly or crazy? ...

  3. hdu 4647 Another Graph Game,想到了就是水题了。。

    题目是给一个无向图,其中每个节点都有点权,边也有边权,然后就有2个小朋友开始做游戏了ALICE &BOB 游戏规定ALICE 先行动然后是BOB,然后依次轮流行动,行动时可以任意选取一个节点并 ...

  4. iOS 调用短信、电话、邮件、浏览器等

    1.调用 自带mail[[UIApplication sharedApplication] openURL:[NSURL URLWithString:@"mailto://admin@hzl ...

  5. Eclipse 搭建struts2 spring3 hibernate3环境实战 待完善

    1.struts2 目前是2.3版本,下载地址http://struts.apache.org/download.cgi struts2包 struts2-core-2.3.16.3.jar stru ...

  6. Android NDK开发篇(五):Java与原生代码通信(数据操作)

    尽管说使用NDK能够提高Android程序的运行效率,可是调用起来还是略微有点麻烦.NDK能够直接使用Java的原生数据类型,而引用类型,由于Java的引用类型的实如今NDK被屏蔽了,所以在NDK使用 ...

  7. 【六】注入框架RoboGuice使用:(Singletons And ContextSingletons)

    上一篇我们简单的介绍了一下RoboGuice的使用([五]注入框架RoboGuice使用:(Your First POJO Injection)),今天我们来看下单例以及上下文单例(ContextSi ...

  8. Informatica 常用组件Lookup之五 转换属性

    查找转换的属性标识数据库源.PowerCenter 如何处理转换,以及它如何处理高速缓存和多项匹配. 创建映射时,为每个查找转换指定属性.创建会话时,您可在会话属性中覆盖某些属性,如每个转换的索引和数 ...

  9. Open edX 学习、开发、运维相关链接整理

    原文地址:http://edustack.org/ 所需知识: Linux Git Python (Django Mako coffeescript sass) (MongoDB Mysql) Ans ...

  10. 【理解】column must appear in the GROUP BY clause or be used in an aggregate function

    column "ms.xxx_time" must appear in the GROUP BY clause or be used in an aggregate functio ...