webstorm快速输入标签

1. <!--
2.  
   正常情况：
3.  
   先输入：<h1
4.  
   再输入:>
5.  
   -->
6.  
   <h1></h1>
7.  
    
8.  
   <!--
9.  
   >：下一个子标签
10.  
    *：多少个标签
11.  
    $：标签的名称序号
12.  
    {}:标签的内容
13.  
    -->
14.  
     
15.  
    <!--输入：h1,按tab键-->
16.  
    <h1></h1>
17.  
     
18.  
    <!--输入：div#abc,按Tab键-->
19.  
    <div id="abc"></div>
20.  
     
21.  
    <!--输入：div.abc,按Tab键-->
22.  
    <div class="abc"></div>
23.  
     
24.  
    <!--输入: div>p*6 ,按Tab键-->
25.  
    <div>
26.  
    <p></p>
27.  
    <p></p>
28.  
    <p></p>
29.  
    <p></p>
30.  
    <p></p>
31.  
    <p></p>
32.  
    </div>
33.  
     
34.  
    <!--输入 a[href=#] 按tab键-->
35.  
    <a href="#"></a>
36.  
     
37.  
    <!--输入：ul.menu>li*6>a[href=#]{HTML} 按tab键-->
38.  
    <ul class="menu">
39.  
    <li><a href="#">HTML</a></li>
40.  
    <li><a href="#">HTML</a></li>
41.  
    <li><a href="#">HTML</a></li>
42.  
    <li><a href="#">HTML</a></li>
43.  
    <li><a href="#">HTML</a></li>
44.  
    <li><a href="#">HTML</a></li>
45.  
    </ul>
46.  
     
47.  
    <!--输入 ul>li*5>a[href=#]{我是第$个} 再按tab键-->
48.  
    <ul>
49.  
    <li><a href="#">我是第1个</a></li>
50.  
    <li><a href="#">我是第2个</a></li>
51.  
    <li><a href="#">我是第3个</a></li>
52.  
    <li><a href="#">我是第4个</a></li>
53.  
    <li><a href="#">我是第5个</a></li>
54.  
    </ul>
55.  
     
56.  
    <!--输入 img[src='images/$.jpg']*3 再按tab键-->
57.  
    <img src="images/1.jpg" alt="">
58.  
    <img src="images/2.jpg" alt="">
59.  
    <img src="images/3.jpg" alt="">
60.  
     
61.  
    <!--输入 li*3>div.img>img[src='images/$.jpg'] 再按tab键-->
62.  
    <li>
63.  
    <div class="img"><img src="images/1.jpg" alt=""></div>
64.  
    </li>
65.  
    <li>
66.  
    <div class="img"><img src="images/2.jpg" alt=""></div>
67.  
    </li>
68.  
    <li>
69.  
    <div class="img"><img src="images/3.jpg" alt=""></div>
70.  
    </li>
71.  
     
72.  
    </body>
73.  
    </html>

 

1.  
   <script>
2.  
   /* for循环：输入itar,再点击tab键*/
3.  
   for (var i = 0; i < array.length; i++) {
4.  
   var obj = array[i];
5.  
    
6.  
   }
7.  
   </script>

 

1.  
    
2.  
   <!--引入 link 加tab键-->
3.  
   <link rel="stylesheet" href="">
4.  
    
5.  
   <!--引入css link:css 加tab键 -->
6.  
   <link rel="stylesheet" href="css/mycss.css">
7.  
    
8.  
   <!--引入js script:src 加tab键-->
9.  
   <script src=""></script>
10.  
     
11.  
    <!--html中插入js script 加tab键-->
12.  
    <script></script>

 

1.  
    
2.  
   <!--ul及1个li ul+ -->
3.  
   <ul>
4.  
   <li></li>
5.  
   </ul>
6.  
    
7.  
   <!--ul及3个li ul>li*3 -->
8.  
   <ul>
9.  
   <li></li>
10.  
    <li></li>
11.  
    <li></li>
12.  
    </ul>

 

1.  
   <!-- a:link -->
2.  
   <a href="http://"></a>

 

1.  
   <!--1个P标签：p 加 tab-->
2.  
   <p></p>
3.  
    
4.  
   <!--两个P标签：p+p 加 tab-->
5.  
   <p></p>
6.  
   <p></p>
7.  
    
8.  
   <!--三个P标签：p*3 加 tab-->
9.  
   <p></p>
10.  
    <p></p>
11.  
    <p></p>

 

1.  
   <!--input:button 加tab键-->
2.  
   <input type="button" value="">

 

1.  
    
2.  
   <!--ul>li.item$*6-->
3.  
   <ul>
4.  
   <li class="item1"></li>
5.  
   <li class="item2"></li>
6.  
   <li class="item3"></li>
7.  
   <li class="item4"></li>
8.  
   <li class="item5"></li>
9.  
   <li class="item6"></li>
10.  
    </ul>

 

1.  
   <!--div.one.two-->
2.  
   <div class="one two"></div>

 

1.  
   <!--form:get-->
2.  
   <form action="" method="get"></form>
3.  
   <!--form:post-->
4.  
   <form action="" method="post"></form>

来源：https://www.cnblogs.com/zcpblog/p/11356469.html