Zen Coding simple example

编辑器 Komodo Edit 6

Zen Coding version 0.7

 

起用快捷键:

• Balance Tag:   Ctrl + B
• Decrement Number By 1:  Ctrl + Shift + Down
• Increment Number By 1: Ctrl + Shift + Up
• Expand Abbriviation: Ctrl + /
• Wrap With Abbriviation: Ctrl + Shift + ?
• Remove Tag: Ctrl + D

examples:

    <!--dl>(dt+dd)-->
    <dl>
        <dt></dt>
        <dd></dd>
    </dl>
    
    <!--a[href=#]{Click here}-->
    <a href="#">Click here</a>
    
    <!--p>a{here}+span{to continue}-->
    <p><a href="">here</a><span>to continue</span></p>
    
    <!--p>a{one}+em{two}-->
    <p><a href="">one</a><em>two</em></p>
    
    <!--p>a>{one}+em{two}-->
    <p><a href="">one
            <em>two</em>
        </a></p>
    
    <!--ul>li*>a{Click at $#}-->
    one
    <ul>
        <li><a href="">click at one</a></li>
    </ul>
    <!--ul>li>a{Click at $#}-->
    one
    <ul>
        <li><a href="">at one</a></li>
    </ul>
    
    <!--ul>li*3>a{Click at $#}-->
    one
    <ul>
        <li><a href="">click at one</a></li>
        <li><a href="">click at one</a></li>
        <li><a href="">click at one</a></li>
    </ul>
    
    <!--span[title=$#]{Element’s title is $#}-->
    one
    <span title="one">title is one</span>
    
    <!--span[title=$#]{Element’s title is $#}*3-->
    one
    <span title="one">title is one</span>
    <span title="one">title is one</span>
    <span title="one">title is one</span>
    
    <!--ul>li>span{$#}+{ }+a[title=$#]{$#}-->
    one
    <ul>
        <li>
            <span>one</span> 
            <a href="" title="one">one</a>
        </li>
    </ul>
    
    <!--ol>li*|t-->
    1. list item one
    2. list item two
    3. list item three
    
    <ol>
        <li>list item one</li>
        <li>list item two</li>
        <li>list item three</li>
    </ol>
    
    <!--Ctrl + D-->
    <a href="#">test</a>
    test
    
    <li>AAA</li>
    
    <!--Ctrl + Shift + Up/Down-->
    25
    
    
    
    <!--li*4>span.item$-->
    <li><span class="item1"></span></li>
    <li><span class="item2"></span></li>
    <li><span class="item3"></span></li>
    <li><span class="item4"></span></li>
    
    <!--li*4>span{title$}-->
    <li><span>title1</span></li>
    <li><span>title2</span></li>
    <li><span>title3</span></li>
    <li><span>title4</span></li>