Zencoding

from: http://blog.chinaunix.net/uid-22414998-id-3184766.html

1、前言

剛看完球，遼足0-0平北京國安，穩穩妥妥各拿1分，皆大歡喜。恆大4-0狂勝長春亞泰。期待恆大51主場之戰，死磕全北現代。最近兩天一直在研究BootStrap這個東東，做了幾個例子，感覺挺好的，五嶽之巔也向大家推薦。

但是心頭上最激動的除了足球就是Zencoding，於是本文欲罷不能，終於產出。

2、簡介

我不是一個愛賣弄關子的人，喜歡直奔主題。所以先介紹What is the Zencoding？一個俄國小夥子Sergey Chikuyonok，主導編寫了Zencoding項目，主要是仿CSS選擇器語法來快速碼HTML代碼。能有多快？馬上告訴你。

想快速知道它的作用麼，來吧，給你一個大開眼界的機會。

首先看看這個zencoding代碼：

html>head>(title+style+script[src=abc$.js]*3)+body>((.content>.nav>ul>li*5>a>span)+(.sidebar>.top+.middle+.bottom)+.main>.acticle*3>h1{文章標題$}+p)+.footer{版權信息}

哦，你會說，這行代碼如何呢？請翻滾此文一直到末尾，有一個綜合性的練習，練習題目就是用這行代碼生成的html文件。

沒錯，你沒看錯，那麼多的一大篇html代碼就是由以上這句話產生的。

好奇了吧，想學了吧。看下文吧。

3、環境配置

在上一篇博客《超級牛B編碼王（一）：Sublime2之WIN7下安裝Zencoding》中詳細介紹了Sublime2下Zencoding的安裝，當然Zencoding就是一個插件，也有其他比如Notepad、DW等編輯器的版本，大家到“http://zencoding.org/”這裏就能全部網羅。關於環境搭建，不多說，第一篇寫的很詳細了。

4、注意事項

ZC項目更新速度較快，大家現在能在百度裏搜到的教程，都不太全，未能完全展示Zencoding之力。所以本文將較爲完備地由淺入深講解它。但隨着時間的流逝，半年或一年後，本文也將因項目發展而變得不全，不過基本要點是沒有變的。

5、QuickStart

(1)如下圖所示，到github裏搜索zencoding。

爲什麼要這麼做，看了搜索結果你就知道了：

搜索結果告訴我們，zencoding有多種語言擴展和IDE擴展，所以不僅能寫HTML和CSS也能寫Ruby和PHP等，具體內容請詳見圖片上的“more >>”。

(2)在上圖中點擊第一項“sergeche/zen-coding”進入項目頁。然後向下翻啊翻，可以看到如下一個小節，就是使用說明：

Current features of abbreviation engine:

A.ID and CLASS attributes: div#page.section.main.

B.Custom attributes: div[title], a[title="Hello world" rel], td[colspan=2].

C.Element multiplication: li*5 will output tag five times.

D.Item numbering with $ character: li.item$*3 will output tag three times, replacing $ character with item number.

E.Multiple ‘$’ characters in a row are used as zero padding, i.e.: li.item$$$ → li.item001

F.Abbreviation groups with unlimited nesting: div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer. You can literally write a full document markup with just a single line.

G.Filters support

H.div tag name can be omitted when writing element starting from ID or CLASS: #content>.section is the same as div#content>div.section.

爲了容易分辨，我加了隔行變色。

————————————————————————————————————

*** 不要着急，現在就開始詳細講解了 ***

————————————————————————————————————

(3)“#”表id，“.”表類，“+”表並列

使用sublime建立一個foo.html保存到桌面，然後Win7下快捷鍵Ctrl+Alt+Enter調出zencoding的心印(koan)，koan一詞源於佛語，等你學完全文才能明白它的含義。

寫入如下代碼，就可以產生一組HTML結構，看圖吧:

寫完Enter Koan後面的代碼後，上面就出現了HTML結構。這個例子可以看出一般的zencoding格式是“HTML標籤#xxx”或者“HTML標籤.yyy”，而#xxx表示id爲xxx，.yyy說明class爲yyy。最後“+”表示標籤的並列。

小練習1：

請大家完成以下HTML的zencoding代碼，時間要求30秒以內：

<div id="header"></div>
<div class="content"></div>
<div class="sidebar"></div>
<div id="footer"></div>

做不完本練習，不能往下學，打牢基礎最重要。

小練習2：

請大家完成以下HTML的zencoding代碼，時間要求35秒以內：

<div id="header"></div>
<div id="content" class="aticle posts"></div>
<div id="sidebar" class="ad"></div>
<div id="footer"></div>

做不完本練習，更不能往下學，因爲你根本就沒明白怎樣用一行zencoding寫出來。

如果你5分鐘後還是做不出來，教程最後一部分有練習題答案，悲催的您去看看吧。後續內容你會更不適應。但那些一下子能明白過來的人或是直接做對的同志，嗯，悟性很好，趁熱打鐵，再接再厲！

(4)“>”指子內容

很容易理解，比如寫下“div>p>span>a”這個Koan，那麼就有這個HTML結構：

<div>
    <p><span><a href=""></a></span></p>
</div>

其中，a標籤裏的屬性href是zencoding智能加入的。總之“>”產生了標籤的層級，而且zencoding會自動縮進哦。來接着練習吧。

小練習3：

按照HTML代碼，回推Koan。

<html>
    <head></head>
    <body>
        <div class="header"></div>
        <div class="content"></div>
        <div class="footer"></div>
    </body>
</html>

小練習4：

剛纔練習3做的很爽吧，在這裏又給你放了一個練習，試試手氣吧。Try it hard!

<html>
    <head>
        <title></title>
        <style type="text/css"></style>
        <script type="text/javascript"></script>
    </head>
    <body>
        <div class="content">
            <div class="nav"></div>
            <div class="sidebar"></div>
            <div class="main"></div>
        </div>
        <div class="footer"></div>
    </body>
</html>

沒錯，也是一句Koan就OK的事！

如果你錯了，恭喜你，你爲下一步打下了重要的基礎。你做對了，不是蒙的就是蒙的。

(5)“()”指同級範圍

理論敘述是枯燥的，看例子是愉快的。剛纔的小練習4，答案是

html>(head>title+style+script)+body>+(div.content>div.nav+div.sidebar+div.main)+div.footer

呵呵，對照HTML代碼，你自己該想明白“()”是幹什麼的了吧。這也就是沒有()的情況下head中的style會出現在別處。

這節沒有練習，和大家玩了一個朝三暮四。

(6)“[]”表屬性

如何完成<h1 title="something"></h1>的屬性寫法呢，就是用“[]”，即如下Koan：h1[title=someting]。

好了又到了練習時間。

小練習5：

按照HTML代碼，回推Koan。

<div id="content">
    <div class="aticle">
        <h1 class="ok" title="papername" sytle="color:#000;"></h1>
        <h3 title="subname" sytle="color:#fff;" class="no"></h3>
        <p class="words"></p>
    </div>
</div>

這個練習，我感覺出的很好，即使你做出來了，也要認真地看我給出的答案，因爲其中有玄妙啊！

(6)#和.的簡寫

Koan中：div.ok等同於.ok，div#no等同於#no，所以直接寫.或#時，默認爲Div標籤是也。

小練習6：

用簡寫法改寫練習5。

(7)“*”表標籤克隆

如果在Koan中寫入一下內容：ul>li*5，就會產生以下HTML結構：

那麼，如果每個li元素中還存在<a>與<span>呢，沒事照下圖辦：

OK，想必大家想明白了*號的用法，繼續練習。

小練習7：

按照HTML代碼，回推Koan。

<div class="header">
    <ul class="nav">
        <li><a href="" sytle="block"><span>五嶽之巔</span></a></li>
        <li><a href="" sytle="block"><span>五嶽之巔</span></a></li>
        <li><a href="" sytle="block"><span>五嶽之巔</span></a></li>
        <li><a href="" sytle="block"><span>五嶽之巔</span></a></li>
        <li><a href="" sytle="block"><span>五嶽之巔</span></a></li>
        <li><a href="" sytle="block"><span>五嶽之巔</span></a></li>
    </ul>
</div>

沒錯，什麼都做出來了，就是裏面的“五嶽之巔”弄不出來吧，這是我給你下的套，爲下一節埋一個伏筆。其實我這人挺好的，總這麼折騰還不是想讓大家自己發現問題，自己開始思考嘛。

(8)“{}”表標籤內容

你在Koan中寫：div>span>h1{這是標題}，自己看看會出現什麼吧。

此節無練習，只因太簡單。

(9)“$”表連續數

其實好理解，不說廢話，看圖吧：

所以不論在屬性如li.li-$或是id或是{}中的內容，$就代表從1開始的序列，就和Excel表一格寫一個1，下拉改格拖出2,3,4,5,6的意思一樣。

手癢癢了吧，該練個習了。

小練習8：

按照HTML代碼，回推Koan。難度只在“01、02...”的表示上。

<table>
    <thead>
        <td class="col1"></td>
        <td class="col2"></td>
        <td class="col3"></td>
        <td class="col4"></td>
    </thead>
    <tbody>
        <tr class="row01">
            <td class="col1"></td>
            <td class="col2"></td>
            <td class="col3"></td>
            <td class="col4"></td>
        </tr>
        <tr class="row02">
            <td class="col1"></td>
            <td class="col2"></td>
            <td class="col3"></td>
            <td class="col4"></td>
        </tr>
        <tr class="row03">
            <td class="col1"></td>
            <td class="col2"></td>
            <td class="col3"></td>
            <td class="col4"></td>
        </tr>
    </tbody>
    <tfoot>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tfoot>
</table>

好了，至此，講完了Zencoding的主要而且最常用的內容。時間剛好到凌晨12點整，這篇BLOG花費了我近3個小時的時間。呵呵，不容易啊。

最後一個綜合性的練習，做一下吧，請大家一句Koan搞定它，千萬別偷看文章最開始答案啊，我想你應該可以自己完成了吧：

*******************這就是文章開頭的那句Koan生成的代碼*********************************

<html>
    <head>
        <title></title>
        <style type="text/css"></style>
        <script type="text/javascript" src="abc1.js"></script>
        <script type="text/javascript" src="abc2.js"></script>
        <script type="text/javascript" src="abc3.js"></script>
    </head>
    <body>
        <div class="content">
            <div class="nav">
                <ul>
                    <li><a href=""><span></span></a></li>
                    <li><a href=""><span></span></a></li>
                    <li><a href=""><span></span></a></li>
                    <li><a href=""><span></span></a></li>
                    <li><a href=""><span></span></a></li>
                </ul>
            </div>
        </div>
        <div class="sidebar">
            <div class="top"></div>
            <div class="middle"></div>
            <div class="bottom"></div>
        </div>
        <div class="main">
            <div class="acticle">
                <h1>文章標題1</h1>
                <p></p>
            </div>
            <div class="acticle">
                <h1>文章標題2</h1>
                <p></p>
            </div>
            <div class="acticle">
                <h1>文章標題3</h1>
                <p></p>
            </div>
        </div>
        <div class="footer">版權信息</div>
    </body>
</html>

其實，這篇並不是最後一篇，最後一篇要寫filter規則，今天太晚了，明早還有一上午課，最近一兩天抽空再寫吧。

晚安，大家。晚安，自己。

答案：

練習1：div#header+div.content+div.sidebar+div#footer

練習2：div#header+div#content.aticle.posts+div#sidebar.ad+div#footer

練習3：html>head+body>div.header+div.content+div.footer

練習4：html>(head>title+style+script)+body>(div.content>div.nav+div.sidebar+div.main)+div.footer

練習5：div#content>div.aticle>h1.ok[title=papername sytle=color:#000;]+h3[title=subname][sytle=color:#fff;].no+p.words

（注意：1、id或class與屬性的先後位置，是否無關？；2、並列屬性的寫法，是否很靈活？3、爲什麼這個例子不用()，而上一個例子必須用呢？）

練習6：#content>.aticle>h1.ok[title=papername sytle=color:#000;]+h3[title=subname][sytle=color:#fff;].no+p.words

練習7：div.header>ul.nav>li*6>a[sytle=block]>span{五嶽之巔}

練習8：table>(thead>td.col$*4)+(tbody>tr.row$$*3>td.col$*4)+tfoot>td*4

五嶽之巔，辛苦原創，歡迎轉載，轉載請必須註明出處與原創作者，謝謝！

HayesPan

發佈了4 篇原創文章 · 獲贊 3 · 訪問量 4萬+

私信關注

再談23種設計模式（3）：行爲型模式（學習筆記）

Power Automate Desktop 安裝完，登錄後老是提示one driver 錯誤

微前端學習筆記(4):從微前端到微模塊之EMP與hel-micro方案探索

微前端學習筆記（1）：微前端總體架構概述，從微服務發微

985 碩士程序員，空窗 4 個月沒有 Offer！

一文搞懂 Spring 循環依賴

賽博鬥地主——使用大語言模型扮演Agent智能體玩牌類遊戲。

VScode右鍵打開(添加到右鍵)

記一次 .NET某工控視覺自動化系統卡死分析

WindowsServer--SQL Server搭建主從同步實現讀寫分離 - 事務性分發

acm代碼模版

UBUNTU下雙顯示器設置

multimap排序

C++ const相關問題 CV限定問題

C++中的臨時對象（拷貝構造函數）

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結