zen coding 插件使用实践

前一阵子接触了sublime text 和 zen coding 插件，感觉这两个东西对前端效率的提高太有用了。

非常符合我对效率的要求～

看着网上的各种教程和说明自己也实践了一把。记录一下心得体会：

介绍 和安装方法：http://www.qianduan.net/zen-coding-a-new-way-to-write-html-code.html

gitHub: https://code.google.com/p/zen-coding/downloads/list

zen coding 适用技巧：http://www.gbin1.com/technology/html/20130117-tips-for-emmet/

我用的DW CS6 安装 zen coding 插件之后

第一行代码：

div#header>ul.nav>li*4 

 输入之后 ctrl+,  注意了：如果不能成功展开如下代码，基本上可以断定是输入法快捷键冲突，为此卸掉了搜狗输入法换了谷歌就OK了

<div id="header">

	<ul class="nav">

		<li></li>

		<li></li>

		<li></li>

		<li></li>

	</ul>

</div>

第二行代码：尝试给 ul 增加 同级元素 h1

div#header>h1+ul.nav>li*4

ctrl+, 展开得到：

<div id="header">

	<h1></h1>

	<ul class="nav">

		<li></li>

		<li></li>

		<li></li>

		<li></li>

	</ul>

</div>

　第三行代码： 给li 增加自增的类名 item-1  item-2 ....

　div#header>h1+ul.nav>li.item-$*4

　ctrl+, 展开得到：

<div id="header">

	<h1></h1>

	<ul class="nav">

		<li class="item-1"></li>

		<li class="item-2"></li>

		<li class="item-3"></li>

		<li class="item-4"></li>

	</ul>

</div>

第四行代码 给 H1 中增加 img 并 同时 规定 img 的 src  title alt 等属性

div#header>(h1>a[href=#nogo]>img[src=logo.jpg][title=sitelogo][alt=logo])+(ul.nav>li.item-${nav item$$}*4)　

　

ctrl+, 展开得到：　这里面初次使用了 () 分组 非常简单易懂 好用 . 同时用 [] 给元素标志属性 并且赋值（注意：属性取值中间不要有空格 否则会生成新的属性）

<div id="header">

	<h1><a href="#nogo"><img src="logo.jpg" alt="logo" title="sitelogo"></a></h1>

	<ul class="nav">

		<li class="item-1">nav item01</li>

		<li class="item-2">nav item02</li>

		<li class="item-3">nav item03</li>

		<li class="item-4">nav item04</li>

	</ul>

</div>　

　　

第五行代码：给元素添加初始内容 顺便补充上最常用的空连接

div#header>(h1>a[href=#nogo]>img[src=logo.jpg][title=site logo][alt=logo])+(ul.nav>li.item-${nav item$$}*4)　　

ctrl+, 展开得到： 这里 使用 {} 输出元素内部内容，$仍然表示自增通配，$$两个表示是两位  从 01 开始自增

<div id="header">

	<h1><a href="#nogo"><img src="logo.jpg" alt="logo" title="site" logo=""></a></h1>

	<ul class="nav">

		<li class="item-1">nav item01</li>

		<li class="item-2">nav item02</li>

		<li class="item-3">nav item03</li>

		<li class="item-4">nav item04</li>

	</ul>

</div>

第六行代码：　初次使用转码符 e　
script[type=text/javascript][deffer=true][scr=/script/jQuery.js]|e
对非 XML 安全的字符进行转码，如： <、 > 和 &。

(更多转码过滤见 http://www.cnblogs.com/matchless/archive/2013/04/15/3018573.html)

ctrl+, 展开得到：

<script type="text/javascript" deffer="true" scr="/script/jQuery.js"></script>

第七行代码： 使用 注释 转码 |c  方便的生成注释

div.desp>dl>(dt>img[src=img.jpg][alt=picture])+(dd>p{Introduction$}*3)|c

ctrl+, 展开得到：

<!-- .desp -->

<div class="desp">

	<dl>

		<dt><img src="img.jpg" alt="picture"></dt>

		<dd>

			<p>Introduction1</p>

			<p>Introduction2</p>

			<p>Introduction3</p>

		</dd>

	</dl>

</div>

<!-- /.desp -->

是不是既简单又强大？只用二十分钟 就可以更高效率的编写HTML 结构代码了。