读了一遍 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:
- [] 添加元素属性,可以加很多属性哦
Lesson 6:
- 对于部分元素(style),代码扩充会参照给定的特殊规则
- : 用来选择部分元素的分支,比如 html:4t、html:xml 等
- {}、[] 等都可以嵌套多层,最外层为 Zen Coding 功能符,里面的均为普通字符,所以你可以直接插入 {}、[] 到生成的 html 代码里
最后,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
)
|