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. .net orm类库 kiss.data 简单文档记录

    kiss.data的简单记录 == [github地址](https://github.com/sdming/Kiss.Data) kiss.data是golang的数据库访问类库[kdb](http ...

  2. css3实现卷页效果http://jingyan.baidu.com/article/73c3ce2806aef9e50343d93a.html

    css3实现卷页效果 | 浏览:31 | 更新:2015-01-08 13:30 1 2 3 4 5 6 7 分步阅读 百度经验:jingyan.baidu.com 页面上经常会看到鼠标移动上去,对象 ...

  3. Xilinx Platform Usb Cable

    Key Features High-performance FPGA configuration and PROM/CPLD programming Includes innovative FPGA- ...

  4. mysql学习心得转

    http://www.cnblogs.com/lyhabc/p/3691555.html

  5. DU 4609 3-idiots FFT

    题意还是比较好懂. 给出若干个木棍的长度,问这些木棍构成三角形的可能性. 那么公式很容易知道 就是这些木棍组成三角形的所有情况个数 除以 从n个木棍中取3个木棍的情况数量C(n, 3) 即可 但是很显 ...

  6. linux下如何挂接(mount)光盘镜像文件、移动硬盘、U盘、Windows网络共享和NFS网络共享

    首先,介绍一下挂接(mount)命令的使用方法,mount命令参数非常多,这里主要讲一下今天我们要用到的.      命令格式:      mount [-t vfstype] [-o options ...

  7. 去除ArcMap连接空间数据库中多余的属性表

    这个操作目前可能不具有可行性,但是为了完整性还是在下面讲一下吧.如有兴趣的小伙伴,可以按照下面的操作方式去尝试. 一.需求 去除ArcMap连接空间数据库中多余的属性表. PL/SQL中查询得到的内容 ...

  8. C语言内存分析

    C语言内存分析 一.进制 概念:进制是一种计数方式,是数值的表现形式 4种主要的进制: ①. 十进制:0~9 ②. 二进制:0和1 ③. 八进制:0~7 ④. 十六进制:0~9+a b c d e f ...

  9. pytest文档25-conftest.py作用范围

    前言 一个测试工程下是可以有多个conftest.py的文件,一般在工程根目录放一个conftest.py起到全局作用. 在不同的测试子目录也可以放conftest.py,作用范围只在该层级以及以下目 ...

  10. 1、cocos2d-x环境安装

     1 所需软件 2 安装python-2.7.8.amd64.msi 注意将当中的有一步设置,Add python.exe to path 设置python的环境变量 3 解压cocos2d-x- ...