前端高效emmit快捷键

Posted 2020-08-09 青幽草

• 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插件