Zen HTML Elements
Based on HTML 5 specification draft.
Root Element
html
<html></html>
html:xml
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru"></html>
html:4t
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ru">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<body>
</body>
</html>
html:4s
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ru">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<body>
</body>
</html>
html:xt
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
</head>
<body>
</body>
</html>
html:xs
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
</head>
<body>
</body>
</html>
html:xxs
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
</head>
<body>
</body>
</html>
html:5
<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
<title></title>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>
Document Metadata
head
<head></head>
title
<title></title>
base
<base href="">
link
<link>
link:css
<link rel="stylesheet" type="text/css" href="style.css" media="all">
link:print
<link rel="stylesheet" type="text/css" href="print.css" media="print">
link:favicon
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
link:touch
<link rel="apple-touch-icon" href="favicon.png">
link:rss
<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml">
link:atom
<link rel="alternate" type="application/atom+xml" title="Atom" href="atom.xml">
meta
<meta>
meta:utf
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
meta:win
<meta http-equiv="Content-Type" content="text/html;charset=Win-1251">
meta:compat
<meta http-equiv="X-UA-Compatible" content="IE=7">
style
<style type="text/css"></style>
Scripting
script
<script type="text/javascript"></script>
script:src
<script type="text/javascript" src=""></script>
noscript
<noscript></noscript>
Sections
body
<body></body>
section, sect
<section></section>
nav
<nav></nav>
article, art
<article></article>
aside
<aside></aside>
h1
<h1></h1>
h2
<h2></h2>
h3
<h3></h3>
h4
<h4></h4>
h5
<h5></h5>
h6
<h6></h6>
hgroup, hgr
<hgroup></hgroup>
header, hdr
<header></header>
footer, ftr
<footer></footer>
address, adr
<address></address>
div
<div></div>
Grouping Content
p
<p></p>
hr
<hr>
br
<br>
pre
<pre></pre>
dialog, dlg
<dialog></dialog>
blockquote, bq
<blockquote></blockquote>
ol
<ol></ol>
ol+
<ol>
<li></li>
</ol>
ul
<ul></ul>
ul+
<ul>
<li></li>
</ul>
li
<li></li>
dl
<dl></dl>
dl+
<dl>
<dt></dt>
<dd></dd>
</dl>
dt
<dt></dt>
dd
<dd></dd>
Text-level Semantics
a
<a href=""></a>
a:link
<a href="http://"></a>
a:mail
<a href="mailto:"></a>
q
<q></q>
cite
<cite></cite>
em
<em></em>
strong, str
<strong></strong>
small
<small></small>
mark
<mark></mark>
dfn
<dfn></dfn>
abbr
<abbr title=""></abbr>
acronym, acr
<acronym title=""></acronym>
time
<time></time>
progress, prog
<progress></progress>
meter
<meter></meter>
code
<code></code>
var
<var></var>
samp
<samp></samp>
kbd
<kbd></kbd>
sub
<sub></sub>
sup
<sup></sup>
span
<span></span>
i
<i></i>
b
<b></b>
bdo
<bdo dir=""></bdo>
bdo:r
<bdo dir="rtl"></bdo>
bdo:l
<bdo dir="ltr"></bdo>
ruby
<ruby></ruby>
rt
<rt></rt>
rp
<rp></rp>
Edits
ins
<ins></ins>
del
<del></del>
Embedded Content
figure, fig
<figure></figure>
img
<img src="" alt="">
iframe, ifr
<iframe src="" frameborder="0"></iframe>
embed, emb
<embed src="" type="">
object, obj
<object data="" type=""></object>
param
<param name="" value="">
video
<video src=""></video>
audio
<audio src=""></audio>
source, src
<source>
canvas
<canvas></canvas>
map
<map name=""></map>
map+
<map name="">
<area shape="" coords="" href="" alt="">
</map>
area
<area shape="" coords="" href="" alt="">
area:d
<area shape="default" href="" alt="">
area:c
<area shape="circle" coords="" href="" alt="">
area:r
<area shape="rect" coords="" href="" alt="">
area:p
<area shape="poly" coords="" href="" alt="">
Tabular Data
table
<table></table>
table+
<table>
<tr>
<td></td>
</tr>
</table>
caption, cap
<caption></caption>
colgroup, colg
<colgroup></colgroup>
colgroup+, colg+
<colgroup>
<col>
</colgroup>
col
<col>
tbody
<tbody></tbody>
thead
<thead></thead>
tfoot
<tfoot></tfoot>
tr
<tr></tr>
tr+
<tr>
<td></td>
</tr>
th
<th></th>
td
<td></td>
Forms
form
<form action=""></form>
form:get
<form action="" method="get"></form>
form:post
<form action="" method="post"></form>
fieldset, fset
<fieldset></fieldset>
legend, leg
<legend></legend>
label
<label for=""></label>
input
<input type="">
input:hidden, input:h
<input type="hidden" value="">
input:text, input:t
<input type="text" value="" id="">
input:search
<input type="search" value="" id="">
input:email
<input type="email" value="" id="">
input:url
<input type="url" value="" id="">
input:password, input:p
<input type="password" value="" id="">
input:datetime
<input type="datetime" value="" id="">
input:datetime-local
<input type="datetime-local" value="" id="">
input:date
<input type="date" value="" id="">
input:month
<input type="month" value="" id="">
input:week
<input type="week" value="" id="">
input:time
<input type="time" value="" id="">
input:number
<input type="number" value="" id="">
input:range
<input type="range" value="" id="">
input:color
<input type="color" value="" id="">
input:checkbox, input:c
<input type="checkbox" id="">
input:radio, input:r
<input type="radio" id="">
input:file, input:f
<input type="file" id="">
input:submit, input:s
<input type="submit" value="">
input:image, input:i
<input type="image" src="" alt="">
input:reset
<input type="reset" value="">
input:button, input:b
<input type="button" value="">
button, btn
<button></button>
select
<select id=""></select>
select+
<select id="">
<option value=""></option>
</select>
optgroup, optg
<optgroup></optgroup>
optgroup+, optg+
<optgroup>
<option></option>
</optgroup>
option, opt
<option></option>
Interactive Elements
datagrid, datag
<datagrid></datagrid>
datalist, datal
<datalist></datalist>
textarea, tarea
<textarea id="" cols="30" rows="10"></textarea>
keygen, kg
<keygen>
output, out
<output></output>
details, det
<details></details>
command, cmd
<command>
bb
<bb></bb>
menu
<menu></menu>
menu:context, menu:c
<menu type="context"></menu>
menu:toolbar, menu:t
<menu type="toolbar"></menu>
Conditional Comments
cc:ie
<!--[if IE]><![endif]-->
cc:noie
<!--[if !IE]><!--><!--<![endif]-->
展开缩写
展开缩写功能将类似CSS的选择器转换为XHTML代码。术语“缩写”可能会有点儿难以理解。为什么不直接称之为“CSS选择器”呢？嗯，首要原因是语义化：“选择器”意为选择一些东西，但是在这里我们事实上是生成 一些东西，是写一个长代码的较短的替代。其次，它只是使用真实的CSS选择器语法的一个小的子集，并添加了一些新的操作符。这里是一个支持的属性和操作符的列表：E
元素名称(div, p);
E#id
使用id的元素(div#content, p#intro, span#error);
E.class
使用类的元素(div.header, p.error.critial). 你也可以联合使用class和idID: div#content.column.width;
E>N
子代元素(div>p, div#footer>p>span);
E+N
兄弟元素(h1+p, div#header+div#content+div#footer);
E*N
元素倍增(ul#nav>li*5>a);
E$*N
条目编号 (ul#nav>li.item-$*5);
正如你能看到的，你已经知道如何使用Zen Coding了：只是些一个简单的仿CSS选择器(呃，“缩写”抱歉)，就像这样…div#header>img.logo+ul#nav>li*4>a
…然后调用”展开缩写”行为。这里有两个新增的操作符：元素倍增和条目编号。比如，如果你想生成5个<li>元素，你可以简单的写位li*5。它也将同样重写全部子代元素。如果你想写4个<li>元素，每个里面都有一个<a>标签，你就可以简单的写为li*4>a，这样会生成以下HTML代码：
1
2
3
4 | <li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li> |
最后一个——条目编号用于当你想用索引标记重复的元素的情况。假设你想生成class为item1、item2和item3的3个<div>元素。你可以写成这样的缩写，div.item$*3:
1
2
3 | <div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div> |
只需在你想要索引出现的任何class或id属性上添加一个美元符号即可，而且想要多少都可以。那么，这样…
div#i$-test.class$$$*5
会被转换成为:
1
2
3
4
5 | <div id="i1-test" class="class111"></div>
<div id="i2-test" class="class222"></div>
<div id="i3-test" class="class333"></div>
<div id="i4-test" class="class444"></div>
<div id="i5-test" class="class555"></div> |
你会看到，当你写a的缩写的时候，输出是<a href=”"></a>。或者，如果你写img，输出就是<img src=”" alt=”" />。Zen Coding是如何知道什么时候应该为生成的标签添加默认的属性或者跳过关闭标签的？有一个专门的文件，名为zen_settings.js描述了输出元素。这是一个简单的JSON文件，描述每种语言的缩写(是的，你可以为不同的句法定义缩写，比如HTML、XSL、CSS等)。通用的语言缩写定义看起来就像这样：
1
2
3
4
5
6
7 | 'html': { 'snippets': { 'cc:ie6': '<!--[if lte IE 6]>\n\t${child}|\n<![endif]-->',
...
},
'abbreviations': { 'a': '<a href=""></a>', 'img': '<img src="" alt="" />',
...
}
} |
