Zen Coding 简单迅速的HTML撰写

Zen Coding 是个文字编写器的软件。在应用Zen Coding的文字编写器中,能够用简洁明了的编码来撰写基本的HTML编码,这个专用工具巨大的简化了HTML撰写。

比如下列HTML编码:

拷贝编码
编码以下:

<!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="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF⑻" />
</head>
<body>
<div id="header">
<div id="logo"></div>
<ul id="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>
</body>
</html>

根据Zen Coding,1行便可:

拷贝编码
编码以下:

html:xt>div#header>div#logo+ul#nav>li.item-$*5>a

这里是线上DEMO(便捷键不起功效的,请查验将会的便捷键矛盾。如搜狗搜索键入法会占有“Ctrl+,”)

Zen Coding的缩写标准一些相近CSS挑选器:

  • id和class:如 div#main.list.item 表明的是<div id="main" class="list item"></div>
  • 别的特性能够这样:div[title], a[title="Hello world" rel], td[colspan=2]
  • 反复元素:li*3将輸出3个<li></li>
  • 反复元素数据编号:li.list-$$*2将被拓展成 <li class="list-01"></li><li class="list-02"></li> 。好几个$放在1起的情况下,前面的$将做为0来弥补位数。
  • 能够用括号来排序:div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer
  • Filters适用,应用不一样的主要参数,将获得彻底不一样的結果

别的关键作用

默认设置的除HTML/XML/XSL/CSS/HAML缩写外,Zen Coding 还出示了别的1些便捷编码撰写的作用

简写包裹(Wrap with Abbreviation)。

依据光标的部位或文字挑选状况,键入编码简写后获得要想的最后编码。

拷贝编码
编码以下:

You walk into the room
With your pencil in your hand
You see somebody naked
And you say, Who is that man?
You try so hard
But you don't understand
Just what you'll say
When you get home
Because something is happening here
But you don't know what it is
Do you, Mister Jones?

以上文本用“ul>li*>span”包裹后会获得下面的编码:

拷贝编码
编码以下:

<ul>
<li><span>You walk into the room</span></li>
<li><span>With your pencil in your hand</span></li>
<li><span>You see somebody naked</span></li>
<li><span>And you say, Who is that man?</span></li>
<li><span>You try so hard</span></li>
<li><span>But you don't understand</span></li>
<li><span>Just what you'll say</span></li>
<li><span>When you get home</span></li>
<li><span>Because something is happening here</span></li>
<li><span>But you don't know what it is</span></li>
<li><span>Do you, Mister Jones?</span></li>
</ul>

标识配对(Balance Tag)

ZC(Zen Coding)出示了1个迅速挑选元素内全部內容的方式

编写点(Edit Point)

由ZC拓展出来的编码是沒有內容的,此作用则能够迅速的精准定位到內容编写点处

最终

普遍的IDE如Ecliplse/Aptana,Notepad++,TextMage,Dreamweaver,UltraEdit,Visual Studio等,都早已有官方或第3方的软件适用。具体上因为Zen Coding的关键编码有Javascript和Python两种語言版本号,在引进了相应的JS文档后,访问器中的文字编写地区都可以以应用Zen Coding了。