使用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!
示例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; 禅; 撸码; 前端;
原文：https://www.cnblogs.com/MoonYear530/p/12707322.html