集成zen coding 的编辑器sublime和editplus,dreamweaver以及eclipse或者myeclipse都可集成支持zen coding插件,editplus是原生支持的,zen coding使用时按ctrl+e自动扩展,
阅读提醒,例如本文第一条将html:5输入到editplus中按ctrl+e自动扩展出html5文本标准结构
zen coding html properties
HTML
1.html:5
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
2.base
<base href="">
3.link:css
<link rel="stylesheet" type="text/css" href="style.css" media="all">
4.link:print
<link rel="stylesheet" type="text/css" href="print.css" media="print">
5.link:favicon
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
6.link:touch
<link rel="apple-touch-icon" href="favicon.png">
7.link:rss
<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml">
8.link:atom
<link rel="alternate" type="application/atom+xml" title="Atom" href="atom.xml">
9.meta
<meta></meta>
10.meta:utf
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
11.meta:win
<meta http-equiv="Content-Type" content="text/html;charset=Win-1251">
12.meta:compat
<meta http-equiv="X-UA-Compatible" content="IE=7">
13.style
<style type="text/css"></style>
Scripting标签
14.script
<script type="text/javascript"></script>
15.script:src
<script type="text/javascript" src=""></script>
16.noscript
<noscript></noscript>
Sections
17.body
<body></body>
18.section, sect
<section></section>
19.nav
<nav></nav>
20.article, art
<article></article>
22.aside
<aside></aside>
23.h1
<h1></h1>
24.h2
<h2></h2>
25.h3
<h3></h3>
26.h4
<h4></h4>
27.h5
<h5></h5>
28.h6
<h6></h6>
29.hgroup, hgr
<hgroup></hgroup>
30.header, hdr
<header></header>
31.footer, ftr
<footer></footer>
32.address, adr
<address></address>
33.div
<div></div>
Grouping Content
34.p
<p></p>
35.hr
<hr>
36.br
<br>
37.pre
<pre></pre>
38.dialog, dlg
<dialog></dialog>
39.blockquote, bq
<blockquote></blockquote>
40.ol
<ol></ol>
50.ol+
<ol>
<li></li>
</ol>
51.ul
<ul></ul>
52.ul+
<ul>
<li></li>
</ul>
53.li
<li></li>
54.dl
<dl></dl>
55.dl+
<dl>
<dt></dt>
<dd></dd>
</dl>
56.dt
<dt></dt>
57.dd
<dd></dd>
Text-level Semantics
58.a
<a href=""></a>
59.a:link
<a href="http://"></a>
60.a:mail
<a href="mailto:"></a>
61.q
<q></q>
62.cite
<cite></cite>
63.em
<em></em>
64.strong, str
<strong></strong>
65.small
<small></small>
66.mark
<mark></mark>
67.dfn
<dfn></dfn>
68.abbr
<abbr title=""></abbr>
69.acronym, acr
<acronym title=""></acronym>
70.time
<time></time>
71.progress, prog
<progress></progress>
72.meter
<meter></meter>
73.code
<code></code>
74.var
<var></var>
75.samp
<samp></samp>
76.kbd
<kbd></kbd>
77.sub
<sub></sub>
78.sup
<sup></sup>
79.span
<span></span>
80.i
<i></i>
81.b
<b></b>
82.bdo
<bdo dir=""></bdo>
83.bdo:r
<bdo dir="rtl"></bdo>
94.bdo:l
<bdo dir="ltr"></bdo>
95.ruby
<ruby></ruby>
96.rt
<rt></rt>
97.rp
<rp></rp>
Edits
98.ins
<ins></ins>
99.del
<del></del>
Embedded Content
100.figure, fig
<figure></figure>
101.img
<img src="" alt="">
102.iframe, ifr
<iframe src="" frameborder="0"></iframe>
103.embed, emb
<embed src="" type="">
104.object, obj
<object data="" type=""></object>
105.param
<param name="" value="">
106.video
<video src=""></video>
107.audio
<audio src=""></audio>
108.source, src
<source>
109.canvas
<canvas></canvas>
110.map
<map name=""></map>
111.map+
<map name="">
<area shape="" coords="" href="" alt="">
</map>
112.area
<area shape="" coords="" href="" alt="">
113.area:d
<area shape="default" href="" alt="">
114.area:c
<area shape="circle" coords="" href="" alt="">
115.area:r
<area shape="rect" coords="" href="" alt="">
116.area:p
<area shape="poly" coords="" href="" alt="">
Tabular Data
117.table
<table></table>
118.table+
<table>
<tr>
<td></td>
</tr>
</table>
119.caption, cap
<caption></caption>
120.colgroup, colg
<colgroup></colgroup>
121.colgroup+, colg+
<colgroup>
<col>
</colgroup>
122.col
<col>
123.tbody
<tbody></tbody>
124.thead
<thead></thead>
125.tfoot
<tfoot></tfoot>
125.tr
<tr></tr>
126.tr+
<tr>
<td></td>
</tr>
127.th
<th></th>
128.td
<td></td>
Forms
129.form
<form action=""></form>
130.form:get
<form action="" method="get"></form>
131.form:post
<form action="" method="post"></form>
132.fieldset, fset
<fieldset></fieldset>
133.legend, leg
<legend></legend>
134.label
<label for=""></label>
135.input
<input type="">
136.input:hidden, input:h
<input type="hidden" value="">
137.input:text, input:t
<input type="text" value="" id="">
138.input:search
<input type="search" value="" id="">
139.input:email
<input type="email" value="" id="">
140.input:url
<input type="url" value="" id="">
141.input:password, input:p
<input type="password" value="" id="">
142.input:datetime
<input type="datetime" value="" id="">
143.input:datetime-local
<input type="datetime-local" value="" id="">
144.input:date
<input type="date" value="" id="">
145.input:month
<input type="month" value="" id="">
146.input:week
<input type="week" value="" id="">
147.input:time
<input type="time" value="" id="">
148.input:number
<input type="number" value="" id="">
149.input:range
<input type="range" value="" id="">
150.input:color
<input type="color" value="" id="">
151.input:checkbox, input:c
<input type="checkbox" id="">
152.input:radio, input:r
<input type="radio" id="">
153.input:file, input:f
<input type="file" id="">
154.input:submit, input:s
<input type="submit" value="">
155.input:image, input:i
<input type="image" src="" alt="">
156.input:reset
<input type="reset" value="">
157.input:button, input:b
<input type="button" value="">
158.button, btn
<button></button>
159.select
<select id=""></select>
160.select+
<select id="">
<option value=""></option>
</select>
161.optgroup, optg
<optgroup></optgroup>
162.optgroup+, optg+
<optgroup>
<option></option>
</optgroup>
163.option, opt
<option></option>
Interactive Elements
164.datagrid, datag
<datagrid></datagrid>
165.datalist, datal
<datalist></datalist>
166.textarea, tarea
<textarea id="" cols="30" rows="10"></textarea>
167.keygen, kg
<keygen>
168.output, out
<output></output>
169.details, det
<details></details>
170.command, cmd
<command>
180.bb
<bb></bb>
181.menu
<menu></menu>
182.menu:context, menu:c
<menu type="context"></menu>
183.menu:toolbar, menu:t
<menu type="toolbar"></menu>
Conditional Comments
184.cc:ie
<!--[if IE]><![endif]-->
185.cc:noie
<!--[if !IE]><!--><!--<![endif]-->