Zen Coding 简易教程（六分钟学 Zen Coding）

发表于 分类于

读了一遍 Zen Coding 相关内容，写个教程当作给自己的回顾。

使用的是 Sublime Text 2，安装了 Package Installer 插件与 Zen Coding 插件。Windows/MAC 下均使用 Ctrl+Alt+Enter 调出 Koan（即 Zen Coding 的专用输入框）输入需要的内容。有兴趣的还可以去查一下 Koan 的意思，挺有内涵。

先看下面这段代码：

1
html>body[FONT-SIZE=12px]>((table[border=1 cellSpacing=0 cellPadding=2]>tbody>(tr>td[rowspan=8]+(td>str)*3)+(tr>td*3)*7)+br)*2+table[border=1 cellSpacing=0 cellPadding=2]>tbody>tr>td*2

这段代码等于下面这段代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<html>
	<body FONT-SIZE="12px">
		<table border="1" cellSpacing="0" cellPadding="2">
			<tbody>
				<tr>
					<td rowspan="8"></td>
					<td><strong></strong></td>
					<td><strong></strong></td>
					<td><strong></strong></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
				</tr>
			</tbody>
		</table>
		<br>
		<table border="1" cellSpacing="0" cellPadding="2">
			<tbody>
				<tr>
					<td rowspan="8"></td>
					<td><strong></strong></td>
					<td><strong></strong></td>
					<td><strong></strong></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
				</tr>
			</tbody>
		</table>
		<br>
		<table border="1" cellSpacing="0" cellPadding="2">
			<tbody>
				<tr>
					<td></td>
					<td></td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

Let’s begin.

Lesson 1：

首先是一个网页文件的最基本结构： <html>、<head> 和 <body> 标签：

这节课我们学了：

  • 元素会自动扩充为对应的两个 html 标签
  • > 代表下级结构
    • 代表同级结构

Lesson 2：

我们继续扩充结构，在 <body> 下添加了两个 <div> 块，分别放进了一定数量的段落。

这节课我们学到了：

  • 复习 + > 的作用
  • 学习了括号的作用。

Lesson 3：

我们继续添加内容：

这节课我们学习到了：

  • # 设置该元素的 id，用于 css 表
  • . 设置该元素的 class，用于 css 表
  • * n 可以用来代替 n 个重复元素 +++ 的操作

Lesson 4：

我们重新来一遍，这次插入了表格，充分玩了一次花活，还加了点新东西：

这一课我们学到了：

  • 充分利用多层括号和乘法来快速生成大量代码
  • {} 代表往该元素内填充可见内容
  • $ 作为数字通配，一个 $ 代表一位数字

Lesson 5：

我们发现，表格的边框很不好看，我们需要加一些 Style：

这节课我们学到了：

  • [] 添加元素属性，可以加很多属性哦

Lesson 6：

重复代码太多了，我们应该用 css 精简代码，用页内 css 吧，然后我们还要把 html 再规范一下：

这节课我们学到了：

  • 对于部分元素（style），代码扩充会参照给定的特殊规则
  • : 用来选择部分元素的分支，比如 html:4t、html:xml 等
  • {}、[] 等都可以嵌套多层，最外层为 Zen Coding 功能符，里面的均为普通字符，所以你可以直接插入 {}、[] 到生成的 html 代码里

六分钟六课时，到此结束~~~

更多内容，参见 Zen Coding Cheat Sheet

======================= 我是困死了的分割线=============================

最后，Zen Coding 实际上对于需要填充内容的 HTML 文档的语法还不是很完善，比如我希望填入 “周一” 到 “周日” 的序列，就必须通过写七次 “td>str>{内容}” 完成。当然，作为练习 Zen Coding 的技巧而言，一切都是可以接受的。下面，其实也就是文章抬头 Zen Code 的更完整版，是我每周要写的工作周报的 html 源代码，你能写成 Zen Coding 格式么？（正确答案翻到底即可）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<html>
	<head>
		<style type="text/css">table {border-collapse: collapse; width: 800 px; font-size: 12 px;} table td {border: 1 px solid;}</style>
	</head>
	<body>
		<table>
			<tbody>
				<tr>
					<td rowspan="8">本周工作</td>
					<td><strong>日期</strong></td>
					<td><strong>工作内容</strong></td>
					<td><strong>完成情况</strong></td>
				</tr>
				<tr>
					<td>周一</td>
					<td></td>
					<td>完成</td>
				</tr>
				<tr>
					<td>周二</td>
					<td></td>
					<td>完成</td>
				</tr>
				<tr>
					<td>周三</td>
					<td></td>
					<td>完成</td>
				</tr>
				<tr>
					<td>周四</td>
					<td></td>
					<td>完成</td>
				</tr>
				<tr>
					<td>周五</td>
					<td></td>
					<td>完成</td>
				</tr>
				<tr>
					<td>周六</td>
					<td></td>
					<td>完成</td>
				</tr>
				<tr>
					<td>周日</td>
					<td></td>
					<td>完成</td>
				</tr>
			</tbody>
		</table>
		<br>
		<table>
			<tbody>
				<tr>
					<td rowspan="7"></td>
					<td><strong>计划工作</strong></td>
					<td><strong>优先级</strong></td>
					<td><strong>预计耗时</strong></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
				</tr>
			</tbody>
		</table>
		<br>
		<table>
			<tbody>
				<tr>
					<td>产品心得</td>
					<td></td>
				</tr>
			</tbody>
		</table>
		<br>
		<table>
			<tbody>
				<tr>
					<td>小卖部</td>
					<td></td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

正确答案：

1
html>(head>style{table {border-collapse: collapse; width: 800 px; font-size: 12 px;} table td {border: 1 px solid;}})+body>(((table>tbody>(tr>td[rowspan=8]{本周工作}+(td>str{日期})+(td>str{工作内容})+(td>str{完成情况}))+(tr>(td{周一}+td+td{完成}))+(tr>(td{周二}+td+td{完成}))+(tr>(td{周三}+td+td{完成}))+(tr>(td{周四}+td+td{完成}))+(tr>(td{周五}+td+td{完成}))+(tr>(td{周六}+td+td{完成}))+(tr>(td{周日}+td+td{完成})))+br+(table>tbody>(tr>td[rowspan=7]+(td>str{计划工作})+(td>str{优先级})+(td>str{预计耗时}))+(tr>td*3)*6)+br+(table>tbody>tr>td{产品心得}+td)+br+(table>tbody>tr>td{小卖部}+td)