什么是Zendcoding呢?
它是一个俄国小伙子Sergey Chikuyonok主导编写的Zencoding项目,主要是仿CSS选择器语法来快速码HTML代码。能有多快?
看下面这张图片:
注意图中的Enter Koan部分,就那么几个字符就输出了那么多html代码,怎么样?好玩吧?下面我们就看如何安装。
首先我们需要安装一个插件的安装平台。
A:按快捷键Ctrl+`(注意这个字符,就是数字1左边的那个)弹出console;
B:粘贴以下代码,回车。便安装了一款名为“Package Control”的插件,可以认为这是这个插件是别的插件的安装平台,装别的插件可以通过它来安装;
1 |
import urllib2,os;pf= 'Package Control.sublime-package' ;ipp=sublime.installed_packages_path();os.makedirs(ipp) if not os.path.exists(ipp) else None; open (os.path. join (ipp,pf), 'wb' ).write(urllib2.urlopen( 'http://sublime.wbond.net/' +pf.replace( ' ' , '%20' )). read ()) |
装好,重启Sublime。
平台装好了,就该用它来装插件了。
C:使用快捷键Ctrl+Shift+p,弹出命令行选择器,然后输入install,调出Package Control,在最底下找到Zencoding,点选就安装,装好,重启。
D:随便建个index.html用Sublime打开。
E:关键的地方到了:在windows下,打开Zencoding的快捷键是Ctrl+Alt+Enter!
如下图:
下面我们就来了解下它就如何使用的。
(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.
详细解释:
1)“#”表id,“.”表类,“+”表并列
写完Enter Koan后面的代码后,上面就出现了HTML结构。这个例子可以看出一般的zencoding格式是“HTML标签#xxx”或者“HTML标签.yyy”,而#xxx表示id为xxx,.yyy说明class为yyy。最后“+”表示标签的并列。
小练习1:
1 |
< div id = "header" ></ div > |
2 |
< div class = "content" ></ div > |
3 |
< div class = "sidebar" ></ div > |
4 |
< div id = "footer" ></ div > |
小练习2:
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 > |
2)“>”指子内容
很容易理解,比如写下“div>p>span>a”这个Koan,那么就有这个HTML结构:
2 |
< p >< span >< a href = "" ></ a ></ span ></ p > |
其中,a标签里的属性href是zencoding智能加入的。总之“>”产生了标签的层级,而且zencoding会自动缩进哦。来接着练习吧。
小练习3:
4 |
< div class = "header" ></ div > |
5 |
< div class = "content" ></ div > |
6 |
< div class = "footer" ></ div > |
小练习4:
04 |
< style type = "text/css" ></ style > |
05 |
< script type = "text/javascript" ></ script > |
09 |
< div class = "nav" ></ div > |
10 |
< div class = "sidebar" ></ div > |
11 |
< div class = "main" ></ div > |
13 |
< div class = "footer" ></ div > |
3)“()”指同级范围
参考小练习4的答案相信你会明白的。
4)“[]”表属性
如何完成<h1 title="something"></h1>的属性写法呢,就是用“[]”,即如下Koan:h1[title=someting]。
小练习5:
3 |
< h1 class = "ok" title = "papername" sytle = "color:#000;" ></ h1 > |
4 |
< h3 title = "subname" sytle = "color:#fff;" class = "no" ></ h3 > |
5)#和.的简写
Koan中:div.ok等同于.ok,div#no等同于#no,所以直接写.或#时,默认为Div标签是也。
小练习6:
用简写法改写练习5。
6)“*”表标签克隆
如果在Koan中写入一下内容:ul>li*5,就会产生以下HTML结构:
那么,如果每个li元素中还存在<a>与<span>呢?
OK,想必大家想明白了*号的用法,继续练习。
7)“{}”表标签内容
你在Koan中写:div>span>h1{这是标题},自己看看会出现什么吧。
8)“$”表连续数
所以不论在属性如li.li-$或是id或是{}中的内容,$就代表从1开始的序列,就和Excel表一格写一个1,下拉改格拖出2,3,4,5,6的意思一样。
小练习7:
03 |
< li >< a href = "" sytle = "block" >< span >雪洁之家</ span ></ a ></ li > |
04 |
< li >< a href = "" sytle = "block" >< span >雪洁之家</ span ></ a ></ li > |
05 |
< li >< a href = "" sytle = "block" >< span >雪洁之家</ span ></ a ></ li > |
06 |
< li >< a href = "" sytle = "block" >< span >雪洁之家</ span ></ a ></ li > |
07 |
< li >< a href = "" sytle = "block" >< span >雪洁之家</ span ></ a ></ li > |
08 |
< li >< a href = "" sytle = "block" >< span >雪洁之家</ span ></ a ></ li > |
小练习8:
03 |
< td class = "col1" ></ td > |
04 |
< td class = "col2" ></ td > |
05 |
< td class = "col3" ></ td > |
06 |
< td class = "col4" ></ td > |
10 |
< td class = "col1" ></ td > |
11 |
< td class = "col2" ></ td > |
12 |
< td class = "col3" ></ td > |
13 |
< td class = "col4" ></ td > |
16 |
< td class = "col1" ></ td > |
17 |
< td class = "col2" ></ td > |
18 |
< td class = "col3" ></ td > |
19 |
< td class = "col4" ></ td > |
22 |
< td class = "col1" ></ td > |
23 |
< td class = "col2" ></ td > |
24 |
< td class = "col3" ></ td > |
25 |
< td class = "col4" ></ td > |
练习题答案:
练习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