Emmet — the essential toolkit for web-developers

最新推荐文章于 2024-08-30 09:41:01 发布

小肥侠大头

最新推荐文章于 2024-08-30 09:41:01 发布

阅读量758

点赞数

分类专栏：工欲善其事必先利其器

本文链接：https://blog.csdn.net/youleiy/article/details/8762656

版权

工欲善其事同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

必先利其器

1 篇文章 0 订阅

订阅专栏

今天重装Sublime，才发现ZenCoding早已更名为Emmet ['emɪt] 了，温习了一遍语法

下面是第一道开胃菜，请使用sublime建立一个test.html保存到桌面，然后Win7下快捷键Ctrl+Alt+Enter调出zencoding的心印(koan)，koan一词源于佛语

输入：

#page>div.logo+ul#navigation>li*5>a{Item $}

Emmet 会自动转换为

<div id="page">
    <div class="logo"></div>
    <ul id="navigation">
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
        <li><a href="">Item 4</a></li>
        <li><a href="">Item 5</a></li>
    </ul>
</div>

是不是很神奇！下面详细介绍 Emmet 的语法

1. 选择器

同JQUERY 语法意义，Emmet 使用#表示id， . 表示类。

E#id
使用id的元素(div#content, p#intro, span#error);
E.class
使用类的元素(div.header, p.error.critial). 你也可以联合使用class和idID: div#content.column.width;

2. 层级关系

E>N
子代元素(div>p, div#footer>p>span);
E+N
兄弟元素(h1+p, div#header+div#content+div#footer);
（）表示同级兄弟关系
[] 表示元素属性， h1[tile=sample] 表示 <h1 tile="sample"></h1>

例如，

<html>
<head>
<title></title>
<style type="text/css"></style>
<script type="text/javascript"></script>
</head>
<body>
<div class="content">
<div class="nav"></div>
<div class="sidebar"></div>
<div class="main"></div>
</div>
<div class="footer"></div>
</body>
</html>

如何使用Emmet 语法实现呢？

html>html>title+style[type=text/css]+script[type=text/javascript]+body>(div.content>div.nav+div.sidebar+div.main)+div.footer

请注意括号的位置

3. 快速输入

E*N
元素倍增(ul#nav>li*5>a);
E$*N
条目编号 (ul#nav>li.item-$*5);

例如，div#header>img.logo+ul#nav>li*4>a，表示

假设你想生成class为item1、item2和item3的3个<div>元素。你可以写成这样的缩写，div.item$*3:

1
2
3

<div class="item1"></div>

<div class="item2"></div>

<div class="item3"></div>

只需在你想要索引出现的任何class或id属性上添加一个美元符号即可，而且想要多少都可以。那么，这样…

 div#i$-test.class$$$*5

会被转换成为:

<div id="i1-test" class="class111"></div>

<div id="i2-test" class="class222"></div>

<div id="i3-test" class="class333"></div>

<div id="i4-test" class="class444"></div>

<div id="i5-test" class="class555"></div>

你会看到，当你写a的缩写的时候，输出是<a href=”"></a>。或者，如果你写img，输出就是<img src=”" alt=”" />

最后一道大菜，大家可以自己实践一下：

 
    <html>
 
     <head>
 
         <title></title>
 
         <style type="text/css"></style>
 
         <script type="text/javascript" src="abc1.js"></script>
 
         <script type="text/javascript" src="abc2.js"></script>
 
         <script type="text/javascript" src="abc3.js"></script>
 
     </head>
 
     <body>
 
         <div class="content">
 
             <div class="nav">
 
                 <ul>
 
                     <li><a href=""><span></span></a></li>
 
                     <li><a href=""><span></span></a></li>
 
                     <li><a href=""><span></span></a></li>
 
                     <li><a href=""><span></span></a></li>
 
                     <li><a href=""><span></span></a></li>
 
                 </ul>
 
             </div>
 
         </div>
 
         <div class="sidebar">
 
             <div class="top"></div>
 
             <div class="middle"></div>
 
             <div class="bottom"></div>
 
         </div>
 
         <div class="main">
 
             <div class="acticle">
 
                 <h1>文章标题1</h1>
 
                 <p></p>
 
             </div>
 
             <div class="acticle">
 
                 <h1>文章标题2</h1>
 
                 <p></p>
 
             </div>
 
             <div class="acticle">
 
                 <h1>文章标题3</h1>
 
                 <p></p>
 
             </div>
 
         </div>
 
         <div class="footer">版权信息</div>
 
     </body>
 
 </html>