前端开发神器：notepad++插件zen-coding

最新推荐文章于 2019-11-22 15:45:58 发布

iteye_9378

最新推荐文章于 2019-11-22 15:45:58 发布

阅读量705

点赞数

文章标签：前端 xhtml ruby ViewUI

Zen HTML Elements

Based on HTML 5 specification draft.

Root Element

`html`

<html></html>

`html:xml`

<htmlxmlns="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">
<htmllang="ru">
<head>
<title></title>
<metahttp-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">
<htmllang="ru">
<head>
<title></title>
<metahttp-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">
<htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="ru">
<head>
<title></title>
<metahttp-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">
<htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="ru">
<head>
<title></title>
<metahttp-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">
<htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="ru">
<head>
<title></title>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/>
</head>
<body>

</body>
</html>

`html:5`

<!DOCTYPE HTML>
<htmllang="ru-RU">
<head>
<title></title>
<metacharset="UTF-8">
</head>
<body>

</body>
</html>

Document Metadata

`head`

<head></head>

`title`

<title></title>

`base`

<basehref="">

`link`

<link>

`link:css`

<linkrel="stylesheet"type="text/css"href="style.css"media="all">

`link:print`

<linkrel="stylesheet"type="text/css"href="print.css"media="print">

`link:favicon`

<linkrel="shortcut icon"type="image/x-icon"href="favicon.ico">

`link:touch`

<linkrel="apple-touch-icon"href="favicon.png">

`link:rss`

<linkrel="alternate"type="application/rss+xml"title="RSS"href="rss.xml">

`link:atom`

<linkrel="alternate"type="application/atom+xml"title="Atom"href="atom.xml">

`meta`

<meta>

`meta:utf`

<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">

`meta:win`

<metahttp-equiv="Content-Type"content="text/html;charset=Win-1251">

`meta:compat`

<metahttp-equiv="X-UA-Compatible"content="IE=7">

`style`

<styletype="text/css"></style>

Scripting

`script`

<scripttype="text/javascript"></script>

`script:src`

<scripttype="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`

<ahref=""></a>

`a:link`

<ahref="http://"></a>

`a:mail`

<ahref="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`

<abbrtitle=""></abbr>

`acronym, acr`

<acronymtitle=""></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`

<bdodir=""></bdo>

`bdo:r`

<bdodir="rtl"></bdo>

`bdo:l`

<bdodir="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`

<imgsrc=""alt="">

`iframe, ifr`

<iframesrc=""frameborder="0"></iframe>

`embed, emb`

<embedsrc=""type="">

`object, obj`

<objectdata=""type=""></object>

`param`

<paramname=""value="">

`video`

<videosrc=""></video>

`audio`

<audiosrc=""></audio>

`source, src`

<source>

`canvas`

<canvas></canvas>

`map`

<mapname=""></map>

`map+`

<mapname="">
<areashape=""coords=""href=""alt="">
</map>

`area`

<areashape=""coords=""href=""alt="">

`area:d`

<areashape="default"href=""alt="">

`area:c`

<areashape="circle"coords=""href=""alt="">

`area:r`

<areashape="rect"coords=""href=""alt="">

`area:p`

<areashape="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`

<formaction=""></form>

`form:get`

<formaction=""method="get"></form>

`form:post`

<formaction=""method="post"></form>

`fieldset, fset`

<fieldset></fieldset>

`legend, leg`

<legend></legend>

`label`

<labelfor=""></label>

`input`

<inputtype="">

`input:hidden, input:h`

<inputtype="hidden"value="">

`input:text, input:t`

<inputtype="text"value=""id="">

`input:search`

<inputtype="search"value=""id="">

`input:email`

<inputtype="email"value=""id="">

`input:url`

<inputtype="url"value=""id="">

`input:password, input:p`

<inputtype="password"value=""id="">

`input:datetime`

<inputtype="datetime"value=""id="">

`input:datetime-local`

<inputtype="datetime-local"value=""id="">

`input:date`

<inputtype="date"value=""id="">

`input:month`

<inputtype="month"value=""id="">

`input:week`

<inputtype="week"value=""id="">

`input:time`

<inputtype="time"value=""id="">

`input:number`

<inputtype="number"value=""id="">

`input:range`

<inputtype="range"value=""id="">

`input:color`

<inputtype="color"value=""id="">

`input:checkbox, input:c`

<inputtype="checkbox"id="">

`input:radio, input:r`

<inputtype="radio"id="">

`input:file, input:f`

<inputtype="file"id="">

`input:submit, input:s`

<inputtype="submit"value="">

`input:image, input:i`

<inputtype="image"src=""alt="">

`input:reset`

<inputtype="reset"value="">

`input:button, input:b`

<inputtype="button"value="">

`button, btn`

<button></button>

`select`

<selectid=""></select>

`select+`

<selectid="">
<optionvalue=""></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`

<textareaid=""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`

<menutype="context"></menu>

`menu:toolbar, menu:t`

<menutype="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代码：

<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

会被转换成为:

<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等)。通用的语言缩写定义看起来就像这样：

'html': { 'snippets': { 'cc:ie6': '<!--[if lte IE 6]>\n\t${child}|\n<![endif]-->',
   ...
   },
     'abbreviations': { 'a': '<a href=""></a>', 'img': '<img src="" alt="" />',
   ...
   }
   }