标签: 简易教程

Zen Coding 简易教程(六分钟学 Zen Coding)

读了一遍 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 格式么?(正确答案翻到底即可)

正确答案: