Zen Coding 简易教程（六分钟学 Zen Coding）(转载)

读了一遍 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 的意思，挺有内涵。

先看下面这段代码：

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

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

XHTML

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

FONT-SIZE = "12px" > border="1" cellSpacing="0" cellPadding="2"> rowspan = "8" > border="1" cellSpacing="0" cellPadding="2"> rowspan = "8" > border="1" cellSpacing="0" cellPadding="2">

Let’s begin.

Lesson 1：

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

这节课我们学了：

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

Lesson 2：

我们继续扩充结构，在 下添加了两个

块，分别放进了一定数量的段落。

这节课我们学到了：

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

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 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 > < / 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 )