本文主要是介绍Emmet（ZenCoding）语法（一），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
Emmet（ZenCoding）——web开发人员的基本工具
缩写
缩写是Emmet工具包的核心，这些特殊表达式在运行时解析，并转换为结构化代码块。
缩写语法
嵌套操作：用于在生成的树中放置缩写元素
1. 儿童：>
使用>该操作符将元素嵌套在彼此中
div>ul>li 生成结果：
<div><ul><li></li></ul>
</div> 2.兄弟：+
使用+操作符将元素靠近对方放在同一层面上
div+p+blockquote 生成结果：
3.爬上：^
<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> 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> 每个组包含缩写子树，并且所有以下元素都插入与组的第一个元素相同的级别。
3.编号：$
(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>改变编号基数和方向
使用
@ 修饰符，可以更改编号方向（升序或降序）和基数（例如起始值） 改变方向，在$操作符后面添加@-
改变计数器基数值，在$操作符后面添加@N
将以上修饰符一起使用
注意：{text}写在一个单独的元素之后，与写在一个元素之后有特殊的含义。例如：a{click}与a>{click}，输出一样；但a{click}+b{here}与a>{click}+b{here}不一样。
复杂例子
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注意缩写格式规范
在操作符与元素之间随意写空格，
空格在Emmet中代表缩写停止。注意规范
(header > ul.nav > li*5) + footer空格在Emmet中代表缩写停止。注意规范
这篇关于Emmet（ZenCoding）语法（一）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
