快速编写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
  • <textarea>
  • CodeMirror2/3
  • Brackets
OK,安装好了之后我们就来 看看这个插件的特征(我用的是sublime text2)

初始的时候emmet会帮助你用一秒的时间完成<html>、<head>、<body>等标签的输入~~嘿,把你张开的嘴巴合上,不要这么惊讶~~我们在Sublime里面新造个html,之后输入html:5,按Tab键,你会发现:快速编写HTML/CSS代码——emmet (zencoding)~_第1张图片
神奇吧~~另外还有
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>元素,你可以简单的写位li*5或者li*N,如果你想写5个<li>元素并且每个里面都有一个<a>标签,你就可以简单的写为li*4>a 。我们来看个例子:
div#one>img.two+ul#nav>li*5>a
之后
<div id="one">
	<img src="" alt="" class="two">
	<ul id="nav">
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
	</ul>
</div>
看明白了~ 其实还比较好理解~ 你现在可以尝试自己多写几个看看~~下面讲下列表中的最后一条,条目编号~如果你想生成id为con1,con2、con3、con4等等以及class为text111、text222、text333、text555等等的N个div元素,那么,我们可以这样:
 div#con$.class$$$*5
之后我们可以看到这样:

<div id="con1" class="class001"></div>
<div id="con2" class="class002"></div>
<div id="con3" class="class003"></div>
<div id="con4" class="class004"></div>
<div id="con5" class="class005"></div>

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

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

<div class="head">
	<h1></h1>
</div>
<div class="nav">
	<h2></h2>
</div>
还比如在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就写到这里啦~~

你可能感兴趣的:(emmet,HTML/CSS,ZenCoding,快速编写)