emmet 是一个提高前端开发效率的一个工具。
emmet允许在html、xml、和css等文档中输入缩写，然后按tab键自动展开为完整的代码片段。

一、Sublime Text 3 安装插件Emmet
点击菜单栏的首选项
->Package Control
-> 在弹出命令行中输入ip，在列表中点击“install Package”
-> 弹出命令行输入框，输入“emmet”进行安装

本人安装完后提示
Error while loading PyV8 binary:exit code 4
Try to manually install PyV8 from
https://github.com/emmetio/pyv8-binaries
解决方法：
按提示打开https://github.com/emmetio/pyv8-binaries，选择自己版本下载pyv8，本人下载pyv8-win64-p3.zip。
点击Sublime Text 3菜单栏的首选项->浏览插件目录，打开Packages目录，再切换到上一层Installed Packages目录，
新建目录PyV8，把pyv8-win64-p3.zip解压后的文件放进去，重启ST编辑器。

二、emmet的用法
emmet插件的官方文档： https://docs.emmet.io/abbreviations/syntax/

新建一个html文件
1、元素
可以使用元素的名称（如DIV或P）生成HTML标记。
如输入div按tabl键后，自动生成<div></div>。
如果输入！，则自动生成一个HTML5基本结构

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.  
  9. </body>
  10. </html>

2、嵌套操作符
（1）子元素：>

  1. <!-- div>ul>li -->
  2.  
  3. <div>
  4.     <ul>
  5.         <li></li>
  6.     </ul>
  7. </div>

备注：div>ul>li的中间和后面不能有空格，否则按tab键后emmet 会停止解析，后面的例子也一样不能有空格。

（2）兄弟元素：+

  1. <!-- div+p+bq --> -->
  2.  
  3. <div></div>
  4. <p></p>
  5. <blockquote></blockquote>

（3）向上一层：^，和>相反，可以多次使用

  1. <!-- div+div>p>span+em -->
  2.  
  3. <div></div>
  4. <div>
  5.     <p><span></span><em></em></p>
  6. </div>
  7.  
  8. <!-- div+div>p>span+em^^^bq  -->
  9.  
  10. <div></div>
  11. <div>
  12.     <p><span></span><em></em></p>
  13. </div>
  14. <blockquote></blockquote>

（4）乘法：*，重复指定次数生成元素

  1. <!-- ul>li*5  -->
  2.  
  3. <ul>
  4.     <li></li>
  5.     <li></li>
  6.     <li></li>
  7.     <li></li>
  8.     <li></li>
  9. </ul>

（5）分组：()，括号里面的内容为一个代码块，括号后面的元素与括号的第一个元素在同一级别

  1. <!-- div>(header>ul>li*2>a)+footer>p  -->
  2.  
  3. <div>
  4.     <header>
  5.         <ul>
  6.             <li><a href=""></a></li>
  7.             <li><a href=""></a></li>
  8.         </ul>
  9.     </header>
  10.     <footer>
  11.         <p></p>
  12.     </footer>
  13. </div>

3、属性操作符

（1）id和class

  1. <!-- div#header+div.page+div#footer.class1.class2.class3 -->
  2.  
  3. <div id="header"></div>
  4. <div class="page"></div>
  5. <div id="footer" class="class1 class2 class3"></div>

（2）自定义属性：[attr]

  1. <!-- td[title="Hello world!" colspan=3] -->
  2.  
  3. <td title="Hello world!" colspan="3"></td>

（3）项目编号：$

  1. <!-- ul>li.item$*5 -->
  2.  
  3. <ul>
  4.     <li class="item1"></li>
  5.     <li class="item2"></li>
  6.     <li class="item3"></li>
  7.     <li class="item4"></li>
  8.     <li class="item5"></li>
  9. </ul>

使用任意个$在数字前加任意个0

  1. <!-- ul>li.item$$*5 -->
  2.  
  3. <ul>
  4.     <li class="item01"></li>
  5.     <li class="item02"></li>
  6.     <li class="item03"></li>
  7.     <li class="item04"></li>
  8.     <li class="item05"></li>
  9. </ul>

倒序，在$后面加@-

  1. <!-- ul>li.item$@-*5 -->
  2.  
  3. <ul>
  4.     <li class="item5"></li>
  5.     <li class="item4"></li>
  6.     <li class="item3"></li>
  7.     <li class="item2"></li>
  8.     <li class="item1"></li>
  9. </ul>

指定开始的序号，在$后面加@N，N为开始的序号

  1. <!-- ul>li.item$@3*5 -->
  2.  
  3. <ul>
  4.     <li class="item3"></li>
  5.     <li class="item4"></li>
  6.     <li class="item5"></li>
  7.     <li class="item6"></li>
  8.     <li class="item7"></li>
  9. </ul>

4、文本：{}，为元素添加文本

  1. <!-- a{Click me} -->
  2.  
  3. <a href="">Click me</a>

因为文本也是节点，所以 a[href=1.htm]{click me} 与 a[href=1.htm]>{click me} 等价。

但是有多个元素时生成的结果会不同，用子元素>后面有元素时，也会放在a元素里面，例如

  1. <!-- a{click}+b{here} -->
  2.  
  3. <a href="">click</a><b>here</b>
  4.  
  5. <!-- a>{click}+b{here} -->
  6.  
  7. <a href="">click<b>here</b></a>

emmet的用法的更多相关文章

  1. sublime Emmet的用法及相关语法

    本节来讲一下Emmet插件的用法及相关语法. Emmet插件极大的提高了编程员的编程速度,下面我们来讲讲它的具体语法: 一.生成 HTML 文档初始结构 HTML 文档的初始结构,就是包括 docty ...

  2. Web 前端利器Emmet 的HTML用法总结

    在tutsplus那里看到一篇文章介绍Emmet 的用法,形象的gif图片一目了然,本来想翻译过来的(虽然翻译用法倒不是很难),但搜索发现已经有国人翻译过了,遂直接拿来转载在这里. Emmet 简介 ...

  3. HTML代码简写法：Emmet和Haml

    http://www.ruanyifeng.com/blog/2013/06/emmet_and_haml.html?bsh_bid=657901854 HTML代码简写法:Emmet和Haml   ...

  4. HTML的快速写法：Emmet和Haml

    HTML代码写起来很费事,因为它的标签多. 一种解决方法是采用模板, 在别人写好的骨架内,填入自己的内容.还有一种就是我今天想要介绍的方法—-简写法. 常用的简写法,目前主要是Emmet和Haml两种 ...

  5. sublime text3中emmet插件的使用

    首先,想要快速编码需 要在编辑器中安装常用插件,下面是emmet插件的使用: html5文档结构的生成方式: 1).!+tab键 2).html:5 +tab键 头部head中meta字符集的生成: ...

  6. 工欲善其事必先利其器，用Emmet提高HTML编写速度

    HTML代码写起来很费事,因为它的标签多. 一种解决方法是采用模板,在别人写好的骨架内,填入自己的内容.还有一种很炫的方法----简写法. 常用的简写法,目前主要是Emmet和Haml两种.这两种简写 ...

  7. sublime + emmet(Zen Coding)

    今天接触sublime这个编辑器,一下子就喜欢上它了,以前我一直使用NOTEPAD++,果断换上sublime玩玩,呵呵 编辑功能啥的没话,作为前端开发的话,和emmet(原名叫Zen Coding) ...

  8. HTML代码简写法：Emmet和Haml（转）

    HTML代码写起来很费事,因为它的标签多. 一种解决方法是采用模板, 在别人写好的骨架内,填入自己的内容.还有一种就是我今天想要介绍的方法----简写法. 常用的简写法,目前主要是Emmet和Haml ...

  9. learn

    1.JQ (随时) 2.微信小程序(关注群,专栏知乎,自己申请一个小程序弄个实战) 3.支付宝小程序(2017.08.18 新生代 类似微信api) 4.vue(优秀的mvvm框架,手机端主流) 5. ...

随机推荐

  1. sed 面试题

    #oldboy my qq num is 49000448.$ not 4900000448. my god ,i am not oldbey,but clsn!$ #oldboy my name i ...

  2. 松软科技web课堂:字符串方法和属性

    字符串方法帮助您处理字符串. 字符串方法和属性 原始值,比如“Bill Gates”,无法拥有属性和方法(因为它们不是对象). 但是通过 JavaScript,方法和属性也可用于原始值,因为在执行方法 ...

  3. iOS关于制作动画运动轨迹（UIBezierPath介绍）

    参考链接: https://www.jianshu.com/p/6c9aa9c5dd68

  4. iOS 自定义导航栏

    参考链接:https://blog.csdn.net/huanglinxiao/article/details/100537988 demo下载地址:https://github.com/huangx ...

  5. iOS11自定义tabBar重影问题

    转载自:(主链接)https://www.jianshu.com/p/1be90349fdb4 https://www.cnblogs.com/coderYu/p/5859638.html 很实用,有 ...

  6. Android ndk 加载简单的gif 图像

    首先获取一个安卓权限 <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"> ...

  7. 成功安装SQL Server实例后 无法找到SQL Server Configuration Manager工具的解决方案

    有一次成功安装SQL Server实例后 ,但是在所有程序中无法找到SQL Server Configuration Manager工具,以下步骤是我们当时的解决方案.最后成功将这个工具的转移到了桌面 ...

  8. C Primer Plus 第六版—— 6.16 编程练习题(附代码)

    1.编写一个程序,创建一个包含26个元素的数组,并在其中存储26个小写字母.然后打印数组的所有内容. #include <stdio.h> int main(void) { int num ...

  9. nginx配合gotty的websocket连接配置

    由于gotty我作了url加密, 所以url在nginx里的前缀要能替换才行. 配置关键就在于有没有/ #user nobody; worker_processes 1; #error_log log ...

  10. 2019.10.18模拟赛T3

    题目大意: 求$\sum\limits_{i=1}^n\sum\limits_{j=1}^n[lcm(i,j)>n](n\leq 10^{10})$的值. 题解: 这题貌似有n多种做法... 为 ...