emmet快速编写html,快速编写HTML/CSS代码——emmet (zencoding)~

Emmet，这家伙之前叫zencoding，它可以快速编写HTML/CSS，是由Sergey Chikuyonok开发。为web开发人员节省了很多时间~提高了编写速度~ emmet的网址：http://docs.emmet.io/

那在我们开始讲emmet之前，你要保证你的编辑器里有这么个神器的插件存在，如果没有就先安装一个吧~~emmet支持的编辑器如下：

Sublime Text 2

TextMate 1.x

Eclipse/Aptana

Coda 1.6 and 2.x

Espresso

Chocolat

Komodo Edit/IDE

Notepad++

PSPad

CodeMirror2/3

Brackets

OK，安装好了之后我们就来

看看这个插件的特征(我用的是sublime text2)

初始的时候emmet会帮助你用一秒的时间完成、

、等标签的输入~~嘿，把你张开的嘴巴合上，不要这么惊讶~~我们在Sublime里面新造个html，之后输入html:5,按Tab键，你会发现:

神奇吧~~另外还有html:5是HTML5文档类型，html:xt是XHTML过渡文档类型，html:4s是HTML4严格文档类型。下面给你们看一个支持的属性和操作符的列表(申明啊，这个列表不是我归纳总结的，是我百度来的~~)：

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);

正如上面你们所看到的，

如果你想生成5个或者N个

元素，你可以简单的写位li*5或者li*N，如果你想写5个元素并且每个里面都有一个 标签，你就可以简单的写为li*4>a

。我们来看个例子:

div#one>img.two+ul#nav>li*5>a

之后

看明白了~ 其实还比较好理解~ 你现在可以尝试自己多写几个看看~~下面讲下列表中的最后一条，条目编号~如果你想生成id为con1,con2、con3、con4等等以及class为text111、text222、text333、text555等等的N个div元素，那么，我们可以这样：

div#con$.class$$$*5

之后我们可以看到这样：

所以呢，我们

只需要在想要出现的任何class或id属性上添加一个美元符号即可，而且想要多少都可以~

emmet还有很多的快速编写，比如说分组，我们输入(.head>h1)+(.nav>h2)按Tab会看到：

还比如在css中定义元素的属性，我们在css中输入

h10p+m5e，按Tab会看到：

height: 10%;

margin: 5em;

比如一些附加属性，我们在css中输入@f+，按Tab会看到：

@font-face {

font-family: 'FontName';

src: url('FileName.eot');

src: url('FileName.eot?#iefix') format('embedded-opentype'),

url('FileName.woff') format('woff'),

url('FileName.ttf') format('truetype'),

url('FileName.svg#FontName') format('svg');

font-style: normal;

font-weight: normal;

}

比如实现渐变，我们在css中输入

lg(left, #fff 50%, #000)，按Tab会看到：

background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #fff), to(#000));

background-image: -webkit-linear-gradient(left, #fff 50%, #000);

background-image: -moz-linear-gradient(left, #fff 50%, #000);

background-image: -o-linear-gradient(left, #fff 50%, #000);

background-image: linear-gradient(left, #fff 50%, #000);

所以呢，emmet很方便~~还有一些其他的快速编写各位看客感兴趣可以去emmet的网址看看~那里面有demo~~关于emmet就写到这里啦~~