小姐姐，我这么写代码怎么了？你不要鄙视我啊！

狗哥最近写页面的时候，被前端的小姐姐鄙视了，说我写代码太慢了，她的速度比我快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），拉你们入群，收入更多牛逼的技能！
感谢阅读，狗哥致力于为大家推荐各种好用、好玩的东西，也希望大家能支撑一下狗哥，帮忙转发一下，让更多好友一起成长！
【扫描关注狗哥】