读了一遍 Zen Coding 相关内容，在网上看到了一些大牛的博客，转载过来当作给自己的回顾。（原文地址：http://kaikai.info/how-to-zen-coding/）
使用的是 Sublime Text 2，安装了 Package Installer 插件与 Zen Coding 插件。Windows/MAC 下均使用 Ctrl+Alt+Enter 调出 Koan（即 Zen Coding 的专用输入框）输入需要的内容。有兴趣的还可以去查一下 Koan 的意思，挺有内涵。
先看下面这段代码：
这段代码等于下面这段代码：
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：
https://code.google.com/p/zen-coding/wiki/CheatSheets
======================= 我是困死了的分割线=============================
最后，Zen Coding 实际上对于需要填充内容的 HTML 文档的语法还不是很完善，比如我希望填入 “周一” 到 “周日” 的序列，就必须通过写七次 “td>str>{内容}” 完成。当然，作为练习 Zen Coding 的技巧而言，一切都是可以接受的。下面，其实也就是文章抬头 Zen Code 的更完整版，是我每周要写的工作周报的 html 源代码，你能写成 Zen Coding 格式么？（正确答案翻到底即可）
正确答案：
|
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
)
|
扫一扫
1119
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
