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>