HTML中Zen Coding

嵌套运算符

嵌套运算符用于以缩写的方式安排元素在生成文档树中的位置：将其放在内部或成为相邻的元素。

子: >

可以使用 > 运算符指定嵌套元素在另一个元素内部：

div>ul>li

生成的结果为：

兄弟: +

使用 + 运算符将相邻的其它元素处理为同级：

div+p+bq

生成的结果为：

上升: ^

使用 > 运算符将会降低所有后续所有元素在生成树中的级别，每一级的兄弟元素也被解析成相同深度的元素：

div+div>p>span+em

将生成：

使用 ^ 运算符，能够提升元素在生成树中的一个级别，并同时影响其后的元素：

div+div>p>span+em^bq

将生成：

可以连续使用多个 ^ 运算符，每次提高一个级别：

div+div>p>span+em^^^bq

将生成：

重复: *

使用 * 运算符可以定义一组元素：

ul>li*5

将生成：

分组: ()

括号用于在复杂的 Emmet 缩写中处理一组子树：

div>(header>ul>li*2>a)+footer>p

将生成：

如果想与浏览器 DOM 协同工作，可能想要对文档片段分组：每个组包含一个子树，所有的后续元素都插入到与组中第一个元素相同的级别中。

能够在组中嵌套组并且使用 * 运算符绑定它们：

(div>dl>(dt+dd)*3)+footer>p

将生成：

使用分组，可以使用单个缩写逐个写出整页的标签，不过尽量不要这么做。

属性运算符

属性运算符用于编辑所生成的元素的属性，在 HTML 和 XML 中可以快速地为生成元素添加 class 属性。

ID 和 CLASS

在 CSS 中，可以使用 elem#id 和 elem.class 注解来达到为元素指定 id 或 class 属性的目的。在 Emmet 中，可以使用几乎相同的语法来为指定的元素添加这些属性：element:

div#header+div.page+div#footer.class1.class2.class3

生成：

自定义属性

可以使用 [attr] 注解（就像在 CSS 中一样）来为元素添加自定义属性：

td[title="Hello world!" colspan=3]

将生成：

• 能够在方括号中放置许多属性，
• 可以不为属性指定值： td[colspan title] 将生成  ，如果你的编辑器支持，可以使用 tab 来跳到每个空属性中填写。
• 属性可以用单引号或双引号作为定界符。
• 如果属性不包含空格，不需要用定界符括住它：td[title=hello colspan=3] 是正确的。

编号: $

使用 * 运算符可以重复生成元素，如果带 $ 就可以为它们编号。把 $ 放在元素名、属性名或者属性值中，将为每个元素生成正确的编号：

ul>li.item$*5

将生成：

使用多 $ 可以填充前导的零：

ul>li.item$$$*5

将生成：

改变编号的基数和方向

使用 @ ，可以改变数字的走向（升序或降序）和基数（例如起始值）。

在 $ 后添加 @- 来改变数字走向：

ul>li.item$@-*5

将生成：

在 $ 后面添加 @N 改变编号的基数：

ul>li.item$@3*5

将生成：

这些附加的运算符可以同时使用：

ul>li.item$@-3*5

将生成：

文本: {}

可以用花括号向元素中添加文本：

a{Click me}

将生成：

Click me

注意，这个 {text} 是被当成独立元素解析的（类似于 div, p ），但当其跟在其它元素后面时则有所不同。例如， a{click} 和 a>{click} 产生相同的输出，但是 a{click}+b{here} 和 a>{click}+b{here} 的输出就不同了：

clickhere


clickhere

在第二示例中，  元素放在了  元素的里面。差别如下：当 {text} 写在元素的后面，它不影响父元素的上下文。下面是展示这种差别的重要性的较复杂的例子：

p>{Click }+a{here}+{ to continue}

Click here to continue

p{Click }+a{here}+{ to continue}

Click 
here to continue

link[rel=prefetch title="Hello world"]

(header > ul.nav > li*5) + footer