前端必知的Emmet实用操作
走在前端的大道上
这是一篇介绍Emmet的文章,Emmet是专为我们前端开发人员设计的一个工具,可以大大提高您的HTML和CSS工开发效率。可以说是前端开发的神器之一Emmet简介
作为一个前端,你肯知道在前端开发的过程中,一大部分的工作是写 HTML、CSS 代码。特别是手动编写 HTML 代码的时候,效率会特别低下,因为需要敲打很多尖括号,而且很多标签都需要闭合标签等。于是,就有了 Emmet(前身为 Zen Coding)。(当然这是以前的情况,现在作为一个合格的现代编辑器多多少少都集成了代码自动提示,自动补全等功能)。
它作为一款强大的插件支持了许多编辑器与IDE,什么vscode,sublime,atom,webstorm等等都支持你可以直接在你的编辑器插件中搜索安装,一些已自带集成
我们先来看看官网的示例
#page>div.logo+ul#nav>li*5>a{Item $}
在我们用了emmet后 一个 tap 就会生成下面这一大段。酷不酷炫,炫不炫酷
<div id="page"> <div class="logo"></div> <ul id="nav"> <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 语法
标签
div ⟹ <div></div> foo ⟹ <foo></foo>
后代: >
div>ul>li ⟹ <div> <ul> <li></li> </ul> </div>
兄弟:+
div+p+bq ⟹ <div></div> <p></p> <blockquote></blockquote>
上级:^
div+div>p>span+em^bq ⟹ <div></div> <div> <p><span></span><em></em></p> <blockquote></blockquote> </div>
乘法:*
ul>li*5 ⟹ <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
分组:()
div>(header>ul>li*2>a)+footer>p ⟹ <div> <header> <ul> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </header> <footer> <p></p> </footer> </div>
ID 和 CLASS
div#header+div.page+div#footer.class1.class2.class3 ⟹ <div id="header"></div> <div class="page"><div> <div id="footer" class="class1 class2 class3"></div>
自定义属性
td[title="Hello world!" colspan=3] ⟹ <td title="Hello world!" colspan="3"></td>
自增符号:$
ul>li.item$*5 ⟹ <ul> <li class="item1"></li> <li class="item2"></li> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> </ul>
改变自增基数和方向:@
ul>li.item$@-*5 ⟹ <ul> <li class="item5"></li> <li class="item4"></li> <li class="item3"></li> <li class="item2"></li> <li class="item1"></li> </ul> ul>li.item$@3*5 ⟹ <ul> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> <li class="item6"></li> <li class="item7"></li> </ul>
文本:{}
a[#]{Click me} ⟹ <a href="#">Click me</a>
Lorem Ipsum(乱数假文):lorem
lorem ⟹ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique impedit quaeiure
Emmet的css支持
css属性
m ⟹ margin: fz ⟹ font-size:
属性值
m10 ⟹ margin: 10px; mt10 ⟹ margin-top: 10px;
多个属性值:对于有多个属性值的CSS属性,在编写时只需在属性值之间添加-:
m4-6 ⟹ margin: 4px 6px;
单位
Emmet默认单位为px,如果你想使用其他单位就继续看下面吧
- p → %
- e → em
- r→ rem
- x → ex
w100p ⟹ width: 100% m10p30e5x ⟹ margin: 10% 30em 5ex
参考文章:前端必知的Emmet实用操作
相关推荐
黎豆子 2020-02-03
行吟阁 2020-01-05
福叔 2019-12-14
andyhu00 2017-09-03
花雨漫天 2019-07-01
来老师 2017-09-03
huanghuang 2015-03-31
skyGAYD 2014-10-22
HTML混合APP开发 2014-08-28
WinerChopin 2014-08-05
walliam 2014-03-20
AlisaClass 2013-09-22
zhangpeng 2013-01-17
红壶吃猬队 2019-06-20
JackieWell 2016-04-15
xiaofanguan 2017-09-14
BitTigerio 2018-05-25
从零学习前端开发 2018-05-24