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. Eclipse没有提示了，按Alt+/ 也无代码提示

    1.菜单window->Preferences->Java->Editor->Content Assist->Enable auto activation 选项要打上勾  ...

  2. mysql多表链接查询

    select area from areas where cityid=(select cityid from cities where city like '杭州%') and id!=(selec ...

  3. opencv轮廓处理函数详细

    ApproxChains 用多边形曲线逼近 Freeman 链 CvSeq* cvApproxChains( CvSeq* src_seq, CvMemStorage* storage, int me ...

  4. php 关了浏览器也可以自动运行脚本

    <?php ignore_user_abort(); //即使Client断开(如关掉浏览器),PHP脚本也可以继续执行. set_time_limit(0); //执行时间为无限制,php默认 ...

  5. mysql编码设置 [http://blog.knowsky.com/254652.htm]

    MYSQL 2009-09-11 15:37 阅读73 评论1 字号: 大大 中中 小小mysql> SHOW VARIABLES LIKE 'character_set_%';+------- ...

  6. Redis简介三

    目录 一.Key 二.String 三.Hash 四.List 五.Set 六.SortedSet 七.Pub/Sub 八.Transaction 九.Script 十.Connection 十一.S ...

  7. 理解 bashrc 和 profile(转)

    转自:https://wido.me/sunteya/understand-bashrc-and-profile/ 在一般的 linux 或者 unix 系统中, 都可以通过编辑 bashrc 和 p ...

  8. 常用CSS样式 持续更新

    + CSS + a标签 - 去除a标签下划线 a{ text-decoration:none; } - 未被访问状态下的a标签去除下划线 a:link{ text-decoration:none; } ...

  9. 【01-14】hibernate时间生成

    package rugal.sample.core.entity; import java.util.Date; import java.util.UUID; import javax.persist ...

  10. python解决接口测试获取手机验证码问题

    最近在做接口测试的时候遇到一个问题,就是有个很重要的接口要用到手机短信验证码,而其他接口都依赖于这个验证码,如果没有短信验证码就不能进行下面接口的测试,所以为了定时的验证线上的接口是否正常,而且又不修 ...