1.1.小技巧

自动补全HTML标签

在webstorm中，写完缩写后，按tab键有自动补全HTML标签的功能。常见的缩写语法如下

后代：> 缩写 ：nav>ul>li

<nav>
    <ul>
        <li></li>
    </ul>
</nav>

兄弟：+ 缩写：div+p+footer

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

上级：^ 缩写：p^div

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

乘法： 缩写：ul>li3

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

分组：() 缩写：div>(header>p*2)+footer

<div>
    <header>
        <p></p>
        <p></p>
    </header>
    <footer></footer>
</div>

自增符号：$ 缩写：ul>li.item$*3

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
</ul>

ID和类属性 缩写：div#header div.header

<div id="header"></div>
<div class="header"></div>

文本：{} 缩写：a{donna}

<a href="">donna</a>

更多自动补全的方法请看：https://www.w3cplus.com/tools/emmet-cheat-sheet.html

图片

http://placehold.it/800x320