概念：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之路——面向对象（进阶篇）

    面向对象进阶:类成员.类成员的修饰符.类的特殊成员 类成员 类成员分为三大类:字段.方法.属性 一.字段 静态字段 (属于类) 普通字段(属于对象) class City: # 静态字段 countr ...

  2. expect使用demo

    #!/usr/bin/expect set timeout set ip [lindex $argv ] spawn ssh root@$ip expect { "yes/no" ...

  3. Spring整合jdbc

    首先web.xml文件跟往常一样,加载spring容器和加载org.springframework.web.context.ContextLoaderListener读取applicationCont ...

  4. js event 事件冒泡和事件捕获详细介绍

    . 参考: http://www.jb51.net/article/42492.htm 图: 假设一个元素div,它有一个下级元素p.<div> <p>元素</p> ...

  5. ceph与openstack对接

    对接分为三种,也就是存储为openstack提供的三类功能1.云盘,就好比我们新加的硬盘2.原本的镜像也放在ceph里,但是我没有选择这种方式,原因是因为后期有要求,但是我会把这个也写出来,大家自己对 ...

  6. 修改ubuntu中usr文件夹的权限后，sudo后出现sudo:must be setuid root问题的解决方案

    无意之间,使用sudo chmod -R 777 /usr命令修改了usr文件的所有者,导致sudo:must be setuid root问题的出现,即sudo命令无法使用.网上介绍的方法差不多都相 ...

  7. 在Windows下编译扩展OpenCV 3.1.0 + opencv_contrib

    为什么要CMake,这里我陈述自己的想法,作为一个刚使用opencv库的小白来说,有以下大概三点内容 1.由于在学习图像处理滤波器中,需要用到各种边缘保护滤波器(EPS)算法,但是这些算法在OpenC ...

  8. Visual Studio Entity Framework (EF) 生成SQL 代码 性能查询

    Visual Studio Entity Framework (EF) 生成SQL 代码 性能查询     SQL 中,有SQL Server Profiler可以用来查询性能以及查看外部调用的SQL ...

  9. Monkeyrunner小脚本关于camera的使用

    一下代码涉及自动执行camera,属性一个小设置,恢复初始值,并在中间添加截屏功能 将两个截屏进行前后对比,并返回值 适合初学者,刚刚了解monkeyrunner 的人员来看 注意:一下脚本如果不能执 ...

  10. GUI的搭建，windowbuilder的使用

    在进行GUI的搭建过程中,相信很多人对于一个图标的设置感觉写起来很麻烦,需要不断的添加,而在java中有一个windowbuilder窗口可以很好的帮助我们进行GUI的搭建 1.进入eclipse的页 ...