您的位置:首页 > 其它

超级牛B编码王(二):Sublime2之Zencoding快速上手

2015-12-26 00:01 393 查看
1、前言
刚看完球,辽足0-0平北京国安,稳稳妥妥各拿1分,皆大欢喜。恒大4-0狂胜长春亚泰。期待恒大51主场之战,死磕全北现代。最近两天一直在研究BootStrap这个东东,做了几个例子,感觉挺好的,五岳之巅也向大家推荐。
但是心头上最激动的除了足球就是Zencoding,于是本文欲罢不能,终于产出。

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

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

点击(此处)折叠或打开

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)“[]”表属性
如何完成

的属性写法呢,就是用“[]”,即如下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元素中还存在与呢,没事照下图办:




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的主要而且最常用的内容。时间刚好到凌晨12点整,这篇BLOG花费了我近3个小时的时间。呵呵,不容易啊。

最后一个综合性的练习,做一下吧,请大家一句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>

其实,这篇并不是最后一篇,最后一篇要写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

五岳之巅,辛苦原创,欢迎转载,转载请必须注明出处与原创作者,谢谢!
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: