WebStorm高效快捷生成html標籤錦集（IDEA同）

註釋
Ctrl+/：單行註釋

<!---->

Ctrl+Shift+/：多行註釋

<!--
行1
行2
行3
-->

Alt+鼠標拖動下拉：多行光標同步

<div>光標同步打出</div>
<div>光標同步打出</div>
<div>光標同步打出</div>
<div>光標同步打出</div>

快捷標籤生成

1、標籤名然後按TAB鍵生成標籤，以下都是此方式生成
示例：div TAB鍵

<div></div>

2、標籤+選擇器符號+屬性值
示例：div#out

<div id="out"></div>

示例：div.out

<div class="out"></div>

3、標籤名[屬性=“屬性值”]
示例：div[name="out"]

<div name="out"></div>

4、標籤{文字內容}
示例：div{文字內容}

<div>文字內容</div>

5、父標籤>子標籤
示例：div>span

<div><span></span></div>

6、標籤*數量
示例：div*5

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

7、標籤+標籤
示例：div+div

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

綜合示例
示例1：div#out>div.in$*3>span{文字內容$}

<div id="out">
    <div class="in1"><span>文字內容1</span></div>
    <div class="in2"><span>文字內容2</span></div>
    <div class="in3"><span>文字內容3</span></div>
</div>

示例2：div.out>(ul.list_out>li.list_left+li.list_right)+div.in>span.ion$*5

<div class="out">
    <ul class="list_out">
        <li class="list_left"></li>
        <li class="list_right"></li>
    </ul>
    <div class="in"><span class="ion1"></span><span class="ion2"></span><span class="ion3"></span><span class="ion4"></span><span
            class="ion5"></span></div>
</div>