概念：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. 用R实现全排列的分类

    R 其实是个很好用的东东哦-最近写了个小函数,可以实现全排列数的枚举,代码如下: permut<-function(seq){     seq_len=length(seq);     if(s ...

  2. C#中Invoke 和 BeginInvoke 的区别

    Control.Invoke 方法 (Delegate) :在拥有此控件的基础窗口句柄的线程上执行指定的委托. Control.BeginInvoke 方法 (Delegate) :在创建控件的基础句 ...

  3. 循序渐进Python3（十一） --5-- 同源策略

    一.什么是同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能.它是由Netscape提出的一个著名的安全策略,现在所有的可支持javascript ...

  4. 在filter中使用spring的service bean

    http://blog.csdn.net/godha/article/details/13025099

  5. 【BZOJ1208】宠物收养所（平衡树，splay）

    题意:见题面 思路:因为每个时刻要么全是人要么全是宠物,所以可以一棵splay解决 维护单点插入,单点删除,求前驱,求后继即可 ..,..]of longint; num,fa:..]of longi ...

  6. Sublime text 3 中Package Control 的安装与使用方法和解决Sublime Text 3不能正确显示中文的问题

    Sublime text 3 中Package Control 的安装与使用方法,英文好可以在这个网址看看, 下面简单的说明一下 : https://packagecontrol.io/install ...

  7. Android开发学习---template requires a minimum SDK version of at least 7，build target API version of 14

    adt 22.6.3的bug 当adt更新到22.6.3,其编辑器中最低支持api7,即android 2.1,这里可能是google故意这么做的,也可能是其bug.其target sdk 和comp ...

  8. ThinkPad L440 FN键设置

    刚入手了ThinkPad L440,用起来相当不错,嘿嘿! L440系统默认(F1-F12)键盘为系统默认功能键,主要控制音量.亮度.连接投影仪等. 因为编写程序需要调试,经常用到F10,F11等键, ...

  9. 一个MVC架构的线程安全的银行转账案例（事务控制）

    mvc结构: 准备阶段:jar包 ,dbcpconfig.propertie(数据源配置文件 ) ,DBCPUtil. jar包: dbcp配置文件: driverClassName=com.mysq ...

  10. vs命令行采集性能数据

    VSPerfASPNETCmd /output:d://PerformanceReport.vsp http://localhost/store/cart.aspx