ZenCoding 我的理解和總結

個人理解：ZenCoding是一個html簡寫的語法，能夠最快速的生成html。

很多IDE應該都支持，我用的intellij idea是支持的。

ZenCoding表示和CSS/JS有相通之處，好比說 . 表示的類，#表示的是id， >表示子代元素。 特殊的幾點是：+表示兄弟元素。
{xxx}表示內容
[xxx]表示屬性

直接上例子：

例子1：

.testDiv 或者 div.testDiv
=> <div class="testDiv"></div>

從上述例子能夠發現

a. . 表示的是class

b.ZenCoding默認div元素。

 

例子2：

#divId => <div id="divId"></div>

從上述例子能夠發現，#表示的是ID，同JS和CSS。

例子3：

.nav>ul.menu>li.list*3 => <div class="nav">
    <ul class="menu">
        <li class="list"></li>
        <li class="list"></li>
        <li class="list"></li>
    </ul>
</div>

從上述例子能夠發現,> 大於符號表示的子代元素。   *N 表示的是重複多少個。

例子4：

.content1+.content2+.content3 => <div class="content1"></div>
<div class="content2"></div>
<div class="content3"></div>

從上述例子能夠發現,+表示的兄弟節點。

例子5：

(#one>ui.nav>li.list*2)+(#two>p>span.content) => <div id="one">
    <ui class="nav">
        <li class="list"></li>
        <li class="list"></li>
    </ui>
</div>
<div id="two">
    <p><span class="content"></span></p>
</div>

例子6：

span.color{red} => <span class="color">red</span>

從上述例子能夠發現,{xxx}表示內容。

例子7：

a.to_main[href='www.baidu.com']{百度} => <a href="www.baidu.com" class="to_main">百度</a>

從上述例子能夠發現,[key=value]表示屬性，其格式爲前爲屬性名後爲值。

例子8：

.one.two.three => <div class="one two three"></div>

從上述例子能夠發現,一個div支持多個class的。

例子9：

ul.menu>li.item${item_$$}*3 => <ul class="menu">
    <li class="item1">item_01</li>
    <li class="item2">item_02</li>
    <li class="item3">item_03</li>
</ul>

從上述例子能夠發現,$能夠從0開始隨機生成數，一個$表示從1開始，二個$表示從01開始，很是方便。

 

例子10

form>.control-group>(.radio>(label>input[type="radio",name="only"]{測試$}))*4 => <form action="">
    <div class="control-group">
        <div class="radio"><label for=""><input type="radio" name="only">測試1</label></div>
        <div class="radio"><label for=""><input type="radio" name="only">測試2</label></div>
        <div class="radio"><label for=""><input type="radio" name="only">測試3</label></div>
        <div class="radio"><label for=""><input type="radio" name="only">測試4</label></div>
    </div>
</form>

說明：

1. [] 表示的是屬性，其爲數組屬性，若是有多個屬性使用 [type="radio",name="only",xxx] 利用逗號分隔。

2. {}表示的值。

3. $表示的依次遞增。

 

例子11

.dropdown>button.btn.btn-primary.dropdown-toggle>span.caret
=>
<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle"><span class="caret"></span></button>
</div>

說明:

從上述標紅的代碼能夠知道若一個元素有多個class 那麼只須要不停的使用. 就能夠了。

綜上：

ZenCoding我的以爲的經常使用方法都在上面了，若是還有其餘經常使用的，煩請補充。

我的寫的不免有錯誤和遺漏，歡迎指正。

我也是初學者。