概念：emmet插件是用在编辑器里面的一个可以快速编写代码的插件，比如sublime text中，就可以用它来快速创建代码，本文主要是在sublime text的编辑器中做的测试代码。

一、html
　　1.快速创建html
　　（1） html:5 --> tab

  <!DOCTYPE html>

  <html lang="en">

     <head>

          <meta charset="UTF-8">

          <title>Document</title>

     </head>

     <body>

     </body>

  </html>

　　2.标签
　　（1） 标签 --> tab
　　示例：p --> tab

<p></p>

　　3.类.或ID#
　　（1） p.class1#id1 --> tab

<p class="class1" id="id1"></p>

　　（2）p.class1.class2#id1#id2 --> tab(只会选择一个ID，可以有多个class)

<p class="class1 class2" id="id2"></p>

　　4.文本{}
　　（1） p{你好} --> tab

<p>你好</p>

　　5.属性
　　（1） a[href=https://baidu.com] --> tab

<a href="https://baidu.com"></a>

　　6.嵌套>
　　（1） p>span

<p><span></span></p>

　　7.同级+
　　（1）p+span

<p></p>

<span></span>

　　8.嵌套分级升级版
　　（1）div.one#one>h1{This is one.}+div.two#two>h1{This is two.}

 <div class="one" id="one">

     <h1>This is one.</h1>

     <div class="two" id="two">

         <h1>This is two.</h1>

     </div>

 </div>

　　（2）(div.one#one>h1{This is one.})+(div.two#two>h1{This is two.})

 <div class="one" id="one">

     <h1>This is one.</h1>

 </div>

 <div class="two" id="two">

     <h1>This is two.</h1>

 </div>

　　9.向上一层^
　　（1） div>p>a^span --> tab (即跟p同层)

 <div>

     <p><a href=""></a></p>

     <span></span>

 </div>

　　10.省略标签
　　（1） 根据父元素来自动决定标签
　　示例：.container --> tab

<div class="container"></div>

　　示例：ul>.list --> tab

 <ul>

     <li class="list"></li>

 </ul>

　　11.重复代码
　　（1）ul>li*3 --> tab

 <ul>

     <li></li>

     <li></li>

     <li></li>

 </ul>

　　（2）ul>li{item}*3 --> tab

 <ul>

     <li>item</li>

     <li>item</li>

     <li>item</li>

 </ul>

　　（3） (ul>li{item})*3 --> tab

 <ul>

     <li>item</li>

 </ul>

 <ul>

     <li>item</li>

 </ul>

 <ul>

     <li>item</li>

 </ul>

　　12.列表计算
　　（1） ul>li.item$*3 --> tab(PS:一位数一个$，两位数两个$)

 <ul>

     <li class="item1"></li>

     <li class="item2"></li>

     <li class="item3"></li>

 </ul>

　　（2） ul>li.item$$*3 --> tab

 <ul>

     <li class="item01"></li>

     <li class="item02"></li>

     <li class="item03"></li>

 </ul>

　　二、css
　　1.w100 --> tab
　　h10p --> tab
　　m5e --> tab
　　p5r --> tab
　　或者
　　w100+h10p+m5e+p5r
　　（PS：p --> %; e --> em; r --> rem; x --> ex;）

 width: 100px;

 height: 10%;

 margin: 5em;

 padding: 5rem;

　　2.@f --> tab

 @font-face {

     font-family:;

     src:url();

 }

　　3.供应商前缀-（一些非W3C标准的，会加前缀）
　　（1）-trs --> tab

 -webkit-transition: prop time;

 -o-transition: prop time;

 transition: prop time;

　　PS：如果不希望加上所有前缀，可以使用缩写来指定，比如-wm-trf表示只加上-webkit和-moz前缀：

 -webkit-transform: ;

 -moz-transform: ;

 transform: ;

　　三、定制Emmet插件
　　　　- 添加新缩写或更新现有缩写，可修改snippets.json文件
　　　　- 更改Emmet过滤器和操作的行为，可修改preferences.json文件
　　　　- 定义如何生成HTML或XML代码，可修改syntaxProfiles.json文件

　　参考资料：
　　　　http://www.iteye.com/news/27580
　　　　https://gold.xitu.io/post/5843a0e861ff4b006b97f5d5

emmet插件快捷键：的更多相关文章

  1. Sublime Text 2 安装emmet插件和常用快捷键

    一.先安装package control1.按Ctrl+`调出console,输入以下命令然后回车 import urllib2,os; pf='Package Control.sublime-pac ...

  2. Emmet插件的快捷键

    Emmet插件的快捷键 html:5+tab键,可以生成html标签.!+tab键,也可以生成html标签.============================================== ...

  3. 如何在Notepad++ 中成功地安装Emmet 插件

    对于前端来说,Emmet 是一个好东西,但是好几次在 “Notepad++” 中安装后不能使用.今天认认真真地查找了失败原因,配置完成后,终于可以在 “Notepad++” 下正常使用了.故把过程记录 ...

  4. VS2013 EMMET插件学习

    在VS2013中搜索EMMET插件,安装,重启IDE,即可使用. 最简单的一个用法示例: 在编辑器里输入:ul>li*5 按快捷键:CTRL+1 即可生成如下代码: <ul> < ...

  5. 快速编写HTML,CSS代码的有力工具Emmet插件

    Emmet 是一个编辑器插件,它以一种简写的语法规则可用于快速编写html或css文档内容,它支持多种编辑器. 从官网:http://emmet.io/ 可下载各个编辑器的插件.notepad++ 插 ...

  6. Dearmweaver CS6 如何添加emmet 插件

     一.关于emmet插件 已经接触前端工具的小伙伴们早听说过这个插件的鼎鼎大名了吧,emmet可以说是前端工程师的利器,就连老牌dreamweaver 都可以支持,我们怎么好意思拒绝这个好东西呢? 有 ...

  7. Netbeans IDE 安装Emmet插件并解决Emmet插件无效果问题

    Emmet是许多流行文本编辑器的插件,它极大地改进了HTML和CSS工作流程:在Netbeans IDE 下安装Emmet:1.打开Netbeans IDE编辑器,选择 工具—>插件选项,在 可 ...

  8. Netbeans 安装emmet插件

    一.下载插件 http://plugins.netbeans.org/plugin/48315/emmet 二.点击工具-> 插件 -> 已下载 -> 添加插件 ->(导入下载 ...

  9. Sublime的使用！emmet常用快捷键梳理

    多的不说了! 示例一: !+tab 效果: <!doctype html> <html lang="en"> <head> <meta c ...

随机推荐

  1. 查看linux版本

    http://nameyjj.blog.51cto.com/788669/557424 1. 查看内核版本命令: 1) [root@q1test01 ~]# cat /proc/version     ...

  2. 运行Java cmd程序 找不到或无法加载主类怎么解决

    //这个问题原因有以下几种,但是和环境变量并没有太大的关系 //能够执行java 和 javac 就证明你的环境变量已经配置好了,其实 classpath 可以不配置 //假如有如下文件:H:\cod ...

  3. Windows服务二：测试新建的服务、调试Windows服务

    一.测试Windows服务 为了使Windows服务程序能够正常运行,我们需要像创建一般应用程序那样为它创建一个程序的入口点.像其他应用程序一样,Windows服务也是在Program.cs的Main ...

  4. Exception Type & Exception Code

    1.Exception Type 1)EXC_BAD_ACCESS 此类型的Excpetion是我们最长碰到的Crash,通常用于访问了不改访问的内存导致.一般EXC_BAD_ACCESS后面的&qu ...

  5. svn命令

    1.检出.更新.提交 svn chectout http://svn_server/xxx_repository/trunk svn update svn commit -m "XXX&qu ...

  6. 【POJ3691】DNA repair（AC自动机，DP）

    题意: 生物课上我们学到,DNA序列中只有A, C, T和G四种片段. 经科学发现,DNA序列中,包含某些片段会产生不好的基因,如片段"ATC"是不好片段,则"AGATC ...

  7. Tomcat 设置

    bin/catalina.bat--增加内存 set JAVA_OPTS=...后面加上 set JAVA_OPTS=-Xmx1024M -Xms512M -XX:MaxPermSize=256m c ...

  8. 利用JDK（1.6及以上版本）创建WebService

    一.什么是WebService WebService是一个SOA(面向服务的编程)的架构,它是不依赖于语言,不依赖于平台,可以实现不同的语言间的相互调用,通过Internet进行基于Http协议的网络 ...

  9. 显示天气预报的Demo

    实现的效果如下所示: 代码如下: ViewController.h #import <UIKit/UIKit.h> @interface ViewController : UIViewCo ...

  10. [原创]Matlab之复选框使用

    本文简单记录在Matlab的GUI设计中,复选框的一些使用,比较简单. 简单到直接上代码,就是可能比较容易忘记,使用的时候再翻回来好了. 1 2 3 4 5 6 7 % 复选框,选中后为1,未选中则为 ...