css速写
# Emment 基本语法
E 代表HTML标签。
E#id 代表id属性。
E.class 代表class属性。
E[attr=foo] 代表某一个特定属性。
E{foo} 代表标签包含的内容是foo。
E>N 代表N是E的子元素。
E+N 代表N是E的同级元素。
E^N 代表N是E的上级元素。
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 基础用法
元素 (Elements)
您可以使用元素的名称，如 div 或 p 来生成 HTML 标签。Emmet 没有一组可用的标签名称，可以写任何单词并将其转换为标签。也就是只要知道元素的缩写，Emmet 会自动转换成对应标签.
形如:
div => <div> </div>
foo => <foo> </foo>
html:5 => 将生成html5标准的包含body为空基本dom
html:xt => 生成XHTML过渡文档类型,DOCTYPE为XHTML
html:4s => 生成HTML4严格文档类型,DOCTYPE为HTML 4.01
a:mail => <a href="mailto:"></a>
a:link => <a href="http://"></a>
base => <base href="">
br => <br>
link => <link rel="stylesheet" href="">
script:src => <script src=""></script>
form:get => <form action="" method="get"></form>
label => <label for=""></label>
input => <input type="text">
inp => <input type="text" name="" id="">
input:hidden => <input type="hidden" name=""> input:h亦可
input:email => <input type="email" name="" id="">
input:password => <input type="password" name="" id="">
input:checkbox => <input type="checkbox" name="" id="">
input:radio => <input type="radio" name="" id="">
select => <select name="" id=""></select>
option => <option value=""></option>
bq => <blockquote></blockquote>
btn => <button></button>
btn:s => <button type="submit"></button>
btn:r => <button type="reset"></button>
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
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
1.准备工作
编辑器使用Visual Code,下载地址访问https://code.visualstudio.com/，新建一个HTML文件，并保存。
2.生成 HTML 文档初始结构
HTML 文档的初始结构，就是包括 doctype、html、head、body 以及 meta 等内容。你只需要输入一个 “!” 就可以生成一个 HTML5 的标准文档初始结构，你没有看错，输入一个感叹号（当然是英文符号），然后按 “Tab” 键便会生成代码，就会发现生成了下面的结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
这就是一个 HTML5 的标准结构，也是默认的 HTML 结构。如果你想生成 HTML4 的过渡型结构，那么输入指令 html:xt,然后按 “Tab” 键, 即可生成如下结构：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
Emmet 会自动把 doctype 给你补全了，怎么样，这样的功能会不会让你动心？简单总结一下常用的 HTML 结构指令：
html:5 或者 ! 生成 HTML5 结构
html:xt 生成 HTML4 过渡型
html:4s 生成 HTML4 严格型
3.任意一个 html 标签输入都会生成完整的闭合标签
例如输入 p 按 tab 则 生成：<p></p>
4.生成带有 id 、class 的 HTML 标签
例如输入 div#header.section 则生成
<div id="header" class="section"></div>
5.生成后代：>
例如输入p>span 则生成
<p><span></span></p>
6.生成兄弟标签：+
例如输入p+div 则生成
<p></p><div></div>
7.生成上级标签： ^
例如输入ul>li>a^div 则生成
<ul>
<li><a href=""></a></li>
<div></div>
</ul>
也可以使用多个 ^,例如输入ul>li>a^^div 则生成
<ul>
<li><a href=""></a></li>
</ul>
<div></div>
8.重复生成多个标签 *
例如输入ul>li*5 则生成
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
9.生成分组的标签: ()
例如输入ul>(li>a)*5 则生成
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
注意和ul>li>a*5 生成是不一样的
<ul>
<li>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
</li>
</ul>
10.生成自定义属性：[]
例如输入img[http://www.cnblogs.com/images/logo_small.gif][alt=www.cnblogs.com] 则生成
<img src="http://www.cnblogs.com/images/logo_small.gif" alt="www.cnblogs.com" />
11.生成递增的属性标签等: $
例如输入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>
12.生成多位递增的呢：$$$
例如输入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>
想生成几位输入几个$
13.要生成递减的呢：@-
例如输入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>
14.想要从某个特定的顺序开始呢：@N
例如输入ul>li.item$@10*5 则生成
<ul>
<li class="item10"></li>
<li class="item11"></li>
<li class="item12"></li>
<li class="item13"></li>
<li class="item14"></li>
</ul>
15.逆序生成到某个数：@-
例如输入ul>li.item$@-10*5 则生成
<ul>
<li class="item14"></li>
<li class="item13"></li>
<li class="item12"></li>
<li class="item11"></li>
<li class="item10"></li>
</ul>
16.生成文本内容：{}
例如输入p{我是文字内容} 则生成
<p>我是文字内容</p>
17.缺省元素:
声明一个带class的div 可以不用输入div；.header+.footer 则生成:
<div class="header"></div>
<div class="footer"></div>
Emmet 还会根据父标签进行判定例如输入ul>.item*3 则生成：
<ul>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
下面是所有的隐式标签名称：
li：用于 ul 和 ol 中
tr：用于 table、tbody、thead 和 tfoot 中
td：用于 tr 中
option：用于 select 和 optgroup 中
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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
编辑 (opens new window)
上次更新: 5/26/2022, 9:20:36 AM