emmet的简单使用

  • baagee 发布于 2016-12-13 19:16:38
  • 分类:JavaScript
  • 744 人围观
  • 2 人喜欢

Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生。

是一个文本编辑器的插件,它可以帮助您快速编写HTML和CSS代码,从而加速Web前端开发。下面介绍一下emmet的简单使用:
<!-- 1,生成基本html结构 
方法1:输入'html:5' 按下tab,
方法2: 输入'!' 按下tab
即可生成
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

</body>
</html>
--><!DOCTYPE html>
<html>
 <head> 
  <meta charset="UTF-8" /> 
  <title>的简单使用</title> 
 </head> 
 <body> 
  <div></div> 
  <!--
2,含糊标签名称: 
示例:.wrap>div2>ul.list>.sites
--> 
  <div> 
   <div2> 
    <ul> 
     <li></li> 
    </ul> 
   </div2> 
  </div> 
  <!-- 
3. 带有DOM导航的链式缩写
        > 子节点:在DOM树下一层添加创建一个元素
        + 同级别:在DOM树同一层添加创建一个元素
        ^ 向上层:向上一层添加创建创建一个元素。
 --> 
  <!-- 示例1:.div1>div2>h1+p --> 
  <div> 
   <div2> 
    <h1></h1> 
    <p></p> 
   </div2> 
  </div> 
  <!-- 示例2: .div2>div1^h3 --> 
  <div> 
   <div1></div1> 
  </div> 
  <h></h>3 
  <!--示例3: .div3>.div4>.div9^^p --> 
  <div> 
   <div> 
    <div></div> 
   </div> 
  </div> 
  <p></p> 
  <!--
4. 使用分组来简化你的代码结构
 --> 
  <!--示例1: (.div1>.div2>p)+(.div3>.div4+h3) --> 
  <div> 
   <div> 
    <p></p> 
   </div> 
  </div> 
  <div> 
   <div></div> 
   <h3></h3> 
  </div> 
  <!--示例2: .div2>.div2+h3#h333 --> 
  <div> 
   <div></div> 
   <h3 id="h333"></h3> 
  </div> 
  <!--示例3: table>tr*3>td*4 --> 
  <table> 
   <tbody>
    <tr> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
    </tr> 
    <tr> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
    </tr> 
    <tr> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
    </tr> 
   </tbody>
  </table> 
  <!--示例4: (table>tr*2>td*2)+(.div>.div2>h2>p>span) --> 
  <table> 
   <tbody>
    <tr> 
     <td></td> 
     <td></td> 
    </tr> 
    <tr> 
     <td></td> 
     <td></td> 
    </tr> 
   </tbody>
  </table> 
  <div> 
   <div> 
    <h2> <p><span></span></p> </h2> 
   </div> 
  </div> 
  <!--
5. 插入文本和属性
如果你需要生成HTML,内容和属性也是你常常需要添加的。很多开发人员只是使用Emmet
来生成框架,然后再添加内容。其实你可以在生成页面框架的过程中同时添加属性和内容。
从下面代码可以看到,你输入的文字和属性都可以分别通过大括号和中括号来生成。
--> 
  <!--示例1: h2{aaabbbccc}+p{wwwwwwwpppppppppppp}+span.div2{div2} --> 
  <h2>aaabbbccc</h2> 
  <p>wwwwwwwpppppppppppp</p> 
  <span>div2</span> 
  <!--示例2: h2{aaabbbccc}+p{wwwwwwwpppppppppppp}>span.div2{div2} --> 
  <h2>aaabbbccc</h2> 
  <p>wwwwwwwpppppppppppp<span>div2</span></p> 
  <!--示例3: a[href='www.baidu.com']{百度一下} --> 
  <a href="www.baidu.com">百度一下</a> 
  <!--
6. 添加多个class到一个元素 
这个非常简单,你只需要使用逗号来添加多个class,如下:
--> 
  <!--示例1: .div1.div2.div3>p>span.div4{fdsfdsfg}+(table>form>input) --> 
  <div class="div1 div2 div3"> 
   <p> <span>fdsfdsfg</span> </p>
   <input type="text" />
   <table> 
    <form action=""></form> 
   </table> 
   <p></p> 
  </div> 
  <!-- 7.  重复添加
这可能是最让人舒服的操作了,帮助你重复添加元素:
--> 
  <!--示例1: ul>li*8+.div1>div2+p>span.div3{div3}*2 --> 
  <ul> 
   <li></li> 
   <li></li> 
   <li></li> 
   <li></li> 
   <li></li> 
   <li></li> 
   <li></li> 
   <li></li> 
   <li> 
    <div2></div2> <p><span>div3</span><span>div3</span></p> </li> 
  </ul> 
  <!--示例2: (section>.div2)*3 --> 
  <section> 
   <div></div> 
  </section> 
  <section> 
   <div></div> 
  </section> 
  <section> 
   <div></div> 
  </section> 
  <!-- 8. 自动列表记数 
如果你需要按顺序生成HTML元素,这个技巧你一定喜欢,使用$符号可
以帮助你生成一系列数字,支持class,id,属性,内容等等。如下:
--> 
  <!--示例1: ul>li.item${item $}*3>a[href=www.baidu.com]{baidu} --> 
  <ul> 
   <li>item 01<a href="www.baidu.com">baidu</a></li> 
   <li>item 02<a href="www.baidu.com">baidu</a></li> 
   <li>item 03<a href="www.baidu.com">baidu</a></li> 
  </ul> 
  <!-- 示例2:img[src=000000$.jpg][alt=hahhaah]*4 --> 
  <img src="0000001.jpg" alt="hahhaah" /> 
  <img src="0000002.jpg" alt="hahhaah" /> 
  <img src="0000003.jpg" alt="hahhaah" /> 
  <img src="0000004.jpg" alt="hahhaah" /> 
  <!--示例3: .div$*3>h$*2>p{$$}*3 --> 
  <div> 
   <h1> <p>0001</p> <p>0002</p> <p>0003</p> </h1> 
   <h2> <p>0001</p> <p>0002</p> <p>0003</p> </h2> 
  </div> 
  <div> 
   <h1> <p>0001</p> <p>0002</p> <p>0003</p> </h1> 
   <h2> <p>0001</p> <p>0002</p> <p>0003</p> </h2> 
  </div> 
  <div> 
   <h1> <p>0001</p> <p>0002</p> <p>0003</p> </h1> 
   <h2> <p>0001</p> <p>0002</p> <p>0003</p> </h2> 
  </div> 
  <!--示例4: table>tr*4>td{晚上想吃vghhftffv}3 --> 
  <table> 
   <tbody>
    <tr> 
     <td>晚上想吃vghhftffv</td> 
    </tr> 
    <tr> 
     <td>晚上想吃vghhftffv</td> 
    </tr> 
    <tr> 
     <td>晚上想吃vghhftffv</td> 
    </tr> 
   </tbody>
  </table> 
  <!--示例5:
table[border=2px][align=center]>tr*3>td[height=40px][width=400px][align=center]{测试}*3
 --> 
  <table border="2px"> 
   <tbody>
    <tr> 
     <td height="40px" width="400px">测试</td> 
     <td height="40px" width="400px">测试</td> 
     <td height="40px" width="400px">测试</td> 
    </tr> 
    <tr> 
     <td height="40px" width="400px">测试</td> 
     <td height="40px" width="400px">测试</td> 
     <td height="40px" width="400px">测试</td> 
    </tr> 
    <tr> 
     <td height="40px" width="400px">测试</td> 
     <td height="40px" width="400px">测试</td> 
     <td height="40px" width="400px">测试</td> 
    </tr> 
   </tbody>
  </table>  
 </body>
</html>


转载请说明出处:baagee博客 » emmet的简单使用
标签: HTML emmet

评论

点击图片切换
还没有评论,快来抢沙发吧!