Emmet http://docs.emmet.io ,原来叫作 ZenCoding, 是一个很有意思的东西,可以帮助用户在编辑器中快速书写HTML代码。对于 Web 开发人员来说,写HTML代码确实是很无聊的事儿,有了 ZenCoding 可以提高效率。

例如在 支持 ZenCoding 的编辑器中,输入下面这行代码:

<!-- 输入这一行代码 -->
div>(header>div)+(section>ul>li.item$$*4>a{link$$})+footer>div>span

光标停留在行尾,然后按某一个快捷键(这个快捷键在不同的编辑器可能不一样,例如在 Visual Studio(需要安装 Web Essentials 插件)是 Tab),这一行代码就变成如下的若干行HTML代码:

<!-- 在编辑器中扩展得到如下代码 -->
<div>
    <header>
        <div></div>
    </header>
    <section>
        <ul>
            <li class="item01"><a href="">link01</a></li>
            <li class="item02"><a href="">link02</a></li>
            <li class="item03"><a href="">link03</a></li>
            <li class="item04"><a href="">link04</a></li>
        </ul>
    </section>
    <footer>
        <div>
            <span></span>
        </div>
    </footer>
</div>

扩展规则基本上对应与CSS很类似的几条基本规则:

  • #id,例如 span#header
  • .class,例如 div.side
  • [attribute],例如 input[type]
  • > 子元素,例如 div > ul
  • + 兄弟元素,例如 div#page>div#header+div#main
  • *n 重复n次,例如 ul>li*5
  • $ 替换为递增的数字,例如 ul>li#item$*5
  • $$ 表示两位数,例如 ul>li#item$$*5
  • {} 替换为某个元素中的文本,例如 p{sample text}
  • () 用于改变默认的结合顺序,例如 div>p+p 和 (div>p)+p 扩展后的结果是不同的。

这些都很简单,详细可以参考http://www.johnpapa.net/zen-coding-in-visual-studio-2012,这是我找到的最简单明了的一篇小文章。

但是要注意的是,文章里面关于小括号的用法的例子结果是不正确的。它也确实是上面规则里唯一一个不十分直观的规则。

小括号用于改变默认的结合顺序,例如 div>p+p 和 (div>p)+p 扩展后的结果是不同的。如果没有使用括号,div>p+p 扩展后的HTML代码如下:

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

而如果使用了括号以后, (div>p)+p 展开后的结果如下:

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

从上面的代码可以看出,默认情况下 > 和 + 遵循右结合,用括号可以改变。

因此看一下 http://www.johnpapa.net/zen-coding-in-visual-studio-2012 文章中的最后一个例子:

div>(header>div)+section>(ul>li*2>a)+footer>(div>span)

文章给出的结果是:

<div>
    <header>
        <div></div>
    </header>
    <section>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </section>
    <footer>
        <div>
            <span></span>
        </div>
    </footer>
</div>

这个结果是不对的,footer 应该和 ul 并列,而不是 section 并列。正确的扩展结果如下所示:

<div>
    <header>
        <div></div>
    </header>
    <section>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
        <footer>
            <div>
                <span></span>
            </div>
        </footer>
    </section>
</div>

可以看到,小括号大大增加了ZenCoding的表现力,可以用一行代码表达一个完整的网页结构。

另外文章说 Visual Studio 尚不支持小括号的规则,现在已经支持了。