转载来自：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. EditPlus配色方案

    找到配置文件:editplus_u.ini配置文件 [Options] Placement=2C00000002000000030000000083FFFF0083FFFFFFFFFFFFFFFFFF ...

  2. layui中获取全部提交的数据

    <form class="layui-form" action="">...........input textarea ......</fo ...

  3. Redis数据类型：Hashes、Geo操作指令

    Redis数据类型:Hashes.Geo操作指令 Hashes常用操作指令 Redis Hashes是一个键值对的映射表,最对能存储2^32-1(约40亿)个键值对. HSET HGET HSET:将 ...

  4. XMind8激活为Pro教程 - Windows&Mac

    本教程用于激活XMind(思维导图制作软件),仅限于个人学习使用. 目前本人激活的版本是xmind8-up6版本,其他更高版本不保证能适用. Windows步骤: 1.英文官网下载客户端并安装(不能用 ...

  5. 实列+JVM讲解类的实列化顺序

    刨根问底---类的实列化顺序 开篇三问 1什么是类的加载,类的加载和类的实列有什么关系,什么时候类加载 2类加载会调用构造函数吗,什么时候调用构造函数 3什么是实列化对象,实列化的对象有什么东西. 我 ...

  6. 在学习linux磁盘管理期间学习的逻辑卷管理笔记

    LVM(逻辑分区)的创建顺序:物理分区-物理卷-卷组-逻辑卷-挂载. 物理卷(Physical Volume,PV):就是指硬盘分区,也可以是整个硬盘或已创建的软RAID,是LVM的基本存储设备. 卷 ...

  7. React手稿 - Context

    Context Context提供了除props之外的传参数的方式. Context是全局跨组件传递数据的. API React.createContext ``` const {Provider, ...

  8. Elasticsearch7.X 入门学习第二课笔记----基本api操作和CRUD

    原文:Elasticsearch7.X 入门学习第二课笔记----基本api操作和CRUD 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链 ...

  9. struts2 spring 优缺点

    struts框架具有组件的模块化,灵活性和重用性的优点,同时简化了基于MVC的web应用程序的开发.优点:Struts跟Tomcat.Turbine等诸多Apache项目一样,是开源软件,这是它的一大 ...

  10. sql 时间函数大全

    1.        当前系统日期.时间    select getdate() 2. dateadd  在向指定日期加上一段时间的基础上,返回新的 datetime 值  例如:向日期加上2天  se ...