关于Zen Coding:css,html缩写

zen coding 是一个俄罗斯人写的编辑器(支持大部分现下流行的编辑器)插件，其安装也是非常简单，只要安装插件，然后在项目中拷贝js文件就可以。像Webstorm6.0.2中已经包含这样的插件。什么是html缩写，我们先来在webstorm上敲下面的代码：

div.content

然后按Tab键，就会出现我们面熟的代码：

<div class="content"></div>

也就是说，div.content，这种写法实际上是用写程序的方法来写标记语言，再如当我们敲下面的代码的时候：

div.cotent>h1+p

Tab之后，会出现：

 

<div class="content">
<h1></h1>
<p></p>
</div>

这样的写法,很容易就能写出整个网站的框架,开发效率大大提高,不用每次敲那些繁杂的<>{}之类的。

其实也就是假设我们用E作为元素名称：

E
元素名称(div, p);
E#id
使用id的元素(div#content, p#intro, span#error);
E.class
使用类的元素(div.header, p.error.critial). 你也可以联合使用class和idID: div#content.column.width;
E>N
子代元素(div>p, div#footer>p>span);
E+N
兄弟元素(h1+p, div#header+div#content+div#footer);
E*N
元素倍增(ul#nav>li*5>a);
E$*N
条目编号 (ul#nav>li.item-$*5);

只要理解框架，用

div.class1#id1>h1>li*5+p

写出一些我们常用的如下代码:

<div class="class1" id="id1">
    <h1>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <p></p>
    </h1>
</div>