转载来自：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. 【MM系列】SAP MM模块-基础配置第一篇

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP MM模块-基础配置第一篇   ...

  2. TNS-01106: Listener using listener name LISTENER has already been started

    -- 启动监听,提示已经启动. [oracle@sh ~]$ lsnrctl startLSNRCTL for Linux: Version 12.1.0.2.0 - Production on 06 ...

  3. Mac015--在Mac下安装使用Vagrant

    网址:http://yansu.org/2014/04/10/install-vagrant-in-mac.html 一.安装Vagrant 下载地址在http://www.vagrantup.com ...

  4. css：设置div边框透明+渐变

    写作背景: 觅兼职--登陆页面,UI给的原型图很漂亮,其中有一个图要求div外面有一圈透明度为0.37且带有渐变的边框.效果图如下: 在写的时候遇到了一点小小的问题:无法给同一个div设置圆角的透明+ ...

  5. JavaSE编码试题强化练习4

    1.编写一个Worker类,为Worker类添加相应的代码,使得Worker对象能正确放入TreeSet中.并编写相应的测试代码. /** * Worker类 */ public class Work ...

  6. jsp常问面试题集

    1.Servlet总结 在Java Web程序中,Servlet主要负责接收用户请求 HttpServletRequest,在doGet(),doPost()中做相应的处理,并将回应HttpServl ...

  7. Hibernate初始化创建SessionFactory，Session，关闭SessonFactory，session

    1.hibernate.cfg.xml <?xml version='1.0' encoding='UTF-8'?> <!DOCTYPE hibernate-configuratio ...

  8. linux tcp/ip 调优

    sysctl 变量修改方法:sysctl –a 使用 sysctl 命令修改系统变量,和通过编辑 sysctl.conf 文件来修改系统变量两种.但并不是所有的 变量都可以在这个模式下设定. 注:sy ...

  9. Sql 使用游标

    DECLARE data_cursor CURSOR FOR WITH T0 AS ( SELECT COUNT(f.DeptID) SubmitCount , f.DeptID FROM biz.F ...

  10. vuex 使用实例

    官网:https://vuex.vuejs.org/zh/guide/state.html Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 1.vuex解决了组件之间同一状态的共享问题 ...