Emmet真的好用，可以少写很多代码。

  1. 初始化文档

    HTML文档需要包含一些固定的标签，比如<html>、<head>、<body>等，现在你只需要1秒钟就可以输入这些标签。比如输入“!”或“html:5”，然后按Tab键或ctrl+e：

    html:5 或!：用于HTML5文档类型

    html:xt：用于XHTML过渡文档类型

    html:4s：用于HTML4严格文档类型

  2. 2

    轻松添加类、id、文本和属性

    1、连续输入元素名称和ID，Emmet会自动为你补全，比如输入p#main

    2、连续输入类和id，比如p.bar#foo，会自动生成：

    3、下面来看看如何定义HTML元素的内容和属性。你可以通过输入h1{foo}和a[href=#]，就可以自动生成如下代码：

  3. 3

    嵌套

    现在你只需要1行代码就可以实现标签的嵌套

    >：子元素符号，表示嵌套的元素

    +：同级标签符号

    ^：可以使该符号前的标签提升一行

  4. 4

    分组

    可以通过嵌套和括号来快速生成一些代码块，比如输入(.foo>h1)+(.bar>h2)，ctrl+e会自动生成：

  5. 5

    隐式标签

    声明一个带类的标签，只需输入div.item，就会生成<div class="item"></div>。在过去版本中，可以省略掉div，即输入.item即可生成<div class="item"></div>。现在如果只输入.item，则Emmet会根据父标签进行判定。比如在<ul> 中输入.item，就会生成<li class="item"></li>。下面是所有的隐式标签名称：

    li：用于ul和ol中

    tr：用于table、tbody、thead和tfoot中

    td：用于tr中

    option：用于select和optgroup中

  6. 6

    定义多个元素

    要定义多个元素，可以使用*符号。比如，ul>li*3可以生成如下代码：

  7. 7

    定义多个带属性的元素

    如输入 ul>li.item$*3，将会生成如下代码

    Emmet中如果需要指定反向编号，可以使用"$@-"符号

    如果要从指定的数字开始编号，可以使用ul>li.item$@3*5

    END

CSS缩写

 

  1. 值

    1、比如要定义元素的宽度，只需输入w100，即可生成

    2、除了px，也可以生成其他单位，比如输入h10p+m5e

    单位别名列表：

    p 表示%

    e 表示 em

    x 表示 ex

  2. 附加属性

    1、缩写，比如 @f，可以生成：

    一些其他的属性，比如background-image、border-radius、font、@font-face,text-outline、text-shadow等额外的选项，可以通过“+”符号来生成；

    2、输入@f+，将生成：

  3. 模糊匹配

    如果有些缩写你拿不准，Emmet会根据你的输入内容匹配最接近的语法，比如输入ov:h、ov-h、ovh和oh，生成的代码是相同的：

  4. 供应商前缀

    1、如果输入非W3C标准的CSS属性，Emmet会自动加上供应商前缀，比如输入trs，则会生成：

    2、可以在任意属性前加上“-”符号，也可以为该属性加上前缀。比如输入-super-foo：

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

    前缀缩写如下：

    w 表示 -webkit-

    m 表示 -moz-

    s 表示 -ms-

    o 表示 -o-

     

  5. 5

    .  渐变输入lg(left, #fff 50%, #000)，会生成如下代码：

Sublimi Text3 下Emmet使用技巧的更多相关文章

  1. Sublime Text 3下Emmet使用技巧

    链接:http://jingyan.baidu.com/article/92255446a87900851648f4d6.html

  2. Sublime Text 3下 Emmet 使用小技巧

    Emmet常用技巧:(输入下面简写,按Tab键可触发效果)                          生成 HTML 文档初始结构 html:5 或者 ! 生成 HTML5 结构        ...

  3. sublime text 3中emmet常用技巧

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. Sublime Text3下的markdown插件的安装及配置

    Sublime Text3下的markdown插件的安装及配置 安装准备--安装Package Control 安装MarkdownEditing 安装Markdown Preview或OmniMar ...

  5. delphi XE5下安卓开发技巧

    delphi XE5下安卓开发技巧 一.手机快捷方式显示中文名称 project->options->Version Info-label(改成需要显示的中文名即可),但是需要安装到安卓手 ...

  6. 登录锁定状态下Win7关机技巧总结

    登录锁定状态下Win7关机技巧总结 一般在锁定状态都是有个关闭电脑的图标的.但是如果你的系统没有,那么怎么样关机呢,所谓的锁定状态通常是指电脑在登录界面,具体的实现如下,感兴趣的朋友可以参考下 现在大 ...

  7. python2.X和python3.X在同一平台下的切换技巧

    python2.X和python3.X在同一平台下的切换技巧 最近在自己的电脑上同时安装了python2.7.11和python3.5.1 在网上搜了一些答案,主要还是参照<learning p ...

  8. [转帖]linux 下yum使用技巧

    linux 下yum使用技巧 https://www.cnblogs.com/galengao/p/5750389.html 本文来自我的github pages博客http://galengao.g ...

  9. win7下sublime text3 安装Emmet的pyv8

    1.通过快捷键 ctrl+` 或者 View > Show Console 菜单打开控制台 2.适用于 Sublime Text 3: import urllib.request,os;pf=' ...

随机推荐

  1. 移动web中的流式布局和viewport知识介绍

    1   流式布局 其实  流式布局  就是百分比布局,通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充. 这样的布局方式  就是移动web开发使用的常用布局方式 ...

  2. mysql安装出现 conflicts with mysql*的解决办法

    rpm -ivh Percona-Server-client-56-5.6.16-rel64.0.el6.x86_64.rpm --nodeps --force error: Failed depen ...

  3. soapUI检查webServices接口的方法以及对自动触发线程的查询

    这几天需要熟悉接口传输过来的数据,因此会用到soapUI,但是没结果这个工具,然后百度了下,结合了下,下面是我对webservice在soapUI的展现: 1:其实说白了,就是我们不知道从接口里传输过 ...

  4. Jetty初探

    一.在jetty中部署web应用 Jetty 和 Tomcat 一样都是一个web server的container, 用户可以在里面 deploy 自己的 war 包,然后启动 Jetty, 进而通 ...

  5. 谈 instanceof 和 typeof 的实现原理

    typeof: js 在底层存储变量的时候,会在变量的机器码的低位1-3位存储其类型信息

  6. zTree -- jQuery 树插件实现点击文字展开子节点

    新版本的zTree是单击+号展开子项,点击文字选中该项,双击文字展开子项 项目用的是3.5版本的,如果要点击文字展开子项暂时没查到资料,自己琢磨了下 项目用的是jquery.ztree.core-3. ...

  7. CF508E (贪心+搜索+构造)

    题目大意:让你构造一个括号序列,括号匹配的方式类似于栈,给出从左数每个括号 到和它匹配的右括号的 最小和最大距离,让你输出一个合法括号序列 看错题了以为是二分图,然后写了搜索 贪心发现如果距离往小了填 ...

  8. [剑指offer] 1. 二维数组中的查找 (数组)

    注意是有序数组!! 思路: 1.利用二维数组由上到下,由左到右递增的规律,选取右上角或者左下角的元素a[m][n]与target进行比较, 当target小于元素a[m][n]时,那么target必定 ...

  9. 【henuacm2016级暑期训练-动态规划专题 C】Little Girl and Maximum XOR

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 考虑r最后的二进制形式为 1xxxxx 那么我们肯定想让第一个最高位的1保留. 因此我们选取的另外一个数字 一定是 0xxxxx的形 ...

  10. ASP.NET-使用json

    数据格式 vat strJson =' {"name":"jingya","Age":88} '; // 数字不用写双引号 JSON.par ...