http://blog.csdn.net/jizhongchun/article/details/8472755

导读：Emmet的基本语法。学习步骤是：1 基本语法； 2 html命令； 3 css命令； 4 xsl命令； 5 自定义snippets.json。

详细：

Emmet针对html，键入命令都是基于html的tags。命令输入完成后，光标停在命令尾端，使用Ctrl+E快捷键执行命令。

1 子节点 操作符 >

  1. body>div>ul>li

使用快捷键 Ctrl+E ，执行命令后，则出现下面的html节点结构：

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

2 兄弟节点 操作符 +

  1. body>div+div+div

执行命令，如下：

  1. <body>
  2. <div></div>
  3. <div></div>
  4. <div></div>
  5. </body>

3 父节点 操作符 ^ （英文输入法下，Shift+6）

  1. body>div+div+div^script

执行命令后，如下：

  1. <body>
  2. <div></div>
  3. <div></div>
  4. <div></div>
  5. </body>
  6. <script></script>

这里要说明2点：a 父节点只是针对^操作符前一个tag而言； b 生成的父节点追加是向后的，即例子中script的生成，出现在body之后，而不是之前。

4 多个相同兄弟节点 操作符 *

在上面的例子中可以看到，生成了三个兄弟节点 div ，如果当前文档需要生成10个呢，难道要输入十次div么？不，使用*10 就搞定了。例子：

  1. body>div*10

执行命令后，如下：

  1. <body>
  2. <div></div>
  3. <div></div>
  4. <div></div>
  5. <div></div>
  6. <div></div>
  7. <div></div>
  8. <div></div>
  9. <div></div>
  10. <div></div>
  11. <div></div>
  12. </body>

看吧，多么方便呀。

5 分组 操作符 ()
从第三个例子可以想到，如果给每个div生成不同的子节点，可能会想到的命令如下：

  1. body>div>ul>li+div>p+div>form^script

可是，生成后，却是下面的结果，并非所愿：

  1. <body>
  2. <div>
  3. <ul>
  4. <li></li>
  5. <div>
  6. <p></p>
  7. <div>
  8. <form action=""></form>
  9. </div>
  10. <script></script>
  11. </div>
  12. </ul>
  13. </div>
  14. </body>

那怎么办？使用 () 进行分块吧：

  1. body>(div>ul>li)+(div>p)+(div>form)^script

执行，对了，这才是所要的结果：

  1. <body>
  2. <div>
  3. <ul>
  4. <li></li>
  5. </ul>
  6. </div>
  7. <div>
  8. <p></p>
  9. </div>
  10. <div>
  11. <form action=""></form>
  12. </div>
  13. </body>
  14. <script></script>

6 ID 和 CLASS 操作符 # 和 .

常要做的一件事儿就是给element追加属性。如下：

  1. body>(div#nav>ul>li)+(div.main>p)+(div.submit.foot>form)^script

执行结果如下：

  1. <body>
  2. <div id="nav">
  3. <ul>
  4. <li></li>
  5. </ul>
  6. </div>
  7. <div class="main">
  8. <p></p>
  9. </div>
  10. <div class="submit foot">
  11. <form action=""></form>
  12. </div>
  13. </body>
  14. <script></script>

嗯，漂亮！

7 自定义属性操作符 []
这里首先说明一点，按照现在的前端规范，样式是和html分离的，所以，这里就只有自定义属性一说；但是，比如img等需要引入资源和进行alt说明（按照性能一说，alt必须有）的属性，是会自动生成的。

  1. body>(div#nav>ul>li>img[user_data="my_face"])+(div.main>p)+(div.submit.foot>form)^script

执行结果如下：

  1. <body>
  2. <div id="nav">
  3. <ul>
  4. <li><img src="" alt="" user_data="my_face"></li>
  5. </ul>
  6. </div>
  7. <div class="main">
  8. <p></p>
  9. </div>
  10. <div class="submit foot">
  11. <form action=""></form>
  12. </div>
  13. </body>
  14. <script></script>

说明一点，如果自定义的属性只没有空格，可以不用键入""双引号。如下：

  1. body[who=baidu.com]>div

执行结果如下：

  1. <body who="baidu.com">
  2. <div></div>
  3. </body>

8 计数器 $

举个实例，在我们做”轮播“时，给元素的命名（id或者class），都会有一个计数位，这个时候，我们就可以使用 $ 它来实现了，如下：

  1. body>div#loop_show>ul>li.img_$*5

执行结果如下：

  1. <body>
  2. <div id="loop_show">
  3. <ul>
  4. <li class="img_1"></li>
  5. <li class="img_2"></li>
  6. <li class="img_3"></li>
  7. <li class="img_4"></li>
  8. <li class="img_5"></li>
  9. </ul>
  10. </div>
  11. </body>

说明，a 这里的*5操作是放在一个元素所有操作就结束的末尾;；b $操作符可以进行组合，比如

 

，将由填充数0001开始计数。

9 文本内容 操作符 {}

在给tag进行填充文本内容时候，使用 {} 来完成，如下：

  1. body>div#loop_show>ul>li.img_${轮播图片$}*5

执行结果如下：

  1. <body>
  2. <div id="loop_show">
  3. <ul>
  4. <li class="img_1">轮播图片1</li>
  5. <li class="img_2">轮播图片2</li>
  6. <li class="img_3">轮播图片3</li>
  7. <li class="img_4">轮播图片4</li>
  8. <li class="img_5">轮播图片5</li>
  9. </ul>
  10. </div>
  11. </body>

说明，$ 只是一个计数器，所以呢，放在合法的地方都是可以的。如上命令所示。

10 关于空格

从上面的命令都能看得出来，操作符与tags之间，都没有空格，因为，空格被Emmet用着了“缩写解析”的停止标志。而在属性值中，如果有空格，也需要使用""（双引号）进行包括。

11 其他

a 执行命令。执行命令时候，有两种合法操作：一是光标位于命令行末，二是命令行被整体选中。

b 命令行数。命令不能多行，只允许一行。这个 第10点 中的 空格 的解释有些类似，LF标志Emmet无法解析。

c 命令执行后光标位置。a 中第一种情况，光标停留在 【最低级节点文本编辑区域】；第二种情况，如果是向后选中全行，结果同a中第一种情况，如果是向前全选整行，则光标停留在结果的最后位置。

基本语法就是这些了。

转：Emmet 学习之路 - 2 基本语法的更多相关文章

  1. qt 学习之路 ：QML 语法

    前面我们已经见识过 QML 文档.一个 QML 文档分为 import 和对象声明两部分.如果你要使用 Qt Quick,就需要 import QtQuick 2.QML 是一种声明语言,用于描述程序 ...

  2. Qt 学习之路 2（16）：深入 Qt5 信号槽新语法

    Qt 学习之路 2(16):深入 Qt5 信号槽新语法  豆子  2012年9月19日  Qt 学习之路 2  53条评论 在前面的章节(信号槽和自定义信号槽)中,我们详细介绍了有关 Qt 5 的信号 ...

  3. jQuery学习之路（1）-选择器

    ▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...

  4. Webwork 学习之路【03】核心类 ServletDispatcher 的初始化

    1. Webwork 与 Xwork 搭建环境需要的的jar 为:webwork-core-1.0.jar,xwork-1.0.jar,搭建webwork 需要xwork 的jar呢?原因是这样的,W ...

  5. WPF学习之路初识

    WPF学习之路初识   WPF 介绍 .NET Framework 4 .NET Framework 3.5 .NET Framework 3.0 Windows Presentation Found ...

  6. 初次踏上GUI编程之路（有点意思，详细介绍了菜鸟的学习之路）

    初次踏上GUI编程之路 —— 我的Qt学习方法及对Qt认识的不断转变 -> 开始接触GUI与开始接触Qt: 话说,我第一次看见“Qt”这一个名词,好像是在CSDN网站的主页上吧,因为CSDN好像 ...

  7. 开始了大概三四天的Rails学习之路

    最近因为一位极光推送朋友,我开始了大概三四天的Rails学习之路,最终达到的水平是可以比较轻松地做出大部分功能,然后自我感觉可以自如地按照Rails的设计思想去思考.由于编程的日益流行,我结识了越来越 ...

  8. Python学习之路-Day2-Python基础3

    Python学习之路第三天 学习内容: 1.文件操作 2.字符转编码操作 3.函数介绍 4.递归 5.函数式编程 1.文件操作 打印到屏幕 最简单的输出方法是用print语句,你可以给它传递零个或多个 ...

  9. Python学习之路-Day2-Python基础2

    Python学习之路第二天 学习内容: 1.模块初识 2.pyc是什么 3.python数据类型 4.数据运算 5.bytes/str之别 6.列表 7.元组 8.字典 9.字符串常用操作 1.模块初 ...

随机推荐

  1. CCNET+MSBuild+SVN实时构建的优化总结

    本文不是介绍如何使用CCNET+MSBuild+SVN构建自动编译系统,相关的内容可以从很多地方获取,可以再园子里搜一下. 随着我们的SVN库日益壮大,容量达到10G,几十G 甚至更大时,我们发现自动 ...

  2. JPA的介绍

    一.JPA概述 1.JPA是什么? JPA:Java Persistence API:用于对象持久化的 API,JPA是Java EE 5.0 平台标准的 ORM 规范, 使得应用程序以统一的方式访问 ...

  3. CentOS 6.4 系统下的MySQL的主从库配置

    首先了解到一. 二一.(MySQL下创建用户并且赋予权限)root用户创建yong用户的SQL语句 CREATE USER 'yong'@'localhost' IDENTIFIED BY 'yong ...

  4. ios文本框基本使用,以及所有代理方法的作用

    /* UITextField文本输入框 */ UITextField * textField = [[UITextField alloc]initWithFrame:CGRectMake(50, 50 ...

  5. nmon命令用法

    用途 以交互方式显示本地系统统计信息并以记录方式记录系统统计信息. 语法 交互方式: nmon [ -h ] nmon [ -s < seconds > ] [ -c < count ...

  6. Chapter 2 Open Book——15

    The rest of the week was uneventful. I got used to the routine of my classes. 这周剩下的时间都是平淡无事的.我就是正常的上 ...

  7. 编码规范系列（二）：Eclipse Checkstyle配置

    http://chenzhou123520.iteye.com/blog/1627618 上一篇介绍了<编码规范系列(一):Eclipse Code Templates设置>,这篇主要介绍 ...

  8. 第三十节，正则表达式re模块

    正则表达式 正则表达式本身是一种小型的.高度专业化的编程语言,而在python中,通过内嵌集成re模块,程序员们可以直接调用来实现正则匹配.正则表达式模式被编译成一系列的字节码,然后由用C编写的匹配引 ...

  9. c语言中gets ，getschar 和fgets 的用法及三者之间的差别

    gets——从标准输入接收一串字符,遇到'\n'时结束,但不接收'\n',把 '\n'留存输入缓冲区:把接收的一串字符存储在形式参数指针指向的空间,并在最后自动添加一个'\0'.getchar——从标 ...

  10. CentOS 7 BIND 搭建

    域名查找顺序 设置 /etc/host.conf 1. bind 安装 $ yum install bind bind-utilsnslookup (name server lookup) 在bind ...