Emmet（前身是zen coding）介绍和使用

Zen coding - 一种快速编写HTML/CSS代码的方法。它使用仿CSS选择器的语法来快速开发HTML和CSS - 由Sergey Chikuyonok开发。

如今它更名为了Emmet，而且搭建了一个新的网站：docs.emmet.io。

和通常的编辑器中使用的“代码片断”概念不太同样，Emmet使用动态的语法来生成代码，这意味着你不须要本身去编辑并建立固定的代码片断。 大大的提升了代码编写效果，这一点似的Zen coding很是的流行。

例如，输入以下内容：

ul#nav>li.item$*4>a{Item $} 

Emmet会帮助你生成以下的代码片断：

<ul id="nav">
    	<li class="item1"><a href="">Item 1</a></li>
    	<li class="item2"><a href="">Item 2</a></li>
    	<li class="item3"><a href="">Item 3</a></li>
    	<li class="item4"><a href="">Item 4</a></li>
</ul>

一篇文章：
zen coding：一种快速编写html/css代码的方法

在本文中咱们将展现一种新的使用仿CSS选择器的语法来快速开发HTML和CSS的方法。它由Sergey Chikuyonok开发。

你在写HTML代码(包括全部标签、属性、引用、大括号等)上花费多少时间？若是你的编辑器有代码提示功能，你编写的时候就会容易些，但即使如此你仍是要手动敲入不少代码。

 

在JavaScript方面，当咱们想要在一个页面上获取某个特定的元素时，咱们就会遇到一样的问题，咱们必须写不少代码，这就变得难于维护和重用。JavaScript框架应运而生，它们同时引入了CSS选择器引擎。如今，你可使用简单的CSS表达式来获取DOM元素，这至关酷。

可是，若是你不只仅能够用CSS的选择器布局和定位元素，还能生成代码会怎么样？好比，若是你这样写：

div#content>h1+p

…而后就能够看到这样的输出：

<div id="content"> <h1></h1> <p></p> </div>

有些迷惑吧？今天，我将向你介绍Zen Coding，一组用于快速HTML和CSS编码的工具。最初由Vadim Makeev在2009年4月提出(文章为俄语)，由鄙人(也就是我)开发了数月并最终达到比较成熟的状态。Zen Coding由两个核心组件组成：一个缩写扩展器(缩写为像CSS同样的选择器)和上下文无关的HTML标签对匹配器。看一下这个演示视频来看一下它们能为你作些什么。

展开缩写

展开缩写功能将相似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为item一、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等)。通用的语言缩写定义看起来就像这样：

 

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="" />', ... } }

元素类型

Zen Coding有两个主要的元素类型：“片断(snippets)” 和 “缩写(abbreviations)”。片断就是随意的代码碎片，而缩写是标签订义。经过片断，你能够写出你想要的任何代码，它也会照你写的格式输出；可是你必须手动的格式化它(使用\n 和\t实现换行和缩进) 并将${child}变量放到你想要输出子元素的地方，就像这样：cc:ie6>style。若是你不使用${child}变量，子元素将会输出于代码片断的后面。

有了缩写，您必须编写标记定义，并且语法是很是重要的。一般，你必须写一个简单的带有全部默认的属性的标签，好比: <a href=””></a>。当Zen Coding被加载后，它会解析一个标签订义到一个描述该标签的名字、属性(包括它们的顺序)以及该标签是否为空的特定的对象中。因此，若是你写<img src=”” alt=”” />，你会告诉Zen Coding这个标签必须是空的，而后“扩展缩写”行为就会在输出以前为它使用特定的规则。

对于片断和缩写，你能够添加一个管道符号，它告诉Zen Coding当缩写被展开的时候光标会被定位到哪里。默认的，Zen Coding 将光标放在空属性的引号中间以及开始和关闭标签的中间。

例子

那么，这里解释一下当你写了一个缩写并召唤“展开缩写”行动时发生的事情。首先，它将一个完整的缩写分开为独立的元素：这样div>a 会被分红div 和a 元素，固然也会维持他们的关系。而后，每一个元素，解析器先在代码片断内然后在缩写中寻找定义。若是它找不到，将会使用元素的名字做为新的标签，并为其添加缩写中定义的id和class。好比，若是你写mytag#example，解析器在片断或缩写中找不到mytag定义，它就会输出<mytag id=”example”><mytag>。

咱们制做了不少默认的CSS和HTML缩写和片断。你会发现学习使用Zen Coding能够增长你的生产力。

HTML 标签对匹配器

对于HTML编码者的另外一个很是常见的任务是寻找一个元素的标签对。例如你想选择整个<div id=”content”>标签并将其移动到其它地方或者删除它。或者有可能你在寻找一个关闭标签并想知道它属于那个开始标签。

不幸的是，不少现代开发工具在该功能方面有所欠缺。那么我就决定写一个我本身的标签对匹配器做为Zen Coding的一部分。不过它依然在beta阶段并尚存一些问题，但它能够工做的很不错并很快。不是浏览整个文档(像一般的那种HTML标签对匹配器的作法)，它从光标的当前位置开始寻找相关的标签。这使得它很是快而且上下文无关：它甚至能够用于这段JavaScript代码片断：

 

2 3 4 5 6 7

var table = '<table>'; for (var i = 0; i < 3; i++) { table += '<tr>'; for (var j = 0; j < 5; j++) { table += '<td>' + j + '</td>'; } table += '</tr>'; } table += '</table>';

使用缩写包裹

这真的是一个很酷的特性，它将缩写和标签对匹配器的功能合并到一块儿了。你有多少才发现你须要添加一个包裹元素以修正一个浏览器bug？或者你须要添加一个装饰，好比一个背景图片或者边框到一个块级内容？你必须写开始标签，临时打断你的代码，找到相关的点而后关闭标签。这就是“使用缩写包裹”能帮助你的地方。

该功能至关简单：它要求你输入缩写，而后执行适当的“展开缩写”行动并将你指望的文本放到你缩写的最后一个元素里面。若是你没有选择任何文本，它就会启动标签对匹配器并使用结果。它一样能搞清楚你的光标的位置：标签的内容里面或者是开始和关闭标签中间。依赖于它的位置，它会包裹标签的内容或标签自己。

缩写包裹为包裹个别行引入了一个特定的缩写句法。简单跳转到倍增操做符后面的数字，好比：ul#nav>li*>a。当Zen Coding 发现一个使用未定义的倍增数的时候，它会将它做为一个重复元素：你的章节中有多少行，它就会输出多少次，并将每行的内容放到重复元素的最后一个子元素里面。

若是你在这段文本外面包裹这段缩写div#header>ul#navigation>li.item$*>a>span：

1 2 3 4 5

About Us Products News Blog Contact Up

你将会获得如下结果：

<div id="header"> <ul id="navigation"> <li class="item1"><a href=""><span>About Us</span></a></li> <li class="item2"><a href=""><span>Products</span></a></li> <li class="item3"><a href=""><span>News</span></a></li> <li class="item4"><a href=""><span>Blog</span></a></li> <li class="item5"><a href=""><span>Contact Up</span></a></li> </ul> </div>

你能够看到，Zen Coding是一个强大的文本处理工具。

快捷键

• Ctrl+,
  展开缩写
• Ctrl+M
  匹配对
• Ctrl+H
  使用缩写包括
• Shift+Ctrl+M
  合并行
• Ctrl+Shift+?
  上一个编辑点
• Ctrl+Shift+?
  下一个编辑点
• Ctrl+Shift+?
  定位匹配对

这些快捷键是能够自定义的。

上面参考：http://www.qianduan.net/zen-coding-a-new-way-to-write-html-code.html

 用法：

zen-coding经常使用缩写

html:4t (HTML 4.01 Transitional) 
html:4s (HTML 4.01) 
html:xt (XHTML 1.0) 
html:xs (XHTML 1.0 Strict) 
html:xxs (XHTML 1.1) 
html:5 (HTML5) 
 
meta:utf, meta:compat 
style, link:css, link:print, link:favicon, link:rss, 
script, script:src 
 
div, p, a, ul, ol, input:t, input:r 
 
ol+, dl+, table+, tr+, select+, map+, optg+ 
 
cc:ie6, cc:ie, cc:noie

input:t     (input:text也能够，同理input:radio也能够。写不写完整均可以。

input:t
<input type="text" name="" id=""/>
input:r
<input type="radio" name="" id=""/>

input:c
<input type="checkbox" name="" id=""/>

input:b
<input type="button" value=""/>

input:h
<input name="" type="hidden"/>

如要显示一个id和多个class属性时，能够这样写

ul#nav.one.two

1	< ul  id = "nav"  class = "one two" ></ ul >

E+ (+号表示会生成默认的子元素)

table+

1 2 3 4 5

< table > < tr > < td ></ td > </ tr > </ table >

ul+

1 2 3

< ul > < li ></ li > </ ul >

dl+

1 2 3 4

< dl > < dt ></ dt > < dd ></ dd > </ dl >

 

 

E[attr]

 

attr:表示元素属性。例:

 

a[title]

 

1	< a href = ""  title = "" > < / a >

 

td[colspan=2]

 

1	< td  colspan = "2" ></ td >

 

 

8.( )控制嵌套分组关系

div#header>(h1.logo>a)+ul.nav>li.item*5>a

1 2 3 4 5 6 7 8 9 10

< div  id = "header" > < h1  class = "logo" >< a  href = "" ></ a ></ h1 > /*h1和ul是兄弟关系*/ < ul  class = "nav" > < li  class = "item" >< a  href = "" ></ a ></ li > < li  class = "item" >< a  href = "" ></ a ></ li > < li  class = "item" >< a  href = "" ></ a ></ li > < li  class = "item" >< a  href = "" ></ a ></ li > < li  class = "item" >< a  href = "" ></ a ></ li > </ ul > </ div >

div#header>h1.logo>a+ul.nav>li.item*5>a

1 2 3 4 5 6 7 8 9 10 11 12

< div  id = "header" > < h1  class = "logo" > /*h1和ul是父子关系*/ < a  href = "" ></ a > < ul  class = "nav" > < li  class = "item" >< a  href = "" ></ a ></ li > < li  class = "item" >< a  href = "" ></ a ></ li > < li  class = "item" >< a  href = "" ></ a ></ li > < li  class = "item" >< a  href = "" ></ a ></ li > < li  class = "item" >< a  href = "" ></ a ></ li > </ ul > </ h1 > </ div >

以上两种写法获得的结构是不同的。 请你们注意观察。

将如下代码用zen-coding写出来。

   <div id="page">
        <div id="header">
            <ul id="nav">
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
            </ul>
        </div>
        <div id="page">
            <h1><span></span></h1>

            <p></p>

            <p></p>
        </div>
        <div id="footer"></div>
    </div>

div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer

能够看到，要合理利用（）将一个大的元素包好。

 

http://www.cnblogs.com/cobby/archive/2012/05/09/2492473.html