点击(此处)折叠或打开
html>head>(title+style+script[src=abc$.js]*3)+body>((.content>.nav>ul>li*5>a>span)+(.sidebar>.top+.middle+.bottom)+.main>.acticle*3>h1{文章标题$}+p)+.footer{版权信息} 哦，你会说，这行代码如何呢？请翻滚此文一直到末尾，有一个综合性的练习，练习题目就是用这行代码生成的html文件。 没错，你没看错，那么多的一大篇html代码就是由以上这句话产生的。 好奇了吧，想学了吧。看下文吧。 3、环境配置 在上一篇博客《超级牛B编码王（一）：Sublime2之WIN7下安装Zencoding 》中详细介绍了Sublime2下Zencoding的安装，当然Zencoding就是一个插件，也有其他比如Notepad、DW等编辑器的版本，大家到“ http://zencoding.org/”这里就能全部网罗。关于环境搭建，不多说，第一篇写的很详细了。 4、注意事项 ZC项目更新速度较快，大家现在能在百度里搜到的教程，都不太全，未能完全展示Zencoding之力。所以本文将较为完备地由浅入深讲解它。但随着时间的流逝，半年或一年后，本文也将因项目发展而变得不全，不过基本要点是没有变的。 5、QuickStart (1)如下图所示，到github里搜索zencoding。 为什么要这么做，看了搜索结果你就知道了： 搜索结果告诉我们，zencoding有多种语言扩展和IDE扩展，所以不仅能写HTML和CSS也能写Ruby和PHP等，具体内容请详见图片上的“more >>”。 (2)在上图中点击第一项“sergeche/zen-coding”进入项目页。然后向下翻啊翻，可以看到如下一个小节，就是使用说明： Current features of abbreviation engine: A.ID and CLASS attributes: div#page.section.main. B.Custom attributes: div[title], a[title="Hello world" rel], td[colspan=2]. C.Element multiplication: li*5 will output tag five times. D.Item numbering with $ character: li.item$*3 will output tag three times, replacing $ character with item number. E.Multiple ‘$’ characters in a row are used as zero padding, i.e.: li.item$$$ → li.item001 F.Abbreviation groups with unlimited nesting: div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer. You can literally write a full document markup with just a single line. G.Filters support H.div tag name can be omitted when writing element starting from ID or CLASS: #content>.section is the same as div#content>div.section. 为了容易分辨，我加了隔行变色。 ———————————————————————————————————— *** 不要着急，现在就开始详细讲解了 *** ———————————————————————————————————— (3)“#”表id，“.”表类，“+”表并列 使用sublime建立一个foo.html保存到桌面，然后Win7下快捷键Ctrl+Alt+Enter调出zencoding的心印(koan)，koan一词源于佛语，等你学完全文才能明白它的含义。 写入如下代码，就可以产生一组HTML结构，看图吧: 写完Enter Koan后面的代码后，上面就出现了HTML结构。这个例子可以看出一般的zencoding格式是“HTML标签#xxx”或者 “HTML标签.yyy”，而#xxx表示id为xxx，.yyy说明class为yyy。最后“+”表示标签的并列。 小练习1： 请大家完成以下HTML的zencoding代码，时间要求30秒以内：点击(此处)折叠或打开
<div id="header"></div> <div class="content"></div> <div class="sidebar"></div> <div id="footer"></div> 做不完本练习，不能往下学，打牢基础最重要。 小练习2： 请大家完成以下HTML的zencoding代码，时间要求35秒以内：点击(此处)折叠或打开
<div id="header"></div> <div id="content" class="aticle posts"></div> <div id="sidebar" class="ad"></div> <div id="footer"></div> 做不完本练习，更不能往下学，因为你根本就没明白怎样用一行zencoding写出来。 如果你5分钟后还是做不出来，教程最后一部分有练习题答案，悲催的您去看看吧。后续内容你会更不适应。但那些一下子能明白过来的人或是直接做对的同志，嗯，悟性很好，趁热打铁，再接再厉！ (4)“>”指子内容 很容易理解，比如写下“div>p>span>a”这个Koan，那么就有这个HTML结构：点击(此处)折叠或打开
<div> <p><span><a href=""></a></span></p> </div> 其中，a标签里的属性href是zencoding智能加入的。总之“>”产生了标签的层级，而且zencoding会自动缩进哦。来接着练习吧。 小练习3： 按照HTML代码，回推Koan。点击(此处)折叠或打开
<html> <head></head> <body> <div class="header"></div> <div class="content"></div> <div class="footer"></div> </body> </html> 小练习4： 刚才练习3做的很爽吧，在这里又给你放了一个练习，试试手气吧。Try it hard!点击(此处)折叠或打开
<html> <head> <title></title> <style type="text/css"></style> <script type="text/javascript"></script> </head> <body> <div class="content"> <div class="nav"></div> <div class="sidebar"></div> <div class="main"></div> </div> <div class="footer"></div> </body> </html> 没错，也是一句Koan就OK的事！ 如果你错了，恭喜你，你为下一步打下了重要的基础。你做对了，不是蒙的就是蒙的。 (5)“()”指同级范围 理论叙述是枯燥的，看例子是愉快的。刚才的小练习4，答案是 html>(head>title+style+script)+body>+(div.content>div.nav+div.sidebar+div.main)+div.footer 呵呵，对照HTML代码，你自己该想明白“()”是干什么的了吧。这也就是没有()的情况下head中的style会出现在别处。 这节没有练习，和大家玩了一个朝三暮四。 (6)“[]”表属性 如何完成<h1 title="something"></h1>的属性写法呢，就是用“[]”，即如下Koan：h1[title=someting]。 好了又到了练习时间。 小练习5： 按照HTML代码，回推Koan。点击(此处)折叠或打开
<div id="content"> <div class="aticle"> <h1 class="ok" title="papername" sytle="color:#000;"></h1> <h3 title="subname" sytle="color:#fff;" class="no"></h3> <p class="words"></p> </div> </div> 这个练习，我感觉出的很好，即使你做出来了，也要认真地看我给出的答案，因为其中有玄妙啊！ (6)#和.的简写 Koan中：div.ok等同于.ok，div#no等同于#no，所以直接写.或#时，默认为Div标签是也。 小练习6： 用简写法改写练习5。 (7)“*”表标签克隆 如果在Koan中写入一下内容：ul>li*5，就会产生以下HTML结构： 那么，如果每个li元素中还存在<a>与<span>呢，没事照下图办： OK，想必大家想明白了*号的用法，继续练习。 小练习7： 按照HTML代码，回推Koan。点击(此处)折叠或打开
<div class="header"> <ul class="nav"> <li><a href="" sytle="block"><span>五岳之巅</span></a></li> <li><a href="" sytle="block"><span>五岳之巅</span></a></li> <li><a href="" sytle="block"><span>五岳之巅</span></a></li> <li><a href="" sytle="block"><span>五岳之巅</span></a></li> <li><a href="" sytle="block"><span>五岳之巅</span></a></li> <li><a href="" sytle="block"><span>五岳之巅</span></a></li> </ul> </div> 没错，什么都做出来了，就是里面的“五岳之巅”弄不出来吧，这是我给你下的套，为下一节埋一个伏笔。其实我这人挺好的，总这么折腾还不是想让大家自己发现问题，自己开始思考嘛。 (8)“{}”表标签内容 你在Koan中写：div>span>h1{这是标题}，自己看看会出现什么吧。 此节无练习，只因太简单。 (9)“$”表连续数 其实好理解，不说废话，看图吧： 所以不论在属性如li.li-$或是id或是{}中的内容，$就代表从1开始的序列，就和Excel表一格写一个1，下拉改格拖出2,3,4,5,6的意思一样。 手痒痒了吧，该练个习了。 小练习8： 按照HTML代码，回推Koan。难度只在“01、02...”的表示上。点击(此处)折叠或打开
<table> <thead> <td class="col1"></td> <td class="col2"></td> <td class="col3"></td> <td class="col4"></td> </thead> <tbody> <tr class="row01"> <td class="col1"></td> <td class="col2"></td> <td class="col3"></td> <td class="col4"></td> </tr> <tr class="row02"> <td class="col1"></td> <td class="col2"></td> <td class="col3"></td> <td class="col4"></td> </tr> <tr class="row03"> <td class="col1"></td> <td class="col2"></td> <td class="col3"></td> <td class="col4"></td> </tr> </tbody> <tfoot> <td></td> <td></td> <td></td> <td></td> </tfoot> </table> 好了，至此，讲完了Zencoding的主要而且最常用的内容。 最后一个综合性的练习，做一下吧，请大家一句Koan搞定它，千万别偷看文章最开始答案啊，我想你应该可以自己完成了吧： *******************这就是文章开头的那句Koan生成的代码*********************************点击(此处)折叠或打开
<html> <head> <title></title> <style type="text/css"></style> <script type="text/javascript" src="abc1.js"></script> <script type="text/javascript" src="abc2.js"></script> <script type="text/javascript" src="abc3.js"></script> </head> <body> <div class="content"> <div class="nav"> <ul> <li><a href=""><span></span></a></li> <li><a href=""><span></span></a></li> <li><a href=""><span></span></a></li> <li><a href=""><span></span></a></li> <li><a href=""><span></span></a></li> </ul> </div> </div> <div class="sidebar"> <div class="top"></div> <div class="middle"></div> <div class="bottom"></div> </div> <div class="main"> <div class="acticle"> <h1>文章标题1</h1> <p></p> </div> <div class="acticle"> <h1>文章标题2</h1> <p></p> </div> <div class="acticle"> <h1>文章标题3</h1> <p></p> </div> </div> <div class="footer">版权信息</div> </body> </html> 答案： 练习1：div#header+div.content+div.sidebar+div#footer 练习2：div#header+div#content.aticle.posts+div#sidebar.ad+div#footer 练习3：html>head+body>div.header+div.content+div.footer 练习4：html>(head>title+style+script)+body>(div.content>div.nav+div.sidebar+div.main)+div.footer 练习5：div#content>div.aticle>h1.ok[title=papername sytle=color:#000;]+h3[title=subname][sytle=color:#fff;].no+p.words （注意：1、id或class与属性的先后位置，是否无关？；2、并列属性的写法，是否很灵活？3、为什么这个例子不用()，而上一个例子必须用呢？） 练习6：#content>.aticle>h1.ok[title=papername sytle=color:#000;]+h3[title=subname][sytle=color:#fff;].no+p.words 练习7：div.header>ul.nav>li*6>a[sytle=block]>span{五岳之巅} 练习8：table>(thead>td.col$*4)+(tbody>tr.row$$*3>td.col$*4)+tfoot>td*4