首页 > 其他 > 详细

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

时间:2015-08-10 23:55:49      阅读:318      评论: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
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!