给大家带来疾速开辟HTML和CSS的办法:Zen Coding

CSS的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽，而且众所周知，搜索引擎喜欢清洁的代码。
网页制造poluoluo文章简介：ZenCoding:一种疾速编写HTML/CSS代码的办法.
译自：SmashingMagazine
中文：ZenCoding:一种疾速编写HTML/CSS代码的办法
在本文中我们将展现一种新的利用仿CSS选择器的语法来疾速开辟HTML和CSS的办法。它由SergeyChikuyonok开辟。
你在写HTML代码(包含一切标签、属性、援用、年夜括号等)上消费几工夫？假如你的编纂器有代码提醒功效，你编写的时分就会简单些，但即使云云你仍是要手动敲进良多代码。

在JavaScript方面，当我们想要在一个页面上猎取某个特定的元素时，我们就会碰到一样的成绩，我们必需写良多代码，这就变得难于保护和重用。JavaScript框架应运而生，它们同时引进了CSS选择器引擎。如今，你可使用复杂的CSS表达式来猎取DOM元素，这相称酷。
可是，假如你不单单能够用CSS的选择器结构和定位元素，还能天生代码会怎样？好比，假如你如许写：

1. div#content>h1+p

复制代码

…然后就能够看到如许的输入：

1. <divid="content"><h1></h1><p></p></div>

复制代码

有些利诱吧？明天，我将向你先容ZenCoding，一组用于疾速HTML和CSS编码的工具。最后由VadimMakeev在2009年4月提出(文章为俄语)，由不才(也就是我)开辟了数月并终极到达对照成熟的形态。ZenCoding由两个中心组件构成：一个缩写扩大器(缩写为像CSS一样的选择器)和高低文有关的HTML标签对婚配器。看一下这个演示视频来看一下它们能为你做些甚么。

注重：该视频原版位于Vimeo，可是要看的话必要翻[协调]墙先，地点在这里：http://vimeo.com/7405114，下面的视频是我费尽周折从Vimeo高低载上去上传到优酷的，上传后质量竟被年夜打扣头了，濉youtube上也有一份视频，是基于Aptana的演示，一样很出色：http://www.youtube.com/watch?v=ug84Ypwqfzk。PS:貌似youtube要比Vimeo翻[协调]墙简单些，不外怎样翻[协调]墙不在本站会商局限。
假如你想跳转到具体先容和利用指南，请看一下演示页面并立即下载你合用的插件：
Demo

• Demo(利用Ctrl+,睁开缩写，必要JavaScript撑持)
  
• 中文版演示
  

下载(完整撑持)

• Aptana(跨平台);
  
• Coda,viaTEAforCoda(Mac);
  
• Espresso,viaTEAforEspresso(Mac);
  

下载(部分撑持，只撑持“睁开缩写”)

• TextMate(只能用于Mac机,Windows可使用E-text编纂器替换);
  
• TopStyle;
  
• SublimeText;
  
• GEdit;
  
• DreamweaverCS4
  
• editArea在线编纂器;
  
• ZenCoding在线编纂器中文版
  

如今让我们看一下这些工具是怎样事情的吧。
睁开缩写

睁开缩写功效将相似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);
  
  

正如你能看到的，你已晓得怎样利用ZenCoding了：只是些一个复杂的仿CSS选择器(呃，“缩写”抱愧)，就像如许…

1. div#header>img.logo+ul#nav>li*4>a

复制代码

…然后挪用”睁开缩写”举动。
这里有两个新增的操纵符：元素倍增和条目编号。好比，假如你想天生5个<li>元素，你能够复杂的写位li*5。它也将一样重写全体子代元素。假如你想写4个<li>元素，每一个内里都有一个<a>标签，你就能够复杂的写为li*4>a，如许会天生以下HTML代码：

1. <li><ahref=""></a></li><li><ahref=""></a></li><li><ahref=""></a></li><li><ahref=""></a></li>

复制代码

最初一个——条目编号用于当你想用索引标志反复的元素的情形。假定你想天生class为item1、item2和item3的3个<div>元素。你能够写成如许的缩写，div.item$*3:

1. <divclass="item1"></div><divclass="item2"></div><divclass="item3"></div>

复制代码

只需在你想要索引呈现的任何class或id属性上增加一个美圆标记便可，并且想要几都能够。那末，如许…

1. div#i$-test.class$$*5

复制代码

会被转换成为:

1. <divid="i1-test"class="class111"></div><divid="i2-test"class="class222"></div><divid="i3-test"class="class333"></div><divid="i4-test"class="class444"></div><divid="i5-test"class="class555"></div>

复制代码

你会看到，当你写a的缩写的时分，输入是<ahref=”"></a>。大概，假如你写img，输入就是</a>。当ZenCoding被加载后，它会剖析一个标签订义到一个形貌该标签的名字、属性(包含它们的按次)和该标签是不是为空的特定的工具中。以是，假如你写<imgsrc=”"alt=”"/>，你会告知ZenCoding这个标签必需是空的，然后“扩大缩写”举动就会在输入之前为它利用特定的划定规矩。
关于片断和缩写，你能够增加一个管道标记，它告知ZenCoding当缩写被睁开的时分光标会被定位到那里。默许的，ZenCoding将光标放在空属性的引号两头和入手下手和封闭标签的两头。
例子

那末，这里注释一下当你写了一个缩写并号召“睁开缩写”举动时产生的事变。起首，它将一个完全的缩写分隔为自力的元素：如许div>a会被分红div和a元素，固然也会保持他们的干系。然后，每一个元素，剖析器先在代码片断内尔后在缩写中寻觅界说。假如它找不到，将会利用元素的名字作为新的标签，并为其增加缩写中界说的id和class。好比，假如你写mytag#example，剖析器在片断或缩写中找不到mytag界说，它就会输入<mytagid=”example”><mytag>。
我们制造了良多默许的CSS和HTML缩写和片断。你会发明进修利用ZenCoding能够增添你的临盆力。
HTML标签对婚配器

关于HTML编码者的另外一个十分罕见的义务是寻觅一个元素的标签对。比方你想选择全部<divid=”content”>标签并将其挪动到别的中央大概删除它。大概有大概你在寻觅一个封闭标签并想晓得它属于谁人入手下手标签。
不幸的是，良多古代开辟工具在该功效方面有所完善。那末我就决意写一个我本人的标签对婚配器作为ZenCoding的一部分。不外它仍然在beta阶段并尚存一些成绩，但它能够事情的很不错并很快。不是扫瞄全部文档(像一般的那种HTML标签对婚配器的做法)，它从光标确当前地位入手下手寻觅相干的标签。这使得它十分快而且高低文有关：它乃至能够用于这段JavaScript代码片断：

1. vartable=<table>;for(vari=0;i<3;i++){table+=<tr>;for(varj=0;j<5;j++){table+=<td>+j+</td>;}table+=</tr>;}table+=</table>;

复制代码

利用缩写包裹

这真的是一个很酷的特征，它将缩写和标签对婚配器的功效兼并到一同了。你有几才发明你必要增加一个包裹元素以修改一个扫瞄器bug？大概你必要增加一个粉饰，好比一个背景图片大概边框到一个块级内容？你必需写入手下手标签，一时打断你的代码，找到相干的点然后封闭标签。这就是“利用缩写包裹”能匡助你的中央。
该功效相称复杂：它请求你输出缩写，然后实行得当的“睁开缩写”举动并将你希冀的文本放到你缩写的最初一个元素内里。假如你没有选择任何文本，它就会启动标签对婚配器并利用了局。它一样能弄分明你的光标的地位：标签的内容内里大概是入手下手和封闭标签两头。依附于它的地位，它会包裹标签的内容或标签自己。
缩写包裹为包裹一般行引进了一个特定的缩写句法。复杂跳转到倍增操纵符前面的数字，好比：ul#nav>li*>a。当ZenCoding发明一个利用不决义的倍增数的时分，它会将它作为一个反复元素：你的章节中有几行，它就会输入几次，并将每行的内容放到反复元素的最初一个子元素内里。
假如你在这段文本表面包裹这段缩写div#header>ul#navigation>li.item$*>a>span：

1. AboutUsProductsNewsBlogContactUp

复制代码

你将会失掉以下了局：

1. <divid="content"><h1></h1><p></p></div>0

复制代码

你能够看到，ZenCoding是一个壮大的文本处置工具。
快速键

• Ctrl+,睁开缩写
  
  
• Ctrl+M婚配对
  
  
• Ctrl+H利用缩写包含
  
  
• Shift+Ctrl+M兼并行
  
  
• Ctrl+Shift+?上一个编纂点
  
  
• Ctrl+Shift+?下一个编纂点
  
  
• Ctrl+Shift+?定位婚配对
  
  

这些快速键是能够自界说的。
在线演示

你已学到良多关于ZenCoding怎样事情和它是怎样使你的编码更简单了。如今为何不本人实验一下呢？由于ZenCoding是用纯JavaScript开辟并迁徙到Python，它乃至能够用于扫瞄器外部，这令它成为引进到CMS的首选。

• Demo(利用Ctrl+,睁开缩写，必要JavaScript撑持)
  
• 中文版演示
  

撑持的编纂器

ZenCoding其实不依附某个特定的编纂器。它是一个只处置文本的杰出的组件：它猎取文本、做一些处置并放回新的文本(或索引，用于标签婚配)。ZenCoding由JavaScript和Python编写，以是它实践上能够运转于任何平台。在Windows，你能够运转JavaScript版本，而Mac和Linux分支可使用Python版。
假如让你的编纂器撑持ZenCoding，你必要写一个特定的能够在你的编纂器和ZenCoding之间转换数据的插件。成绩是一个编纂器大概不会完全的撑持ZenCoding由于它自己的插件体系。好比，TextMate经由过程利用剧本输入交换以后行很容的就撑持了“睁开缩写”功效，可是它不克不及处置标签对婚配由于没有尺度的办法哀求TextMate来选择内容。
完整撑持

• Aptana(跨平台);
  
• Coda,viaTEAforCoda(Mac);
  
• Espresso,viaTEAforEspresso(Mac);
  

部分撑持(只撑持“睁开缩写”)

• TextMate(只能用于Mac机,Windows可使用E-text编纂器替换);
  
• TopStyle;
  
• SublimeText;
  
• GEdit;
  
• DreamweaverCS4
  
• editArea在线编纂器;
  
• ZenCoding在线编纂器中文版
  

Aptana是我次要的开辟情况，它利用一个JavaScript版本的ZenCoding。它也包括良多别的的我用于一样平常事情的工具，以是任何一个新的ZenCoding版本都将会起首对Aptana可用，然后部署到Python并兼容别的的编纂器。
Coda和Espresso插件被出色的TextEditorActions(TEA)平台撑持，由IanBeck开辟。原始的源代码在GitHub上，但我仍是制造了我本人的分支以整合ZenCoding的特征。
总结

良多实验过ZenCoding的人都说它改动了他们写页面的体例。固然另有良多事变要做，另有良多的编纂器必要被撑持和一些文档要写。请扫瞄如今的文档和源代码以寻觅你的成绩的谜底。但愿你喜好ZenCoding!
附：Zencoding的详细用法

遗憾的是，本文原作者并没有申明zencoding的详细用法，神飞以为有需要做以下扼要的申明。这里就以Aptana/Eclipse和Dreamweaver为例，别的编纂器平台暂不形貌，若有疑问能够在批评中与前端察看的网友交换。
Aptana/Eclipse

因为Aptana自己就是基于Eclipse的，以是，ZenCoding也是撑持Eclipse的，只是必要一个EclipseMonkey插件的撑持，Aptana已封装了这个插件，以是假如你利用Aptana，上面的第一步能够跳过。

• 经由过程更新网站安装EclipseMonkey:http://download.eclipse.org/technology/dash/update(假如你利用Aptana，可跳过这一步)
  
• 在你确当前事情往创立一个顶级的项目，给它定名，好比，就叫zencoding
  
• 在新创立的项目中创立scripts文件夹
  
• 解紧缩下载的ZIP插件包到该文件夹。项目布局看起来就像如许:
  
  
  登录/注册后可看大图
  
  
  
• 安装以后，Aptana的菜单栏中的“剧本(Script)”菜单中将会呈现Zencoding相干子菜单
  

注重事项：

• Aptana版的官方插件是基于MAC机的，假如你用的是Windows，必要手动变动快速键(在每一个文件头部的正文片断中变动)
  
• 官方的文件编码有点儿乱，修正官方js的时分，请注重编码成绩，修正不妥会形成相干功效的丧失；
  

DreamWeaver

好动静是，如今已有了ZencodingforDreamWeaver插件，坏动静是，该插件撑持的功效很少，只撑持睁开缩写功效。并且默许的快速键是有效的。只能在“命令”菜单中点击操纵。别的，没有测试该插件是否是只撑持CS4版本。不外对照好的是，作者将本插件的源码也放出了，你能够自界说一个Dreamweaver的插件。
原作者先容：

SergeyChikuyonok是一名俄罗斯的前端开辟工程师和作者，他在优化方面有很年夜的热忱：从图片、JavaScript效果到事情流程和节俭工夫的编码。会见他的主页和他的Twitter。
</p>
层叠样式表（CascadingStyleSheets）的缩写，用于定义HTML元素的显示形式，是W3C推出的格式化网页内容的标准技术。网页设计者必须掌握的技术之一。

不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。

这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。

每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。

Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。

难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.

不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。