转载来自：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. spring中@Autowired与 @Resource区别

    @Autowired 与@Resource的区别: 1. @Autowired与@Resource都可以用来装配bean. 都可以写在字段上,或写在setter方法上. 2. @Autowired默认 ...

  2. git日常开发中的使用

    作者:python技术人 博客:https://www.cnblogs.com/lpdeboke 1.在远程新建一个仓库,可以使github.gitlib或者bitbucket,这里以bitbucke ...

  3. JAVA总结--多线程

    一.概念 1.进程:一个具有一定独立功能的程序,关于某些数据集合,一次运行活动. 两点:1.有自己的空间存储数据:2.一个程序. 进程,是系统   进行   资源分配  和 调度  的基础单位.动态性 ...

  4. 除了a链接跳转，还有其他的跳转方式

    一.直接在要跳转部分加上onclick事件 1.加入onclick事件: <div onclick="window.open('http://baidu.com','_blank')& ...

  5. 处理键盘事件 禁止后退键（Backspace）密码或单行、多行文本框除外

    //处理键盘事件 禁止后退键(Backspace)密码或单行.多行文本框除外 function forbidBackSpace(e) { var ev = e || window.event; //获 ...

  6. C#设计模式：命令模式（Command Pattern）

    一,什么是命令模式(Command Pattern)? 命令模式:将请求封装成命令对象,请求的具体执行由命令接收者执行: 二,如下代码 using System; using System.Colle ...

  7. 10-js对象、数组

    # js对象 ```1.使用原始的方式创建内置对象 var myObject = new Object(); myObject.name = “lijie”; myObject.age = 20; m ...

  8. Window Operations

    Window Operations 有点类似于Storm中的State,可以设置窗口的大小和滑动窗口的间隔来动态的获取当前Steaming的允许状态,可以对一段时间的数据进行处理. 如图window ...

  9. Windows平台网站图片服务器架构的演进

    在主流的Web站点中,图片往往是不可或缺的页面元素,尤其在大型网站中,几乎都将面临“海量图片资源”的存储.访问等相关技术问题.在针对图片服务器的架构扩展中,也会历经很多曲折甚至是血泪教训(尤其是早期规 ...

  10. JavaScript高级笔记

    # 今日内容:     1. JavaScript:         1. ECMAScript:         2. BOM:         3. DOM:             1. 事件 ...