Emmet语法实例(帮助快速开发)

写完命令后按键 tab 就可以生成了.

应用于大多数已经内置或可以安装emmet的编辑器
下级元素命令 >

<!--div>p-->
    <div>
        <p></p>
    </div>

同级元素命 +

<!--div+p-->

<div></div>
<p></p>

上级元素命令 ^

<!--div>p>span^a-->
<div>
　　<p><span></span></p>
　　<a href=""></a>
</div>

分组命令 ()

<!--div>(header>ul>li)+footer>p-->
<div>
　　<header>
　　　　<ul>
　　　　　　<li></li>
　　　　</ul>
　　</header>
　　<footer>
　　　　<p></p>
　　</footer>
</div>

乘法命令 *

<!--div*4-->
<div></div>
<div></div>
<div></div>
<div></div>

自增符号 $

<!--div.time$*4-->
<div class="time1"></div>
<div class="time2"></div>
<div class="time3"></div>
<div class="time4"></div>

ID和类属性

<!--div.class和div#id-->
<div class="test"></div>
<div id="test"></div>

自定义属性文本 []

<!--input[type/name="textbook"]或input[type="textbook" name="textbook"]-->
<input type="text" name="textbook" />
<input type="textbook" />
<input type="textbook" name="textbook" />

隐式标签

<!--.class-->
<div class="test"></div>
<div id="test"></div>

html自定义标签

<!--abc-->
<abc></abc>

Emmet语法实例(帮助快速开发)

推荐阅读