Emmet（ZenCoding）语法（一）_综合

Emmet（ZenCoding）——web开发人员的基本工具

缩写

缩写是Emmet工具包的核心，这些特殊表达式在运行时解析，并转换为结构化代码块。

缩写语法

嵌套操作：用于在生成的树中放置缩写元素

1. 儿童：>

使用>该操作符将元素嵌套在彼此中

    div>ul>li

生成结果：

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

2.兄弟：+

使用+操作符将元素靠近对方放在同一层面上

 div+p+blockquote

生成结果：

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

3.爬上：^

使用^操作符，讲元素成为相邻元素的父元素的兄弟元素

     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>

4.乘法：*

使用*操作符可以定义要输出的元素的次数

     ul>li*5

输出：

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

5.分组：()

使用()操作符用于将复数缩写中的子树进行分组

    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>

每个组包含缩写子树，并且所有以下元素都插入与组的第一个元素相同的级别。

 (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>

属性运算符：用于修改输出元素的属性

1.ID和Class

在Emmet中可以使用elem#id和elem.class的语法将属性添加到指定元素中

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>

2.自定义属性

使用[attr]符号在元素中添加自定义属性

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

输出：

<td title="Hello world!" colspan="3"></td>

方括号中没有属性数量限制
如果你使用的编辑器允许，可以直接写空属性。例如td[colspan title]，输出<td colspan="" title="">
使用单双引号引用属性值
如果引用值没有空格，可以不使用引号。例如td[title=hello colspan=3]

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}写在一个单独的元素之后，与写在一个元素之后有特殊的含义。例如：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>

复杂例子

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

输出：

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

比较

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

输出：

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

注意缩写格式规范

在操作符与元素之间随意写空格，

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

不会被编译。
空格在Emmet中代表缩写停止。注意规范