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. iOS10访问用户权限的描述key值汇总

    https://developer.apple.com/library/content/documentation/General/Reference/InfoPlistKeyReference/Ar ...

  2. MFC下对文件及文件夹的操作(复制、剪切、删除、创建文件夹，写文件)

    一.文件夹的创建 void CFileOperationDlg::OnButtonMakeFolder() { // TODO: Add your control notification handl ...

  3. CSS的基本概念

    <!--CSS 一.概念:CSS的全称是Cascading Style Sheets,层叠样式表,用来控制HTML标签样式,在美化网页中起到非常重要的作用 CSS的编写格式是键值对形式的,比如 ...

  4. C语言中结构体定义实际上相当于变量入栈

    struct context { int edi; int esi; int ebx; int ebp; int eip;}; 对应的入栈顺序是 pushl %esp pushl %eip pushl ...

  5. Strusts2--课程笔记5

      数据验证: 输入验证分为客户端验证与服务器端验证.客户端验证主要通过JavaScript脚本进行,而服务器端验证主要是通过Java代码进行验证. 分为以下四种情况: (1)手工编写代码,对所有Ac ...

  6. 8. Python自定义模块humansize

    我们在提取一个文件元信息的时候,经常会使用到获取元信息的size, 但是默认提取出来的是字节为单位计算的大小,我们需要转换成MB或者GB 或者TB的大小. 因此就需要使用到humansize这个模块, ...

  7. Redis简介一

    Redis是一个开源的,使用C语言编写,面向“键/值”对类型数据的分布式NoSQL数据库系统,特点是高性能,持久存储,适应高并发的应用场景.Redis纯粹为应用而产生,它是一个高性能的key-valu ...

  8. 禁止 一些地区的ip用户访问 网站

    01 framework.php 中 获取请求的ip地址.保存为常量 define('IP', request::get_clientip()); 02 setting表中.属于system模块,保存 ...

  9. 克隆虚拟机系统整个文件快照，然后另起建立该系统，产生的IP地址冲突解决办法

    进入克隆后的文件系统 cd /etc/sysconfig/network-scripts/ cp ifcfg-eth0  ifcfg-eth1 vim ifcfg-eth1   #修改其中的文件内容 ...

  10. 萝卜德森的sublime笔记中文翻译版

    我已经使用subliem编辑器版本2接近2个月了,并且我在其中找到了一堆有用的技巧.我发觉应该写下这些技巧,为那些对此感兴趣的人们.我会尽力的详细描述,那些看起来像魔法一样的东西,因为很多非常“酷”的 ...