Emmet (Zen Coding) 语法学习笔记

元素卷标

使用Html的元素名或者卷标名来生成Html卷标,可以使用任意的名称或单词来生成标签,Emmet可以在文本的任意位置插入和扩展缩写,中间禁止用空格来断开语句,因为空格是Emmet语法停止解析的标识符.

如:

div--

;foo--

运算符

标签运算符

  1. 子集符号:>

    示例1:

    div>ul>li

    生成1:

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

  2. 并列符号:+

    示例1:

    div+p+bq

    生成1:

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

  3. 上级符号:^

    示例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>

  4. 重复符号:*

    示例1:

    ul>li*5

    生成1:

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

  5. 分组符号:()

    示例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+dd2)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>

属性运算符

  1. id 属性符号:#

    示例1:

    div#header

    生成1:

  2. class 属性符号:.

    示例1:

    div.page

    生成1:

    综合示例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:

注意:

  1. 可以在方括号中放置诸多属性;

  2. 可以不给属性指定值,诸如:

    td[title colspan name]

    将生成:

  3. 属性可以使用单引号或者双引号来作为容器;

  4. 属性值包含空格,需要使用引号来界定它.

编号

使用符号:$

示例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:

click here!

示例2:

a{click}+b{ here!}

生成2:

click here!

示例3:

a>{click}+b{ here!}

生成3:

click here!

示例4:

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

生成4:

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

其他

  • 如果没有显式地指定标签,Emmet将根据代码相应的位置,隐式的生成相应的标签.

示例1:

.class

生成1:

示例2:

em>.class

生成2:

示例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; 禅; 撸码; 前端;

posted @ 2020-04-15 19:08  MoonYear530  阅读(153)  评论(0)    收藏  举报