webstrop快捷键高级应用

:div#abc,按Tab键 <div id="abc"></div>

:div.abc,按Tab键 <div class="abc"></div>

div>p*6 ,按Tab键 输入一个div里有6个p标签

a[href=#] <a href="#"></a>

ul.menu>li*6>a[href=#]{HTML} .menu为lu,其中有6个li中带a,

Webstorm > Preferences > Live Templates即时模板设置

html:5 或者 ! 生成 HTML5 结构

html:xt 生成 HTML4 过渡型

html:4s 生成 HTML4 严格型

#aaa 生成 id 为 aaa 的 div 标签,Emmet 默认的标签为 div

span.bbb class 为 bbb 的 span 标签

ul#ccc.ddd id 为 ccc 的 class 为 ddd 的 ul 标签

div.aaa>ul>li 生成后代：>

div+p+bq 生成兄弟：+

div>ul>li^span 生成上级元素：^

div>ul>li^^span

ul>li*5 重复生成多份：*

div>(header>ul>li*2>a)+footer>p 生成分组：()

ul>li.item$*5 对生成内容编号：$正序 @倒序

ul>li.item$@3*5 @N 指定开始的序号

a[href="http://blog.wpjam.com"]{点击这里到 我爱水煮鱼} 生成文本内容：{}

h300+w300 enter生成高300px宽300px

meta:vb+Tab 生成自适应标准viewport