概念：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碎解二

    承接上文碎解一.本章讲述,基本配置. 一.网络配置相关. error:(执行yum 命令时出现)Cannot find a valid baseurl for repo:base/7/x86_64 解 ...

  2. 【补充版】HashMap（根据value筛选查找）

    HashMap查找之根据Value查找 一般大家都知道对于HashMap而言都是通过key来进行查找.找到了key自然对应的value也就一并找到了.但是有些情况下就需要通过value来进行判断查找. ...

  3. C# 根据类名称创建类示例

    //获得类所在的程序集名称(此处我选择当前程序集) string bllName = System.IO.Path.GetFileNameWithoutExtension(System.Reflect ...

  4. Vue.js 动态绑定class

    Vue.js 的核心是一个响应的数据绑定系统,它允许我们在普通 HTML 模板中使用特殊的语法将 DOM “绑定”到底层数据.被绑定的DOM 将与数据保持同步,每当数据有改动,相应的DOM视图也会更新 ...

  5. HTTP 错误 500.21 - Internal Server Error 处理程序“PageHandlerFactory-Integrated”

    网站发布到IIS上,访问时出现错误 原因:在安装Framework v4.0之后,再启用IIS,导致Framework没有完全安装 解决:开始->所有程序->附件->右键点击“命令提 ...

  6. [转]hp电脑重装win7 64位 后 所有软件都装不上问题

    hp 电脑重装后 所有软件都装不上问题 装了近100来次机,第一次遇到这样的. bug描述: 新笔记本刚装了纯净版的64位旗舰版win7,想装软件,就弹出已停止工作.比如装火狐浏览器,弹出火狐浏览器网 ...

  7. oracle定时器

    /* 每10秒钟执行一次 插入一条时间 */ -- 创建table create table tab_time( current_time timestamp ); -- 创建存储过程 create ...

  8. 第四十章 微服务CICD（2）- jenkins（war版）

    一.下载 官网下载war包,放在tomcat下的webapps下, 第一章 tomcat安装与启动 第二章 部署war包到tomcat jenkins:2.19.1版本. 二.修改编码为utf-8 在 ...

  9. jquery验证

    首先要引用js库 <script src="js/jquery-1.7.2.min.js"></script> jquery验证方式 function ch ...

  10. poj 1236 Network of Schools（连通图）

    题目链接:http://poj.org/problem?id=1236 题目大意:有一些学校,学校之间可以进行收发邮件,给出学校的相互关系,问:1.至少 要向这些学校发送多少份才能使所有的学校都能获得 ...