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中代表缩写停止。注意规范