元素類型
Zen Coding有兩個(gè)主要的元素類型：“片段(snippets)” 和 “縮寫(abbreviations)”。片段就是隨意的代碼碎片，而縮寫是標(biāo)簽定義。通過(guò)片段，你可以寫出你想要的任何代碼，它也會(huì)照你寫的格式輸出；但是你必須手動(dòng)的格式化它(使用\n 和\t實(shí)現(xiàn)換行和縮進(jìn)) 并將${child}變量放到你想要輸出子元素的地方，就像這樣：cc:ie6>style。如果你不使用${child}變量，子元素將會(huì)輸出于代碼片段的后面。
有了縮寫，您必須編寫標(biāo)記定義，而且語(yǔ)法是非常重要的。通常，你必須寫一個(gè)簡(jiǎn)單的帶有所有默認(rèn)的屬性的標(biāo)簽，比如: <a href=”"></a>。當(dāng)Zen Coding被加載后，它會(huì)解析一個(gè)標(biāo)簽定義到一個(gè)描述該標(biāo)簽的名字、屬性(包括它們的順序)以及該標(biāo)簽是否為空的特定的對(duì)象中。所以，如果你寫<img src=”" alt=”" />，你會(huì)告訴Zen Coding這個(gè)標(biāo)簽必須是空的，然后“擴(kuò)展縮寫”行為就會(huì)在輸出之前為它使用特定的規(guī)則。
對(duì)于片段和縮寫，你可以添加一個(gè)管道符號(hào)，它告訴Zen Coding當(dāng)縮寫被展開(kāi)的時(shí)候光標(biāo)會(huì)被定位到哪里。默認(rèn)的，Zen Coding 將光標(biāo)放在空屬性的引號(hào)中間以及開(kāi)始和關(guān)閉標(biāo)簽的中間。
例子
那么，這里解釋一下當(dāng)你寫了一個(gè)縮寫并召喚“展開(kāi)縮寫”行動(dòng)時(shí)發(fā)生的事情。首先，它將一個(gè)完整的縮寫分開(kāi)為獨(dú)立的元素：這樣div>a 會(huì)被分成div 和a 元素，當(dāng)然也會(huì)維持他們的關(guān)系。然后，每個(gè)元素，解析器先在代碼片段內(nèi)而后在縮寫中尋找定義。如果它找不到，將會(huì)使用元素的名字作為新的標(biāo)簽，并為其添加縮寫中定義的id和class。比如，如果你寫mytag#example，解析器在片段或縮寫中找不到mytag定義，它就會(huì)輸出<mytag id=”example”><mytag>。
我們制作了很多 默認(rèn)的CSS 和 HTML縮寫和片段。你會(huì)發(fā)現(xiàn)學(xué)習(xí)使用Zen Coding可以增加你的生產(chǎn)力。
HTML 標(biāo)簽對(duì)匹配器
對(duì)于HTML編碼者的另一個(gè)非常常見(jiàn)的任務(wù)是尋找一個(gè)元素的標(biāo)簽對(duì)。例如你想選擇整個(gè)<div id=”content”>標(biāo)簽并將其移動(dòng)到其它地方或者刪除它�；蛘哂锌赡苣阍趯ふ乙粋�(gè)關(guān)閉標(biāo)簽并想知道它屬于那個(gè)開(kāi)始標(biāo)簽。
不幸的是，很多現(xiàn)代開(kāi)發(fā)工具在該功能方面有所欠缺。那么我就決定寫一個(gè)我自己的標(biāo)簽對(duì)匹配器作為Zen Coding的一部分。不過(guò)它依然在beta階段并尚存一些問(wèn)題，但它可以工作的很不錯(cuò)并很快。不是瀏覽整個(gè)文檔(像通常的那種HTML標(biāo)簽對(duì)匹配器的做法)，它從光標(biāo)的當(dāng)前位置開(kāi)始尋找相關(guān)的標(biāo)簽。這使得它非�？觳⑶�上下文無(wú)關(guān)：它甚至可以用于這段JavaScript代碼片段：
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>';
使用縮寫包裹
這真的是一個(gè)很酷的特性，它將縮寫和標(biāo)簽對(duì)匹配器的功能合并到一起了。你有多少才發(fā)現(xiàn)你需要添加一個(gè)包裹元素以修正一個(gè)瀏覽器bug？或者你需要添加一個(gè)裝飾，比如一個(gè)背景圖片或者邊框到一個(gè)塊級(jí)內(nèi)容？你必須寫開(kāi)始標(biāo)簽，臨時(shí)打斷你的代碼，找到相關(guān)的點(diǎn)然后關(guān)閉標(biāo)簽。這就是“使用縮寫包裹”能幫助你的地方。
該功能相當(dāng)簡(jiǎn)單：它要求你輸入縮寫，然后執(zhí)行適當(dāng)?shù)摹罢归_(kāi)縮寫”行動(dòng)并將你期望的文本放到你縮寫的最后一個(gè)元素里面。如果你沒(méi)有選擇任何文本，它就會(huì)啟動(dòng)標(biāo)簽對(duì)匹配器并使用結(jié)果。它同樣能搞清楚你的光標(biāo)的位置：標(biāo)簽的內(nèi)容里面或者是開(kāi)始和關(guān)閉標(biāo)簽中間。依賴于它的位置，它會(huì)包裹標(biāo)簽的內(nèi)容或標(biāo)簽本身。
縮寫包裹為包裹個(gè)別行引入了一個(gè)特定的縮寫句法。簡(jiǎn)單跳轉(zhuǎn)到倍增操作符后面的數(shù)字，比如：ul#nav>li*>a。當(dāng)Zen Coding 發(fā)現(xiàn)一個(gè)使用未定義的倍增數(shù)的時(shí)候，它會(huì)將它作為一個(gè)重復(fù)元素：你的章節(jié)中有多少行，它就會(huì)輸出多少次，并將每行的內(nèi)容放到重復(fù)元素的最后一個(gè)子元素里面。
如果你在這段文本外面包裹這段縮寫div#header>ul#navigation>li.item$*>a>span：
About Us
Products
News
Blog
Contact Up
你將會(huì)得到以下結(jié)果：
<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是一個(gè)強(qiáng)大的文本處理工具。
出處：前端觀察
責(zé)任編輯：bluehearts
上一頁(yè) Zen Coding:快速編寫HTML/CSS代碼 [2] 下一頁(yè) Zen Coding:快速編寫HTML/CSS代碼 [4]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 3 頁(yè) Zen Coding:快速編寫HTML/CSS代碼 [3]
