概念：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. python之路-Day3

    字典 dic{key:value} 元组与列表相似,唯一就是不能修改dic = {'name':'alex','age':18}查询print(dic['name']) #会报错get方法查询,查询之 ...

  2. JCCLIENT IP GET UDP

    ##通道##110.52.233.5:18427## ##通道##112.95.251.214:18427## ##通道##119.29.192.206:18427## ##通道##123.207.1 ...

  3. @ModelAttribute 注解及 POJO入参过程

    一.modelattribute注解 @ModelAttribute注解的方法有两种,一种无返回值,一种有返回值,方法的可以用@RequestParam注解来获取请求的参数,如果不获取参数,可以不用此 ...

  4. AndroidStudio安装教程(Windows环境下)

    AndroidStudio官网下载:http://android-studio.org/    可以更具自己喜欢的版本下载,个人推荐2.2版本以上,因为开发和运行效率快,高很多. Android St ...

  5. SonarQube-5.6.3 代码分析平台搭建使用

    python代码分析 官网主页: http://docs.sonarqube.org/display/PLUG/Python+Plugin Windows下安装使用: 快速使用: 1．下载jdk ht ...

  6. 产生某个区间的随机整数 int #Java

    int max = Integer.MAX_VALUE; int min = 1; Random random = new Random(); int s = random.nextInt(max)% ...

  7. ios第三方库和工具类

    下面的是使用苹果电脑后,自己的一下积累吧.有好用的第三方库和工具,肯定会第一时间和大家分享的. 自己平时写的一些分类和工具库 SSTools已经在github上面开始更新了,欢迎大家来指正和补充 一. ...

  8. PL/SQL远程连接Oracle的方式,无需安装客户端

    第一次用PL/SQL Developer这个非官方的软件,遇到了种种困难,幸好通过万能的Google已经全部解决,记录下来备察． 前提是保证你的远程oracle服务器一切正常．   微软客户端设置 使 ...

  9. SVN服务器与测试服务器代码同步

    在本地做测试项目的时候,想svn提交和服务器上的代码一步到位,不想再手动更新一次了,所以就研究了下同步, 要实现svn提交后自动更新到测试服务器,在你的版本库下的hooks文件夹下添加post-com ...

  10. XtraGrid RepositoryItemCheckEdit 显示状态以及单选多选问题

    RepositoryItemCheckEdit默认有三种状态,选中状态.未选中状态和半选中状态(半选中状态通常用在TreeList中如果父节点下的子节点有选中的有未选中的,则父节点状态为半选中状态). ...