码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2015-08-10 23:57:42      阅读:138      评论:0      收藏:0      [点我收藏+]

标签:

写完命令后按键 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语法实例(帮助快速开发)

标签:

原文地址:http://www.cnblogs.com/windtony/p/4719557.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!