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

一、快速编写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，将生成：

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

四、定制

你还可以定制Emmet插件：

Emmet：HTML/CSS代码快速编写神器教程的更多相关文章

  1. 转载： Emmet：HTML/CSS代码快速编写神器

    Emmet:HTML/CSS代码快速编写神器 因为文章严禁转载,那本着做一个遵纪守法的好公民,我就不转载了,把链接放下面,方便查阅. http://www.iteye.com/news/27580

  2. Emmet：HTML/CSS代码快速编写神器

    本文来源:http://www.iteye.com/news/27580    ,还可参考:http://www.w3cplus.com/tools/emmet-cheat-sheet.html Em ...

  3. Emmet：HTML/CSS代码快速编写神器(转)

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

  4. Sublime Text 3插件之Emmet：HTML/CSS代码快速编写神器

    一.快速编写HTML代码 1.  初始化 HTML文档需要包含一些固定的标签,比如<html>.<head>.<body>等,现在你只需要1秒钟就可以输入这些标签. ...

  5. Emmet for Dreamweaver：HTML/CSS代码快速编写神器

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

  6. （webstorm的css编写插件）Emmet：HTML/CSS代码快速编写神器

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

  7. Emmet：HTML/CSS代码快速编写神器--20150422

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

  8. sublime text3---Emmet：HTML/CSS代码快速编写神器

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

  9. Emmet：HTML/CSS代码快速编写

    html缩写: 1.  初始化 HTML文档需要包含一些固定的标签,比如<html>.<head>.<body>等,现在你只需要1秒钟就可以输入这些标签.比如输入“ ...

随机推荐

  1. spring-aop 的注释用法

    一.书写增强有效代码 //切面注释@Aspectpublic class errorLogger { private static Logger logger = Logger.getLogger(e ...

  2. .Net Core WebAPI 搭建

    .Net Core WebAPI 搭建 1.创建项目 使用开发工具为 Visual Studio 2017 2.创建 Controller 实体类 public class Book { public ...

  3. webpack打包后的文件

    用了webpack打包工具,你是不是有时会疑惑,写了一个很简单的函数,结果生成那么多东西,而且还没有问题?下面,我从三种情况来分析打包后的入口文件,帮助自己理解webpack打包,也为平时定位产出目录 ...

  4. vscode断点调试简单的服务端文件

    一.无配置文件时,如何调试? 1.安装code命令打开vscode,快捷键command + shift + p,输入shell command,选择install 'code' command in ...

  5. pandas 数据处理实例

    描述:行标签为日期,列标签为时间,表哥的值是 float 的数值# 一. 读取 csv 文件df=pd.read_csv("delay_3.csv",encoding = &quo ...

  6. Python 中的单例模式

    单例模式 单例模式(Singleton Pattern)是一种常用的软件设计模式,该模式的主要目的是确保某一个类只有一个实例存在.当你希望在整个系统中,某个类只能出现一个实例时,单例对象就能派上用场. ...

  7. 我的 FPGA 学习历程（02）—— 实验：点亮 LED 灯

    关于 Quartus 的操作可以使用 Quartus 自带的帮助,帮助中带有全套的操作教程. 中文网络教程链接(链接至 altera中文官网,点击观看) Quartus II 软件设计系列:基础 Qu ...

  8. ftp搭建安装

    本文摘要:https://jingyan.baidu.com/article/380abd0a77ae041d90192cf4.html FTP 是File Transfer Protocol(文件传 ...

  9. __x__(6)0905第二天__标签属性=“值”

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  10. gitIgnore说明

    有些内容不需要提交到git服务器上,这时我们可以配置.gitIgnore文件.可参考:https://www.cnblogs.com/kevingrace/p/5690241.html 可能有时候你会 ...