关于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作为元素名称：

元素名称(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>

秒客网