Emmet (Zen Coding) 语法学习笔记
元素卷标
使用Html的元素名或者卷标名来生成Html卷标,可以使用任意的名称或单词来生成标签,Emmet可以在文本的任意位置插入和扩展缩写,中间禁止用空格来断开语句,因为空格是Emmet语法停止解析的标识符.
如:
div--<div></div>;foo--<foo></foo>
运算符
标签运算符
-
子集符号:
>
示例1:
div>ul>li
生成1:
<div> <ul> <li></li> </ul> </div>
-
并列符号:
+
示例1:
div+p+bq
生成1:
<div></div> <p></p> <blockquote></blockquote>
-
上级符号:
^
示例1:
div+div>p>span+em^bq
生成1:
<div></div> <div> <p><span></span><em></em></p> <blockquote></blockquote> </div>
可以连续使用多个 ^ 运算符,每一个提升一个级别.
示例2:
div+div>p>span+em^^bq
生成2:
<div></div> <div> <p><span></span><em></em></p> </div> <blockquote></blockquote>
-
重复符号:
*
示例1:
ul>li*5
生成1:
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
-
分组符号:
()
示例1:
div>(header>ul>li*2>a)+footer>p
生成1:
<div> <header> <ul> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </header> <footer> <p></p> </footer> </div>
示例2:
(div>dl>(dt+dd*2)*3)+footer>p
生成2:
<div> <dl> <dt></dt> <dd></dd> <dd></dd> <dt></dt> <dd></dd> <dd></dd> <dt></dt> <dd></dd> <dd></dd> </dl> </div> <footer> <p></p> </footer>
属性运算符
-
id 属性符号:
#
示例1:
div#header
生成1:
<div id="header"></div>
-
class 属性符号:
.
示例1:
div.page
生成1:
<div class="page"></div>
综合示例1:
div#header+div.page+div#footer.class1.class2.class3
综合生成1:
<div id="header"></div> <div class="page"></div> <div id="footer" class="class1 class2 class3"></div>
批注
使用符号:[]
示例1:
td[title="Hello world!" colspan=3]
生成1:
<td title="Hello world!" colspan="3"></td>
注意:
-
可以在方括号中放置诸多属性;
-
可以不给属性指定值,诸如:
td[title colspan name]
将生成:
<td title="" colspan="" name=""></td>
-
属性可以使用单引号或者双引号来作为容器;
-
属性值包含空格,需要使用引号来界定它.
编号
使用符号:$
示例1:
ul>li.item$*5
生成1:
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>
使用多个 $ 符号可以填充指定位数前导的零:
示例2:
ul>li.item$$$*5
生成2:
<ul>
<li class="item001"></li>
<li class="item002"></li>
<li class="item003"></li>
<li class="item004"></li>
<li class="item005"></li>
</ul>
在 $ 符号后面使用 @ 符号加数字改变编号的起始基数, @ 后面所接数值的正负性改变编号的升序或者降序(默认一位数值,从1起始,正序):
示例3:
ul>li.item$@-*5
生成3:
<ul>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li>
</ul>
示例4:
ul>li.item$@3*5
生成4:
<ul>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
<li class="item7"></li>
</ul>
示例5:
ul>li.item$$$@-3*5
生成5:
<ul>
<li class="item007"></li>
<li class="item006"></li>
<li class="item005"></li>
<li class="item004"></li>
<li class="item003"></li>
</ul>
文本
使用符号:{}
示例1:
a{click here!}
生成1:
<a href="">click here!</a>
示例2:
a{click}+b{ here!}
生成2:
<a href="">click</a><b> here!</b>
示例3:
a>{click}+b{ here!}
生成3:
<a href="">click<b> here!</b></a>
示例4:
p{Click }+a{here}+{ to continue!}
生成4:
<p>Click </p>
<a href="">here</a> to continue!
其他
- 如果没有显式地指定标签,Emmet将根据代码相应的位置,隐式的生成相应的标签.
示例1:
.class
生成1:
<div class="class"></div>
示例2:
em>.class
生成2:
<em><span class="class"></span></em>
示例3:
ul>.class
生成3:
<ul>
<li class="class"></li>
</ul>
示例4:
table>.row>.col
生成4:
<table>
<tr class="row">
<td class="col"></td>
</tr>
</table>
-
所有未知的缩写或者单词都将转换成为标签,如foo--
<foo></foo>
. -
其他缩写符号,详细列表见Emmet官方缩写列表(包含html,css,xsl),很好很强大!
示例:
!
生成:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
Watch Demo @: Emmet 官方网站
date: 2015-04-18
tags: Emmet; Zen; 禅; 撸码; 前端;