sublime、vscode、webstorm通用html5快捷代码生成

后代: >

1
2
3
4
5
6
<!-- nav>ul>li -->
<nav>
<ul>
<li></li>
</ul>
</nav>

兄弟:+

1
2
3
4
5
6
<!-- div+p+bq -->
<div></div>
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div>

上级:^

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- div+div>p>span+em^bq -->
<div></div>
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div>

<!-- div+div>p>span+em^^bq -->
<div></div>
<div>
<p><span></span><em></em></p>
</div>
<blockquote></blockquote>

分组:()

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
<!-- div>(header>ul>li*2>a)+footer>p -->
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>

<!-- (div>dl>(dt+dd)*3)+footer>p -->
<div>
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
</div>
<footer>
<p></p>
</footer>

乘法:*

1
2
3
4
5
6
7
8
<!-- ul>li*5 -->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

自增符号:$

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
<!-- ul>li.item$*5 -->
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>

<!-- h$[title=item$]{Header $}*3 -->
<h1 title="item1">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3>

<!-- ul>li.item$$$*5 -->
<ul>
<li class="item001"></li>
<li class="item002"></li>
<li class="item003"></li>
<li class="item004"></li>
<li class="item005"></li>
</ul>

<!-- ul>li.item$@-*5 -->
<ul>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li>
</ul>

<!-- ul>li.item$@3*5 -->
<ul>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
<li class="item7"></li>
</ul>

ID和类属性

1
2
3
4
5
6
7
8
9
10
11
<!-- #header -->
<div id="header"></div>

<!-- .title -->
<div class="title"></div>

<!-- orm#search.wide -->
<form id="search" class="wide"></form>

<!-- p.class1.class2.class3 -->
<p class="class1 class2 class3"></p>

自定义属性

1
2
3
4
5
6
7
8
<!-- p[title="Hello world"] -->
<p title="Hello world"></p>

<!-- td[rowspan=2 colspan=3 title] -->
<td rowspan="2" colspan="3" title=""></td>

<!-- [a='value1' b="value2"] -->
<div a="value1" b="value2"></div>

文本:{}

1
2
3
4
5
6
7
8
<!-- a{Click me} -->
<a href="">Click me</a>

<!-- p>{Click }+a{here}+{ to continue} -->
<p>Click <a href="">here</a> to continue</p>

<!-- [a='value1' b="value2"] -->
<div a="value1" b="value2"></div>

隐式标签(只写了类名,标签名自动生成)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- .class -->
<div class="class"></div>

<!-- em>.class -->
<em><span class="class"></span></em>

<!-- ul>.class -->
<ul>
<li class="class"></li>
</ul>

<!-- table>.row>.col -->
<table>
<tr class="row">
<td class="col"></td>
</tr>
</table>

常用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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!-- ! -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>

</body>
</html>

<!-- a -->
<a href=""></a>

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

<!-- br -->
<br>

<!-- hr -->
<hr>

<!-- link -->
<link rel="stylesheet" href="" />

<!-- link:css -->
<link rel="stylesheet" href="style.css" />

<!-- link:favicon -->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

<!-- link:touch -->
<link rel="apple-touch-icon" href="favicon.png" />

<!-- link:rss -->
<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml" />

<!-- link:atom -->
<link rel="alternate" type="application/atom+xml" title="Atom" href="atom.xml" />

<!-- meta -->
<meta>

<!-- meta:utf -->
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

<!-- meta:vp -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- meta:edge -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">

<!-- style -->
<style></style>

<!-- script -->
<script></script>

<!-- script:src -->
<script src=""></script>

<!-- img -->
<img src="" alt="" />

<!-- iframe -->
<iframe src="" frameborder="0"></iframe>

<!-- form -->
<form action=""></form>

<!-- form:get -->
<form action="" method="get"></form>

<!-- form:post -->
<form action="" method="post"></form>

<!-- label -->
<label for=""></label>

<!-- input -->
<input type="text">

<!-- label -->
<label for=""></label>

<!-- inp | input:t | input:text -->
<input type="text" name="" id="">

<!-- input:h | input:hidden | input[type=hidden name] -->
<input type="hidden" name="">

<!-- input:search | inp[type=search] -->
<input type="search" name="" id="">

<!-- input:email | inp[type=email] -->
<input type="email" name="" id="">

<!-- input:url | inp[type=url] -->
<input type="url" name="" id="" />

<!-- input:p | input:password | inp[type=password] -->
<input type="password" name="" id="">

<!-- input:c | input:checkbox | inp[type=checkbox] -->
<input type="checkbox" name="" id="">

<!-- input:r | input:radio | inp[type=radio] -->
<input type="radio" name="" id="">

<!-- input:f | input:file | inp[type=file] -->
<input type="file" name="" id="">

<!-- input:s | input:submit | inp[type=submit] -->
<input type="submit" value="">

<!-- btn | button -->
<button></button>

<!-- btn:b | button[type=button] -->
<button type="button"></button>

<!-- btn:s | button[type=submit] -->
<button type="submit"></button>