Xuanmo Blog

前言

相信做前端的朋友大家对emmet都不陌生，看了一下emmet的官网，自己实际操作了一下，了解到emmet的强大，做一下总结

emmet大法，各符号代表的含义：

#  ====================> 对应标签的id
.  ====================> 对应标签的class
>  ====================> 代表当前元素的子级
+  ====================> 表示生成当前元素的同级
^  ====================> 返回到当前元素的父级
*  ====================> 表示循环生成标签
$  ====================> 代表在循环生成的索引值
{} ====================> 代表需要给标签生成的内容
[attrName="attrValue"] ==> attrName: 需要生成的属性名字，attrValue: 需要生成的属性值

实例展示

   id生成 #

div#app or #app
<div id="app"></div>

   class生成 .

div.wrap
<div class="wrap"></div>

   子级节点生成 >

div.wrap>p.summary
<div class="wrap">
    <p class="summary"></p>
</div>

   生成当前元素的同级元素 +

div.wrap>h2.title+p.summary
<div class="wrap">
    <h2 class="title"></h2>
    <p class="summary"></p>
</div>

   返回到当前元素的父级 ^

div.header>h2.title+p.summary^div.main^div.footer
<div class="header">
    <h2 class="title"></h2>
    <p class="summary"></p>
</div>
<div class="main"></div>
<div class="footer"></div>

   循环生成标签 *

ul>li.list*5
<ul>
    <li class="list"></li>
    <li class="list"></li>
    <li class="list"></li>
    <li class="list"></li>
    <li class="list"></li>
</ul>

   表示当前循环标签的索引值 $

ul>li.list.list-${$}*5
<ul>
    <li class="list list-1">1</li>
    <li class="list list-2">2</li>
    <li class="list list-3">3</li>
    <li class="list list-4">4</li>
    <li class="list list-5">5</li>
</ul>

   给标签生成除id和class的属性 [attrName="attrValue"]

div.wrap[data-name="xuanmo" data-index="$"]*5
<div class="wrap" data-name="xuanmo" data-index="1"></div>
<div class="wrap" data-name="xuanmo" data-index="2"></div>
<div class="wrap" data-name="xuanmo" data-index="3"></div>
<div class="wrap" data-name="xuanmo" data-index="4"></div>
<div class="wrap" data-name="xuanmo" data-index="5"></div>

   说了那么多，来个完整的练习吧，快速生成一个页面结构
div#header>div.header-wrap.wrap.clearfix>div.fl.logo{Xuanmo Blog}+div.fr.concat^^div#main>div.main-wrap.wrap>ul.news-wrap>li.news-list${我的序列号是正序的：$}*3^+ul.project-wrap>li.project-list$@-1{我的序列号是倒序的：$@-1}*5^^^div#footer>div.wrap.footer-wrap+div.copyright{Copyright © Xuanmo Blog All Rights Reserved. 京ICP备15011150号-2}

<div id="header">
    <div class="header-wrap wrap clearfix">
        <div class="fl logo">Xuanmo Blog</div>
        <div class="fr concat"></div>
    </div>
</div>
<div id="main">
    <div class="main-wrap wrap">
        <ul class="news-wrap">
            <li class="news-list1">我的序列号是正序的：1</li>
            <li class="news-list2">我的序列号是正序的：2</li>
            <li class="news-list3">我的序列号是正序的：3</li>
        </ul>
        <ul class="project-wrap">
            <li class="project-list5">我的序列号是倒序的：5</li>
            <li class="project-list4">我的序列号是倒序的：4</li>
            <li class="project-list3">我的序列号是倒序的：3</li>
            <li class="project-list2">我的序列号是倒序的：2</li>
            <li class="project-list1">我的序列号是倒序的：1</li>
        </ul>
    </div>
</div>
<div id="footer">
    <div class="wrap footer-wrap"></div>
    <div class="copyright">Copyright © Xuanmo Blog All Rights Reserved. 京ICP备15011150号-2</div>
</div>

结语

文章就总结这些了，移步可查看emmet官方文档：https://docs.emmet.io/abbreviations/syntax/