转载来自：http://www.iteye.com/news/27580

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

 
Zen coding下的编码演示

但Emmet不只改名，还带来了一些新特性。本文就来直观地演示给你。

一、快速编写HTML代码

1.  初始化

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

    html:5 或!：用于HTML5文档类型

  • html:xt：用于XHTML过渡文档类型
  • html:4s：用于HTML4严格文档类型

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

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

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

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

  1. <div class="foo">
  2. <h1></h1>
  3. </div>
  4. <div class="bar">
  5. <h2></h2>
  6. </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中
  1. <ul>
  2. <li></li>
  3. <li></li>
  4. <li></li>
  5. </ul>
  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;

  1. height: 10%;
  2. margin: 5em;
  • p 表示%
  • e 表示 em
  • x 表示 ex
  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. }

  1. overflow: hidden;

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

  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-
  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插件：

      添加新缩写或更新现有缩写，可修改

snippets.json

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

Emmet支持的编辑器如下（链接为针对该编辑器的Emmet插件）： 
Sublime Text 2

http://docs.emmet.io/（其中包含了一个Demo，你可以试验文中所提到的这些缩写）

 
顶
1
踩
0

Emmet基本使用教程的更多相关文章

  1. Emmet超详细教程

    Emmet超详细教程 一.总结 一句话总结:用的时候照着用,能提高效率. 1.快捷键如何使用? 需要敲代码的时候把快捷键放到旁边即可.照着敲. 二.Emmet超详细教程 Emmet的前身是大名鼎鼎的Z ...

  2. Notepad++ Emmet安装方法教程

    Notepad++ Emmet安装后出现 unknown exception提示插件无效Python Script Plugin did not accept the script.以下为记录解决方法 ...

  3. SubLime3 Emmet插件终极教程

    当我们在手写HTML.CSS等 页面的时候,这款神级插件是不可多得的神器 1.官方示例:http://docs.emmet.io/cheat-sheet/ 2.第三方示例:http://www.w3c ...

  4. Emmet 插件使用教程

    1)使用 Emmet 生成 HTML 的语法详解生成 HTML 文档初始结构 HTML 文档的初始结构,就是包括 doctype.html.head.body 以及 meta 等内容.你只需要输入一个 ...

  5. 今天发现新大陆：haml和Emmet

    其实一开始小渣渣我只是想接触一下(css预处理器)sass,可是突然冒出一个haml. 原文是酱紫的. Sass 是采用 Ruby 语言编写的一款 CSS 预处理语言,它诞生于2007年,是最大的成熟 ...

  6. SublimeText插件Emmet的自定义模板

    在前端界,作为快速生成代码的Emmet插件相当给力.最近在学bootstrap,需要频繁生成html头文件,我就想着自定义模板.国内只有基础教程,只好自己读英文文档了. Emmet国内基础教程地址: ...

  7. Notepad++插件Emmet和Python Script的安装

    最近在做一个项目,涉及到大量的HTML.CSS代码的编写,手动写代码效率实在 是低下.于是想搜索一下,有没有Notepad++插件可以支持自动生成的,果不其然还真有.Emmet,这款神器其实就是 Ze ...

  8. Notepad++ 安装 Zen Coding / Emmet 插件

    Zen Coding 插件 ============== 下载: Zen.Coding-Notepad++.v0.7.zip ==Installation== 1. Copy contents of ...

  9. 我喜欢的几款不错的vim插件

    插件安装组件 https://github.com/tpope/vim-pathogen supertab自动补齐 https://www.vim.org/scripts/script.php?scr ...

随机推荐

  1. vts测试流程

    测试前提: 1.发货user版本 2.selinux:Enable 3.连接ADB,stay awake 4.烧录XXX申请的key 5.外网环境(ipv6) ATV9测试准备(正常准备环境+fast ...

  2. Junit 3.8源码分析

    JUnit背景介绍 JUnit是由Erich Gamma和Kent Beck 编写的一个回归测试框架(regression testing framework).Junit测试是程序员测试,即所谓的白 ...

  3. Node.js实战7：你了解buffer吗？

    Buffer是NodeJS的重要数据类型,很有广泛的应用. Buffer是代表原始堆的分配额的数据类型.在NodeJS中以类数组的方式使用. 比如,用法示例: var buf = new Buffer ...

  4. 快速排序 && 寻找第K大(小)的数

    参考:https://minenet.me/2016/08/24/quickSort.html 快速排序 利用分治法可将快速排序的分为三步: 在数据集之中,选择一个元素作为"基准" ...

  5. 两道CTF Web的题目

    1.easyphp 1.1.题目描述 题目首先是一张不存在的图片 查看源码发现只有一句话 <img src="show.php?img=aGludC5qcGc=" width ...

  6. Oracle数据库的特点与工作原理

    Oracle数据库的特点 1.开放性: Oracle能在所有主流平台上运行(包括Windows),完全支持所有的工业标准,采用完全开放策略,可以使客户选择最适合的解决方案,对开发商全力支持. 2.可伸 ...

  7. Codeforces 833B 题解(DP+线段树）

    题面 传送门:http://codeforces.com/problemset/problem/833/B B. The Bakery time limit per test2.5 seconds m ...

  8. python RE表达式规则剩余规则

    前面我学习了 ’.‘ '^' '$' '*' '+' '?'  基本针对单个字符的,学习python 表达式规则剩余规则. 1,{m} 匹配前一个字符m次 2,{n,.m} 匹配前一个字符n到m次 3 ...

  9. JS中类或对象的定义说明

    本篇文章主要是对JS中类或对象的定义进行说明介绍.我们知道,JS是面向对象的.谈到面向对象,就不可避免的要涉及类的概念.一般像c#,java这些强类型语言都有固定的定义类的语法.而JS的不同之处在于它 ...

  10. mysqldump导入导出

    如果导入数据:使用mysqldump命令 导出数据和表的结构: 1.导出表数据和表结构 mysqldump -u用户名 -p密码 数据库名 > 数据库名.sql(这个名字随便叫) #/usr/l ...