小姐姐,我这么写代码怎么了?你不要鄙视我啊!

狗哥最近写页面的时候,被前端的小姐姐鄙视了,说我写代码太慢了,她的速度比我快10倍。
狗哥买了奶茶和巧克力向小姐姐讨教,小姐姐说她用的是下面这些方法,让我大开眼界。
她写html用的是Emmet语法,说简单点,Emmet就是一种快速写页面的一种语法,前提是你的开发工具需要支撑这种语法。
我看小姐姐使用的是webstrom,所以我也就直接使用webstrom了,下面来见识一下飞一般写代码的感觉
下面的案例代码配合Tab键会产生效果。
#:生成带有id的标签#context上面的代码+Tab键,就会出现一个神奇的效果
<divid=”context”></div>.:生成带有class的标签.title效果
<divclass=”title”></div>#.:id和class一起#content.title#footer.c1.c2.c3效果
<divid=”content”class=”title”></div><divid=”footer”class=”c1c2c3″></div>代码比较简单,直接看效果就可以明白,不多解释。
>:生成后代一个>
div1>div2效果
<div1><div2></div2></div1>多个>连用
div1>div2>div3效果
<div1><div2><div3></div3></div2></div1>>、#、.可以混合,如下
div1#id1>div2#id2>div3#id3.c1.c2效果
<div1id=”id1″><div2id=”id2″><div3id=”id3″class=”c1c2″></div3></div2></div1>+:用来生成兄弟节点div+p+span效果
<div></div><p></p><span></span>来个混用的
div#title+div#address+div.tags效果
<divid=”title”></div><divid=”address”></div><divclass=”tags”></div>^:生成上级标签1个^的情况
div>span^h1span为div的后代,h1前面有^,表示让h1放在span上级中,即和div为同一级
效果
<div><span></span></div><h1></h1>2个^的情况,向上条2级
div>h1>h2>h3^^h4效果
<div><h1><h2><h3></h3></h2></h1><h4></h4></div>[]:生成属性div[attr1=”v1″attr2=”v2″attrN=”vn”]效果
<divattr1=”v1″attr2=”v2″attrN=”vn”></div>看案例:
a[target=”_blank”href=”http://www.baidu.com”]效果
<atarget=”_blank”href=”http://www.baidu.com”></a>{}:生成内容span{欢迎来到狗哥的地盘,狗哥会给大家带来各种牛逼的技能,让大家技能突飞猛进}效果
<span>欢迎来到狗哥的地盘,狗哥会给大家带来各种牛逼的技能,让大家技能突飞猛进</span>再看一个案例
a#dog[target=”_blank”href=”dog.com”]{欢迎来到狗哥的地盘,狗哥会给大家带来各种牛逼的技能,让大家技能突飞猛进}效果
<aid=”dog”target=”_blank”href=”dog.com”>欢迎来到狗哥的地盘,狗哥会给大家带来各种牛逼的技能,让大家技能突飞猛进</a>():分组div>(header>ul>li*2>a)+footer>p效果
<div><header><ul><li><ahref=””></a></li><li><ahref=””></a></li></ul></header><footer><p></p></footer></div>*num:重复多份ul>li*3效果
<ul><li></li><li></li><li></li></ul>$:和*一起使用,引用前面的数字单例$案例
ul>li{狗哥$}*3ul>li.title${狗哥$}*3效果
<ul><li>狗哥1</li><li>狗哥2</li><li>狗哥3</li></ul><ul><liclass=”title1″>狗哥1</li><liclass=”title2″>狗哥2</li><liclass=”title3″>狗哥3</li></ul>多个$案例
ul>li{狗哥$$}*15效果
<ul><li>狗哥01</li><li>狗哥02</li><li>狗哥03</li><li>狗哥04</li><li>狗哥05</li><li>狗哥06</li><li>狗哥07</li><li>狗哥08</li><li>狗哥09</li><li>狗哥10</li><li>狗哥11</li><li>狗哥12</li><li>狗哥13</li><li>狗哥14</li><li>狗哥15</li></ul>有没有感觉很牛逼,之前自己是一行行输入的,感觉自己很傻,难怪被鄙视了,我们继续。
@:和$ * 一起使用使用@modifier,您可以更改编号方向(升序或降序)和基数(例如起始值),看不懂吧,直接看效果,一看就懂,来2个案例
案例1:
ul>li{狗哥$$@5}*10效果
<ul><li>狗哥05</li><li>狗哥06</li><li>狗哥07</li><li>狗哥08</li><li>狗哥09</li><li>狗哥10</li><li>狗哥11</li><li>狗哥12</li><li>狗哥13</li><li>狗哥14</li></ul>案例2:
ul>li{狗哥$$@-6}*15效果
<ul><li>狗哥20</li><li>狗哥19</li><li>狗哥18</li><li>狗哥17</li><li>狗哥16</li><li>狗哥15</li><li>狗哥14</li><li>狗哥13</li><li>狗哥12</li><li>狗哥11</li><li>狗哥10</li><li>狗哥09</li><li>狗哥08</li><li>狗哥07</li><li>狗哥06</li></ul>好了差不多了,大家下去多练练,你们和小姐姐一样,也可以来鄙视狗哥了,帮忙狗哥转发一下,可以加狗哥微信(spring888java),拉你们入群,收入更多牛逼的技能!
感谢阅读,狗哥致力于为大家推荐各种好用、好玩的东西,也希望大家能支撑一下狗哥,帮忙转发一下,让更多好友一起成长!
【扫描关注狗哥】

为您推荐

发表评论

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