https://www.xuanmo.xin/2007.html

你可能不知道的那些emmet用法

发布于 分类: 前端相关 6 169

前言

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

 

emmet大法,各符号代表的含义:


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

 

实例展示

   id生成 #


div#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/

作者专栏:Xuanmo

前端爱好者,热爱前端开发,欢迎和我成为朋友。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

https://www.xuanmo.xin/wp-content/themes/xuan/expression.php
表情
贴图
表情加载中...

换一张

  • 陈晓拉尼

    涨姿势了,这个自定义属性[attrName=”attrValue”],我就没用过。 /guzhang

    • Xuanmo

      哈哈,有的是没怎么用

  • xiaomo

    长见识了,但貌似除了前面几个看的有点明白外,后面的就 /bizui

    • Xuanmo

      后边的咋了

      • xiaomo

        后边的没看明白,目前理解不来 /xiaoku

      • Xuanmo

        后边就会了,慢慢来

已经没有了!