AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

超级牛B编码王（二）：Sublime2之Zencoding快速上手

2012-04-22 1070
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：          1、前言     刚看完球，辽足0-0平北京国安，稳稳妥妥各拿1分，皆大欢喜。恒大4-0狂胜长春亚泰。期待恒大51主场之战，死磕全北现代。最近两天一直在研究BootStrap这个东东，做了几个例子，感觉挺好的，五岳之巅也向大家推荐。
    
    1、前言
    刚看完球，辽足0-0平北京国安，稳稳妥妥各拿1分，皆大欢喜。恒大4-0狂胜长春亚泰。期待恒大51主场之战，死磕全北现代。最近两天一直在研究BootStrap这个东东，做了几个例子，感觉挺好的，五岳之巅也向大家推荐。
    但是心头上最激动的除了足球就是Zencoding，于是本文欲罢不能，终于产出。

    2、简介
    我不是一个爱卖弄关子的人，喜欢直奔主题。所以先介绍What is the Zencoding？一个俄国小伙子Sergey Chikuyonok，主导编写了Zencoding项目，主要是仿CSS选择器语法来快速码HTML代码。能有多快？马上告诉你。

    想快速知道它的作用么，来吧，给你一个大开眼界的机会。
    首先看看这个zencoding代码：

点击(此处)折叠或打开

  1. 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。
img_7924f6472b13f343346a3146db9aba71.jpg



    为什么要这么做，看了搜索结果你就知道了：

img_a67eb0b362757560599bfb79fe1cd01f.jpg

    搜索结果告诉我们，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结构，看图吧:
img_2a917ad79e406baec3ca4116c78b6ebf.png

    写完Enter Koan后面的代码后，上面就出现了HTML结构。这个例子可以看出一般的zencoding格式是“HTML标签#xxx”或者 “HTML标签.yyy”，而#xxx表示id为xxx，.yyy说明class为yyy。最后“+”表示标签的并列。

    小练习1：
    请大家完成以下HTML的zencoding代码，时间要求30秒以内：

点击(此处)折叠或打开

  1. <div id="header"></div>
  2. <div class="content"></div>
  3. <div class="sidebar"></div>
  4. <div id="footer"></div>
      做不完本练习，不能往下学，打牢基础最重要。

    小练习2：
    请大家完成以下HTML的zencoding代码，时间要求35秒以内：

点击(此处)折叠或打开

  1. <div id="header"></div>
  2. <div id="content" class="aticle posts"></div>
  3. <div id="sidebar" class="ad"></div>
  4. <div id="footer"></div>
      做不完本练习，更不能往下学，因为你根本就没明白怎样用一行zencoding写出来。
    如果你5分钟后还是做不出来，教程最后一部分有练习题答案，悲催的您去看看吧。后续内容你会更不适应。但那些一下子能明白过来的人或是直接做对的同志，嗯，悟性很好，趁热打铁，再接再厉！

    (4)“>”指子内容
    很容易理解，比如写下“div>p>span>a”这个Koan，那么就有这个HTML结构：

点击(此处)折叠或打开

  1. <div>
  2.     <p><span><a href=""></a></span></p>
  3. </div>
    其中，a标签里的属性href是zencoding智能加入的。总之“>”产生了标签的层级，而且zencoding会自动缩进哦。来接着练习吧。
    
    小练习3：
    按照HTML代码，回推Koan。

点击(此处)折叠或打开

  1. <html>
  2.     <head></head>
  3.     <body>
  4.         <div class="header"></div>
  5.         <div class="content"></div>
  6.         <div class="footer"></div>
  7.     </body>
  8. </html>

    小练习4：
    刚才练习3做的很爽吧，在这里又给你放了一个练习，试试手气吧。Try it hard!

点击(此处)折叠或打开

  1. <html>
  2.     <head>
  3.         <title></title>
  4.         <style type="text/css"></style>
  5.         <script type="text/javascript"></script>
  6.     </head>
  7.     <body>
  8.         <div class="content">
  9.             <div class="nav"></div>
  10.             <div class="sidebar"></div>
  11.             <div class="main"></div>
  12.         </div>
  13.         <div class="footer"></div>
  14.     </body>
  15. </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)“[]”表属性
    如何完成

的属性写法呢，就是用“[]”，即如下Koan：h1[title=someting]。
    好了又到了练习时间。

     小练习5：
    按照HTML代码，回推Koan。

点击(此处)折叠或打开

  1. <div id="content">
  2.     <div class="aticle">
  3.         <h1 class="ok" title="papername" sytle="color:#000;"></h1>
  4.         <h3 title="subname" sytle="color:#fff;" class="no"></h3>
  5.         <p class="words"></p>
  6.     </div>
  7. </div>
    这个练习，我感觉出的很好，即使你做出来了，也要认真地看我给出的答案，因为其中有玄妙啊！

     (6)#和.的简写
    Koan中：div.ok等同于.ok，div#no等同于#no，所以直接写.或#时，默认为Div标签是也。

     小练习6：
    用简写法改写练习5。

     (7)“*”表标签克隆
    如果在Koan中写入一下内容：ul>li*5，就会产生以下HTML结构：
img_a9b3d0873cf7b8027bcbc416e20784bc.png

    那么，如果每个li元素中还存在与呢，没事照下图办：
img_77a5a8b2f561ed6aa36f169362719ca9.png


    OK，想必大家想明白了*号的用法，继续练习。
    
     小练习7：
    按照HTML代码，回推Koan。

点击(此处)折叠或打开

  1. <div class="header">
  2.     <ul class="nav">
  3.         <li><a href="" sytle="block"><span>五岳之巅</span></a></li>
  4.         <li><a href="" sytle="block"><span>五岳之巅</span></a></li>
  5.         <li><a href="" sytle="block"><span>五岳之巅</span></a></li>
  6.         <li><a href="" sytle="block"><span>五岳之巅</span></a></li>
  7.         <li><a href="" sytle="block"><span>五岳之巅</span></a></li>
  8.         <li><a href="" sytle="block"><span>五岳之巅</span></a></li>
  9.     </ul>
  10. </div>

    没错，什么都做出来了，就是里面的“五岳之巅”弄不出来吧，这是我给你下的套，为下一节埋一个伏笔。其实我这人挺好的，总这么折腾还不是想让大家自己发现问题，自己开始思考嘛。

     (8)“{}”表标签内容
    你在Koan中写：div>span>h1{这是标题}，自己看看会出现什么吧。
    此节无练习，只因太简单。

     (9)“$”表连续数
    其实好理解，不说废话，看图吧：
img_d38806e4dda5dea13c2a84450bee2e89.png

    所以不论在属性如li.li-$或是id或是{}中的内容，$就代表从1开始的序列，就和Excel表一格写一个1，下拉改格拖出2,3,4,5,6的意思一样。
    手痒痒了吧，该练个习了。

     小练习8：
    按照HTML代码，回推Koan。难度只在“01、02...”的表示上。

点击(此处)折叠或打开

  1. <table>
  2.     <thead>
  3.         <td class="col1"></td>
  4.         <td class="col2"></td>
  5.         <td class="col3"></td>
  6.         <td class="col4"></td>
  7.     </thead>
  8.     <tbody>
  9.         <tr class="row01">
  10.             <td class="col1"></td>
  11.             <td class="col2"></td>
  12.             <td class="col3"></td>
  13.             <td class="col4"></td>
  14.         </tr>
  15.         <tr class="row02">
  16.             <td class="col1"></td>
  17.             <td class="col2"></td>
  18.             <td class="col3"></td>
  19.             <td class="col4"></td>
  20.         </tr>
  21.         <tr class="row03">
  22.             <td class="col1"></td>
  23.             <td class="col2"></td>
  24.             <td class="col3"></td>
  25.             <td class="col4"></td>
  26.         </tr>
  27.     </tbody>
  28.     <tfoot>
  29.         <td></td>
  30.         <td></td>
  31.         <td></td>
  32.         <td></td>
  33.     </tfoot>
  34. </table>

      好了，至此，讲完了Zencoding的主要而且最常用的内容。时间刚好到凌晨12点整，这篇BLOG花费了我近3个小时的时间。呵呵，不容易啊。

    最后一个综合性的练习，做一下吧，请大家一句Koan搞定它，千万别偷看文章最开始答案啊，我想你应该可以自己完成了吧：


*******************这就是文章开头的那句Koan生成的代码*********************************

点击(此处)折叠或打开

  1. <html>
  2.     <head>
  3.         <title></title>
  4.         <style type="text/css"></style>
  5.         <script type="text/javascript" src="abc1.js"></script>
  6.         <script type="text/javascript" src="abc2.js"></script>
  7.         <script type="text/javascript" src="abc3.js"></script>
  8.     </head>
  9.     <body>
  10.         <div class="content">
  11.             <div class="nav">
  12.                 <ul>
  13.                     <li><a href=""><span></span></a></li>
  14.                     <li><a href=""><span></span></a></li>
  15.                     <li><a href=""><span></span></a></li>
  16.                     <li><a href=""><span></span></a></li>
  17.                     <li><a href=""><span></span></a></li>
  18.                 </ul>
  19.             </div>
  20.         </div>
  21.         <div class="sidebar">
  22.             <div class="top"></div>
  23.             <div class="middle"></div>
  24.             <div class="bottom"></div>
  25.         </div>
  26.         <div class="main">
  27.             <div class="acticle">
  28.                 <h1>文章标题1</h1>
  29.                 <p></p>
  30.             </div>
  31.             <div class="acticle">
  32.                 <h1>文章标题2</h1>
  33.                 <p></p>
  34.             </div>
  35.             <div class="acticle">
  36.                 <h1>文章标题3</h1>
  37.                 <p></p>
  38.             </div>
  39.         </div>
  40.         <div class="footer">版权信息</div>
  41.     </body>
  42. </html>

    
    其实，这篇并不是最后一篇，最后一篇要写filter规则，今天太晚了，明早还有一上午课，最近一两天抽空再写吧。

    晚安，大家。晚安，自己。





    答案：

    练习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



    五岳之巅，辛苦原创，欢迎转载，转载请必须注明出处与原创作者，谢谢！



文章标签：
JavaScript
Web App开发
前端开发
关键词：
编码王Sublime zencoding
编码王Sublime
五岳之巅
目录
相关文章
五岳之巅
|
搜索推荐
超级牛B编码王（四）：关于Sublime的Ctrl+`弹不出Console的说明
    很多Sublime新人都遇到了这个问题，到网上搜，信息很片面，而且不少都是旧版本的。于是有了这篇文章。     默认Sublime使用Ctrl+`作为快捷键弹出Console，但不同的系统抑或安装过不同的软件后，会引起热键冲突。
五岳之巅
867 0
五岳之巅
超级牛B编码王（三）：Sublime2之XP下手动安装Zencoding
    今天在机房XP下安装Sublime2，没有问题。随后安装 Package Install也没有问题。谁知，用Package Install安装Zencoding却始终无法装上。
五岳之巅
906 0
五岳之巅
超级牛B编码王（一）：Sublime2之WIN7下安装Zencoding
      1、缘由    用过很多代码编辑器，还有N多IDE，最后回归到一个纯净的Codelobster上，自己开发也用，上课教学也用。免费软件，做的也不错，更新很快。网上一搜就能下。
五岳之巅
896 0
Huazie
|
8月前
|
前端开发 JavaScript Linux
Sublime Text 3配置Go语言开发环境
【4月更文挑战第13天】本篇文章 Huazie 向大家介绍使用 Sublime Text 3搭建Go语言开发环境，并演示编译运行 Go语言代码
Huazie
856 8
Sublime Text 3配置Go语言开发环境
1897697198172439
|
7月前
lua环境，sublime text 插件安装
lua环境，sublime text 插件安装
1897697198172439
67 0
VipSoft
|
5月前
|
Python
Sublime Text Python 代码提示插件 Anaconda
Sublime Text Python 代码提示插件 Anaconda
VipSoft
102 1
VipSoft
|
5月前
|
JSON 数据格式
Sublime Text 查找的内容 高亮显示
Sublime Text 查找的内容 高亮显示
VipSoft
614 0
Sublime Text 查找的内容 高亮显示
VipSoft
|
5月前
Sublime Text 16进制显示
Sublime Text 16进制显示
VipSoft
208 0
VipSoft
|
5月前
Sublime Text 汉化 中文
Sublime Text 汉化 中文
VipSoft
73 0
Huazie
|
8月前
|
前端开发 Unix Linux
Sublime Text 3配置 Python 开发环境
【5月更文挑战第7天】本篇 Huazie 介绍了 Sublime Text 3 配置 Python 开发环境的相关内容，感兴趣的朋友赶紧配置起来，有任何问题可以随时评论区沟通。
Huazie
182 1
Sublime Text 3配置 Python 开发环境