WebStorm —— 快捷键

符号有什么含义👇

>:下一个子标签，用于父子标签的连接

*:多少个子标签，后面跟子标签的个数

$:标签的名称序号，可以理解为for循环中的i

{}:标签的内容，标签中的文字等需要在{}表示

输入h1，加tab键

<h1></h1>

输入div#abc，加tab键

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

输入div.abc，加tab键

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

输入a[href=#] 加tab键

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

输入div>p*6,加tab键

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

输入 ul>li*5>a[href=#]{我是第$个}，加tab键

<ul> 
<li><a href="#">我是第1个</a></li> 
<li><a href="#">我是第2个</a></li>
<li><a href="#">我是第3个</a></li> 
<li><a href="#">我是第4个</a></li> 
<li><a href="#">我是第5个</a></li>
</ul>

输入 img[src='img/$.jpg']*3，加tab键

<img src="img/1.jpg" alt="">
<img src="img/2.jpg" alt=""> 
<img src="img/3.jpg" alt="">

输入 li*3>div.img>img[src='img/$.jpg']，加tab键

<li> <div class="img"><img src="img/1.jpg" alt=""></div></li>
<li> <div class="img"><img src="img/2.jpg" alt=""></div></li>
<li> <div class="img"><img src="img/3.jpg" alt=""></div></li>

快速生成for循环代码块

/* for循环：输入itar,再点击tab键*/ 
for (var i = 0; i < arr.length; i++) {
  var obj = arr[i];
} 

输入div#tab1+div#tab2，加tab键

+ : 表示并列的标签
<div id="tab1"></div> 
<div id="tab2"></div>

引入link，script标签

<!--引入link，输入link，加tab键--> 
<link rel="stylesheet" href=""> 

<!--引入css 输入link:css，加tab键 --> 
<link rel="stylesheet" href="css/mycss.css">

<!--引入js 输入script:src，加tab键--> 
<script src=""></script>

<!--html中插入js 输入script，加tab键--> 
<script></script>

快速输入ul、li

<!--ul及1个li 输入ul+，加tab键 -->
 <ul>
     <li></li>
 </ul>

 <!--ul及3个li 输入ul>li*3，加tab键 -->
<ul> 
    <li></li>
    <li></li> 
    <li></li>
</ul> 

<!--输入ul>li.item$*6，加tab键-->
<ul>
    <li class="item1"></li> 
    <li class="item2"></li> 
    <li class="item3"></li> 
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li> 
</ul>

快速输入多个标签

<!--输入a:link，加tab键 --> 
<a href="http://"></a>

<!--1个P标签：输入p，加tab键--> 
<p></p>

<!--两个P标签：输入p+p，加tab键--> 
<p></p>
<p></p> 

<!--三个P标签：输入p*3，加tab键--> 
<p></p> 
<p></p> 
<p></p>

快速输入带类名的标签

<!--输入div.one.two，加tab键--> 
<div class="one two"></div>

 <!--输入form:get，加tab键--> 
<form action="" method="get"></form> 

<!--输入form:post，加tab键-->
 <form action="" method="post"></form>

 <!--输入input:button，加tab键--> 
<input type="button" value="">