前端高效emmit快捷鍵

• Ctrl+N 新建空白文檔

• Ctrl+S 保存為 .html 格式

• ！+Tab 自動生成一段 HTML5 的空模版

<!-- div>ul>li -->
    <div>
        <ul>
            <li></li>
        </ul>
    </div>
    <!-- 
    子代：>
    兄弟：+
    父代:^
    重復：*
    成組 ()
    ID  #
    Class .
    屬性：[]
     -->

    <!-- div+div>p>span+em^bq -->
    <div></div>
    <div>
        <p><span></span><em></em></p>
        <blockquote></blockquote>
    </div>

    <!-- ul>li*5 -->
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
<!-- div>dl>((dt+dd)*3)+footer>p -->
<div>
    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <footer>
            <p></p>
        </footer>
    </dl>
</div>

<!-- input[type=button]*3 -->
<input type="button">
<input type="button">
<input type="button">


<!-- (div+p#test>span.test2.test3)*5+p[name="hello"]>div.test4^a*5     -->

<div></div>
<p id="test"><span class="test2 test3"></span></p>
<div></div>
<p id="test"><span class="test2 test3"></span></p>
<div></div>
<p id="test"><span class="test2 test3"></span></p>
<div></div>
<p id="test"><span class="test2 test3"></span></p>
<div></div>
<p id="test"><span class="test2 test3"></span></p>
<p name="hello">
    <div class="test4"></div>
</p>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>

zen coding是一個俄國人在2009年開發的一個插件。它能夠仿照CSS選擇器的描述自動生成想要的代碼。 要想在編輯器中使用zen coding編寫代碼，要安裝相應的插件。例如sublime對應的Emmit插件