Emmet 使用类似于 CSS 选择器的语法描述元素在生成的文档树中的位置及其属性。

元素

可以使用元素名(如 div 或者 p)来生成 HTML 标签。Emmet 没有预定义的有效元素名的集合,可以把任何单词当作标签来生成和使用:div → <div></div>foo → <foo></foo> 等。

嵌套运算符

嵌套运算符用于以缩写的方式安排元素在生成文档树中的位置:将其放在内部或成为相邻的元素。

子: >

可以使用 > 运算符指定嵌套元素在另一个元素内部:

div>ul>li

生成的结果为:

<div>
<ul>
<li></li>
</ul>
</div>

兄弟: +

使用 + 运算符将相邻的其它元素处理为同级:

div+p+bq

生成的结果为:

<div></div>
<p></p>
<blockquote></blockquote>

上升: ^

使用 > 运算符将会降低所有后续所有元素在生成树中的级别,每一级的兄弟元素也被解析成相同深度的元素:

div+div>p>span+em

将生成:

<div></div>
<div>
<p><span></span><em></em></p>
</div>

使用 ^ 运算符,能够提升元素在生成树中的一个级别,并同时影响其后的元素:

div+div>p>span+em^bq

将生成:

<div></div>
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div>

可以连续使用多个 ^ 运算符,每次提高一个级别:

div+div>p>span+em^^^bq

将生成:

<div></div>
<div>
<p><span></span><em></em></p>
</div>
<blockquote></blockquote>

重复: *

使用 * 运算符可以定义一组元素:

ul>li*5

将生成:

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

分组: ()

括号用于在复杂的 Emmet 缩写中处理一组子树:

div>(header>ul>li*2>a)+footer>p

将生成:

<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>

如果想与浏览器 DOM 协同工作,可能想要对文档片段分组:每个组包含一个子树,所有的后续元素都插入到与组中第一个元素相同的级别中。

能够在组中嵌套组并且使用 * 运算符绑定它们:

(div>dl>(dt+dd)*3)+footer>p

将生成:

<div>
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
</div>
<footer>
<p></p>
</footer>

使用分组,可以使用单个缩写逐个写出整页的标签,不过尽量不要这么做。

属性运算符

属性运算符用于编辑所生成的元素的属性,在 HTML 和 XML 中可以快速地为生成元素添加 class 属性。

ID 和 CLASS

在 CSS 中,可以使用 elem#id 和 elem.class 注解来达到为元素指定 id 或 class 属性的目的。在 Emmet 中,可以使用几乎相同的语法来为指定的元素添加这些属性:element:

div#header+div.page+div#footer.class1.class2.class3

生成:

<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>

自定义属性

可以使用 [attr] 注解(就像在 CSS 中一样)来为元素添加自定义属性:

td[title="Hello world!" colspan=3]

将生成:

<td title="Hello world!" colspan="3"></td>
  • 能够在方括号中放置许多属性,
  • 可以不为属性指定值: td[colspan title] 将生成 <td colspan="" title=""> ,如果你的编辑器支持,可以使用 tab 来跳到每个空属性中填写。
  • 属性可以用单引号或双引号作为定界符。
  • 如果属性不包含空格,不需要用定界符括住它:td[title=hello colspan=3] 是正确的。

编号: $

使用 * 运算符可以重复生成元素,如果带 $ 就可以为它们编号。把 $ 放在元素名、属性名或者属性值中,将为每个元素生成正确的编号:

ul>li.item$*5

将生成:

<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>

使用多 $ 可以填充前导的零:

ul>li.item$$$*5

将生成:

<ul>
<li class="item001"></li>
<li class="item002"></li>
<li class="item003"></li>
<li class="item004"></li>
<li class="item005"></li>
</ul>

改变编号的基数和方向

使用 @ ,可以改变数字的走向(升序或降序)和基数(例如起始值)。

在 $ 后添加 @- 来改变数字走向:

ul>li.item$@-*5

将生成:

<ul>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li>
</ul>

在 $ 后面添加 @N 改变编号的基数:

ul>li.item$@3*5

将生成:

<ul>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
<li class="item7"></li>
</ul>

这些附加的运算符可以同时使用:

ul>li.item$@-3*5

将生成:

<ul>
<li class="item7"></li>
<li class="item6"></li>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
</ul>

文本: {}

可以用花括号向元素中添加文本:

a{Click me}

将生成:

<a href="">Click me</a>

注意,这个 {text} 是被当成独立元素解析的(类似于 divp ),但当其跟在其它元素后面时则有所不同。例如, a{click} 和 a>{click} 产生相同的输出,但是 a{click}+b{here} 和 a>{click}+b{here} 的输出就不同了:

<!-- a{click}+b{here} -->
<a href="">click</a><b>here</b> <!-- a>{click}+b{here} -->
<a href="">click<b>here</b></a>

在第二示例中, <b> 元素放在了 <a> 元素的里面。差别如下:当 {text} 写在元素的后面,它不影响父元素的上下文。下面是展示这种差别的重要性的较复杂的例子:

p>{Click }+a{here}+{ to continue}

生成:

<p>Click <a href="">here</a> to continue</p>

在这个例子里, 我们用 > 运算符明确的将 Click here to continue 下移一级,放在 <p> 元素内,但对于 a 元素的内容就不需要了,因为 <a> 仅有 here 这一部分内容,它不改变父元素的上下文。

作为比较,下面是不带有 > 运算符的相同缩写:

p{Click }+a{here}+{ to continue}

生成:

<p>Click </p>
<a href="">here</a> to continue

缩写格式的注意事项

当熟悉了 Emmet 的缩写语法后,可能会想要使用一些格式来生成更可读的缩写。例如,在元素和运算符之间使用空格间隔:

(header > ul.nav > li*5) + footer

但是这种写法是错误的,因为空格是 Emmet 停止缩写解析的标识符

请多用户误以为每个缩写都应写在新行上,但是他们错了:可以在文本的任意位置键入和扩展缩写。

(此处原文使用脚本做了一段示例,限于博客的体例,我没有办法将原文的示例脚本放在本文中,因此用截屏工具录下了一段屏幕,放在此处,有兴趣的朋友,可以去原文地址去看原文中的示例)

这也就是为什么当想要停止解析和扩展时,Emmet 需要一些标志的原因。如果你仍然认为复杂的缩写需要一些格式使其更易读:

  • 缩写不是模板语言,它们不需要”易读“,它们必须”可快速扩展和移动“。
  • 不需要写复杂的缩写。不要认为在 web 编程中”键入“是最慢的运算。想快速找出构建单个的复杂缩写比构造和键入一些较短较简单的缩写更慢。

原文地址为:http://docs.emmet.io/abbreviations/syntax

转载自:http://www.cnblogs.com/matchless/archive/2013/04/10/3010628.html

[转载]Emmet (ZenCoding) 缩写语法的更多相关文章

  1. Emmet 语法大全(缩写语法/sublime 插件)

    Emmet 使用类似于 CSS 选择器的语法描述元素在生成的文档树中的位置及其属性. 元素 可以使用元素名(如 div 或者 p)来生成 HTML 标签.Emmet 没有预定义的有效元素名的集合,可以 ...

  2. Emmet缩写语法

    缩写语法 Emmet 使用类似于 CSS 选择器的语法描述元素在生成的文档树中的位置及其属性. 元素 可以使用元素名(如 div 或者 p)来生成 HTML 标签.Emmet 没有预定义的有效元素名的 ...

  3. “一键”生成HTML——Emmet插件常用语法

    Emmet是一款文本编辑器/IDE的插件,用来快速生成复杂的HTML代码,只要掌握一些常用的语法(类似于CSS选择器),就可以减少重复编码的工作(主要是懒).我个人惯用的是sublime,因此下文介绍 ...

  4. Emmet(Zen Coding)语法规则简介

    ———Emmet(Zen Coding)语法规则简介——— [Zen Coding可谓快速开发HTML和CSS的利器,主要采用仿css类选择器方式编写代码,以下是该利器的基本语法规则和代码示例] 基础 ...

  5. Emmet的HTML语法(敲代码的快捷方式)

    Emmet的HTML语法(敲代码的快捷方式)   版权声明:本文为网上转载.   所有操作按下“tab”键即可瞬间完成 元素 1.在编辑器中输入元素名称,即可自动补全生成 HTML 标签,即使不是标准 ...

  6. 常用的CSS缩写语法一些方法小结

    使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #000000可以缩写为#000;#336699可以 ...

  7. 如何将Emmet(ZenCoding)安装到到Dreamweaver8?

    用过其他版本的Dreamweaver,还是习惯了Dreamweaver8,占用少,插件也容易安装,下面讲的是ZenCoding插件的安装方法,当然现在这个已经叫Emmet了. 安装方法: a.下载dw ...

  8. 【转载】Makedown数学公式语法

    Typora数学模块 行间表达式快捷键($$) 点击"段落"->"公式块" 快捷键Ctrl+Shift+m "$$"+回车 行内表达式 ...

  9. [转载]Emmet使用

    转载地址:http://www.iteye.com/news/27580 Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语 ...

随机推荐

  1. Keystone controller.py & routers.py代码解析

    目录 目录 Keystone WSGI 实现 controllerspy routerspy 参考文档 Keystone WSGI 实现 Keystone 项目把每个功能都分到单独的目录下,EXAMP ...

  2. Java 网络编程(1):使用 NetworkInterface 获得本机在局域网内的 IP 地址

    原文地址:https://segmentfault.com/a/1190000007462741 1.问题提出 在使用 Java 开发网络程序时,有时候我们需要知道本机在局域网中的 IP 地址.很常见 ...

  3. JAVA IntelliJ IDEA for mac/jdk的安装及环境配置、运行

    现在配置完之后再回头看看,其实挺简单, 但我还是弄了好几个小时才配置出来, 不过好在是自己配置出来的, 每天都在慢慢进步. 安装及配置步骤如下: JAVA的IDE的话去jetbrains的官网上对应下 ...

  4. HDU-1754-I Hate It-线段树-求区间最值和单点修改

    开学新拉的题目,老题重做,思路会稍微比之前清晰,不过这也算是一点点进步了. 很多学校流行一种比较的习惯.老师们很喜欢询问,从某某到某某当中,分数最高的是多少. 这让很多学生很反感. 不管你喜不喜欢,现 ...

  5. 3步永久性激活IntelliJ IDEA 亲测有效

    1.进到文件夹中:C:\Windows\System32\drivers\etc ,找到hosts文件,用文本编辑器打开文件,将“  0.0.0.0 account.jetbrains.com ”添加 ...

  6. Map获取键值,Map的几种遍历方法 (转载)

    Map类提供了一个称为entrySet()的方法,这个方法返回一个Map.Entry实例化后的对象集.接着,Map.Entry类提供了一个getKey()方法和一个getValue()方法,Map.E ...

  7. 阿里数据库大牛的 MySQL 学习指南!

    做后端的同学,总是绕不开MySQL. 毫无疑问,MySQL 是当下最流行的开源数据库.凭借强大的性能和易于使用性,它已被Google.Facebook.YouTube.百度.网易和新浪等大型互联网公司 ...

  8. 【转载】C# 开源库大全非常好

    原文地址:http://m.blog.csdn.net/woddle/article/details/37311877 C#开源大全 商业协作和项目管理平台-TeamLab 网络视频会议软件-VMuk ...

  9. Leetcode211. Add and Search Word - Data structure design 添加与搜索单词 - 数据结构设计

    设计一个支持以下两种操作的数据结构: void addWord(word) bool search(word) search(word) 可以搜索文字或正则表达式字符串,字符串只包含字母 . 或 a- ...

  10. Docker 尝试安装rabbitmq实践笔记

    docker pull rabbitmq 自定義的rabbitmq Dockerfile # base image FROM rabbitmq:3.7-management # running req ...