WebStrom 自动补全快捷键

这两天在使用WebStrom写代码的时候，发现了一些自动补全的快捷键，使用熟练之后写代码那叫一个速度，然后有收集总结了一下，所以想写篇博客跟大家分享出来。

使用这些自动补全就是通过编辑一些占位符然后按`tab键` 就可以自动生成代码模块，常用的简写法，是 ------------ Emmet .

Emment简单使用

1----E 代表HTML标签。

2----E#id代表id属性。

3----E.class代表class属性。

4----E[attr=foo]代表某一个特定属性。

5----E{foo}代表标签包含的内容是foo。

6----E>N代表N是E的子元素。

7----E+N代表N是E的同级元素。

8----E^N代表N是E的上级元素。

在这里我就列举一些常用的，详细的大家可以额参考自动补全 。

生成HTML文档

html:5 或 !----------------生成 HTML5 结构

html:xt--------------------生成 HTML4 过渡型

html:4s--------------------生成 HTML4 严格型

生成带有 id 、class 的 HTML 标签

h1---------------------------生成<h1>标签

#abc-------------------------生成带id标签

<div id="abc"></div>

.abd---------------------------------------生成带class标签

<div class="abc"></div>

生成上下级元素

div>p*6------------------------生成下级元素

<div>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</div>

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

<div>
    <ul>
        <li></li>
    </ul>
    <span></span>
</div>

生成超链接

a[href=#]  或者 a:link

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

生成同级标签

h1+a+p

<h1></h1><a href=""></a>
<p></p>

生成分组

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>

生成自定义属性

元素名:[attr=""]

生成内容编号（顺序）

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="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
    <li class="item004"></li>
    <li class="item005"></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>