参考：
前端学习总结（二十）那些你可能不知道却强大方便的WebStorm快捷键
webstorm批量编辑快捷键【跳转到指定行，批量输入】
Intellij idea 快捷键(1)–生成for循环代码块
WebStorm快捷键收集
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webstorm快键键</title>
</head>
<body>
<!--
正常情况：
先输入：<h1
再输入:>
-->
<h1></h1>
<!--
>：下一个子标签
*：多少个标签
$：标签的名称序号
{}:标签的内容
-->
<!--输入：h1,按tab键-->
<h1></h1>
<!--输入：div#abc,按Tab键-->
<div id="abc"></div>
<!--输入：div.abc,按Tab键-->
<div class="abc"></div>
<!--输入: div>p*6 ,按Tab键-->
<div>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
<!--输入 a[href=#] 按tab键-->
<a href="#"></a>
<!--输入：ul.menu>li*6>a[href=#]{HTML} 按tab键-->
<ul class="menu">
<li><a href="#">HTML</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">HTML</a></li>
</ul>
<!--输入 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='images/$.jpg']*3 再按tab键-->
<img src="images/1.jpg" alt="">
<img src="images/2.jpg" alt="">
<img src="images/3.jpg" alt="">
<!--输入 li*3>div.img>img[src='images/$.jpg'] 再按tab键-->
<li>
<div class="img"><img src="images/1.jpg" alt=""></div>
</li>
<li>
<div class="img"><img src="images/2.jpg" alt=""></div>
</li>
<li>
<div class="img"><img src="images/3.jpg" alt=""></div>
</li>
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
<script>
/* for循环：输入itar,再点击tab键*/
for (var i = 0; i < array.length; i++) {
var obj = array[i];
}
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
+ : 并列的标签
<!--div#tab1+div#tab2-->
<div id="tab1"></div>
<div id="tab2"></div>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
<!--引入 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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
<!--ul及1个li ul+ -->
<ul>
<li></li>
</ul>
<!--ul及3个li ul>li*3 -->
<ul>
<li></li>
<li></li>
<li></li>
</ul>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
<!-- a:link -->
<a href="http://"></a>
- 1
- 2
- 3
<!--1个P标签：p 加 tab-->
<p></p>
<!--两个P标签：p+p 加 tab-->
<p></p>
<p></p>
<!--三个P标签：p*3 加 tab-->
<p></p>
<p></p>
<p></p>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
<!--input:button 加tab键-->
<input type="button" value="">
- 1
- 2
- 3
<!--ul>li.item$*6-->
<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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
<!--div.one.two-->
<div class="one two"></div>
- 1
- 2
- 3
<!--form:get-->
<form action="" method="get"></form>
<!--form:post-->
<form action="" method="post"></form>
4210
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
