使用webstorm内置zen coding,可以快速开发HTML和CSS,只是用于文本处理并返回新的文本。片段snippets:随意的代码碎片。缩写abbreviations:标签定义。
- 缩写扩展器:将短代码生成长代码
上下文无关的HTML标签对匹配器
缩写包裹:缩写和标签对匹配合并
缩写语法
1、child:>
#page>div.logo+ul#navigation>li*5>a{Item $}
<div id="page">
<div class="logo"></div>
<ul id="navigation">
<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>
2、slibling:+
div+p+bq
<div></div>
<p></p>
<blockquote></blockquote>
3、climb-up:^
div+div>p>span+em^bq
<div></div>
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div>
4、multiplication:*
ul>li*5
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
5、grouping:()
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>
6、id and 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>
7、 item numbering:$
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>
8、改变item顺序:@-
ul>li.item$@-3*5
<ul>
<li class="item7"></li>
<li class="item6"></li>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
</ul>
9、text:{}
p>{Click }+a{here}+{ to continue}
<p>Click <a href="">here</a> to continue</p>