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. 【Machine Learning in Action --5】逻辑回归（LogisticRegression）

    1.概述 Logistic regression(逻辑回归)是当前业界比较常用的机器学习方法,用于估计某种事物的可能性. 在经典之作<数学之美>中也看到了它用于广告预测,也就是根据某广告被 ...

  2. 【Machine Learning in Action --3】决策树ID3算法

    1.简单概念描述 决策树的类型有很多,有CART.ID3和C4.5等,其中CART是基于基尼不纯度(Gini)的,这里不做详解,而ID3和C4.5都是基于信息熵的,它们两个得到的结果都是一样的,本次定 ...

  3. <meta http-equiv="X-UA-Compatible" content="IE=Edge">

    1.X-UA-Compatible X-UA-Compatible是IE8的一个专有<meta>属性,它告诉IE8采用何种IE版本去渲染网页,在html的<head>标签中使用 ...

  4. 项目中 添加 swift代码 真机调试 错误

    错误: dyld: Library not loaded: @rpath/libswiftCore.dylib Referenced from: /private/var/mobile/Contain ...

  5. OSI参考模型各层的主要功能

    OSI参考模型将整个通信功能划分为7个层次,其划分的主要原则是: 1网络中各主机有相同的层次 2 不同主机的同等层具有相同的功能 3同一主机内相邻层之间通过接口通信 4 每层可以使用下层提供的服务,并 ...

  6. CSS传统布局之页面布局实例

    传统的页面布局依赖于盒模型+流动模型(flow)+浮动模型(float)+层模型(layer)来实现页面的布局,具体方法是通过盒模型+display属性+float属性+position属性来加以实现 ...

  7. 照着例子学习protobuf-python

    以下是照着python操作protobuf进行的protobuf-python的学习笔记: 首先是protobuf的下载与安装: 1 由于google被墙,所以去github上面搜索了一下protob ...

  8. javaWEB总结(7):HttpServlet和HttpServletRequest

    前言:HttpServletRequest对象封装了客户端进行HTTP协议请求时的所有信息,HttpServletRequest继承了ServletRequest,所以和ServletRequest一 ...

  9. Linux防火墙该如何设置

    在终端中输入如下命令打开防火墙:chkconfig iptables on如闭防火墙则输入:chkconfig iptables off上述两条命令均要重启系统才能生效.如果不想通过重启系统而即时生效 ...

  10. MFC利用ADO建立access数据源 ---包括访问带access密码与不带access密码两种方式）

    void CDlg_login::OnButton1() { CString c_user,c_password;m_user1.GetWindowText(c_user);m_password1.G ...