你可能不知道的那些emmet用法
分类: 解决问题 4051 13
前言
相信做前端的朋友大家对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/
共 13 条评论关于 “你可能不知道的那些emmet用法”