Emmet是一个可以提高前端开发效率的实用插件，你可以通过极短的代码输入来获得你想要的代码结构，而你需要做的前期工作就是花些时间来熟悉emmet本身的语法，其实这些语法看起来并不复杂，下面就向大家分享一下emmet常用的基本语法。
一旦上手熟练emmet的基本语法之后，你会发现写代码是一件无比轻松愉快的事情！
如果你对emmet还不太熟悉，建议你查看一下之前发布的有关Emmet视频教程， 如果你使用的是Dreamweaver开发的话，你可以查看一下Emmet Dreamweavercs6 扩展包的安装方法。
html结构快速输出
1. Child: >
2.
3. 输入：nav>ul>li
4. 输出：
5. <nav>
6. <ul>
7. <li></li>
8. </ul>
9. </nav>
10.
11. Multiplication: *
12.
13. 输入：ul>li*5
14. 输出：
15. <ul>
16. <li></li>
17. <li></li>
18. <li></li>
19. <li></li>
20. <li></li>
21. </ul>
22.
23. Item numbering: $
24.
25. 输入：ul>li.item$*5
26. 输出：
27. <ul>
28. <li class="item1"></li>
29. <li class="item2"></li>
30. <li class="item3"></li>
31. <li class="item4"></li>
32. <li class="item5"></li>
33. </ul>
34.
35. 输入：h$[title=item$]{Header $}*3
36. 输出：
37. <h1 title="item1">Header 1</h1>
38. <h2 title="item2">Header 2</h2>
39. <h3 title="item3">Header 3</h3>
40.
41. 输入：ul>li.item$$$*5
42. 输出：
43. <ul>
44. <li class="item001"></li>
45. <li class="item002"></li>
46. <li class="item003"></li>
47. <li class="item004"></li>
48. <li class="item005"></li>
49. </ul>
50.
51. 输入：ul>li.item$@-*5
52. 输出：
53. <ul>
54. <li class="item5"></li>
55. <li class="item4"></li>
56. <li class="item3"></li>
57. <li class="item2"></li>
58. <li class="item1"></li>
59. </ul>
60.
61. 输入：ul>li.item$@3*5
62. 输出：
63. <ul>
64. <li class="item3"></li>
65. <li class="item4"></li>
66. <li class="item5"></li>
67. <li class="item6"></li>
68. <li class="item7"></li>
69. </ul>
70.
71. 输入：form#search.wide
72. 输出： <form id="search" class="wide"></form>
73.
74. 输入：p.class1.class2.class3
75. 输出：<p class="class1 class2 class3"></p>
76.
77. ID and CLASS attributes 快速输出id和class标签结构
78.
79. 输入：#header
80. 输出：
81. <div id="header"></div>
82. 输入：.header
83. 输出：
84. <div class="header"></div>
85.
86. Sibling: + 组合标签
87.
88. 输入：div+p+bq
89. 输出：
90. <div></div>
91. <p></p>
92. <blockquote></blockquote>
93.
94. Climb-up: ^
95.
96. 输入：div+div>p>span+em^bq
97. 输出：
98. <div></div>
99. <div>
100. <p><span></span><em></em></p>
101. <blockquote></blockquote>
102. </div>
103.
104. 输入：div+div>p>span+em^^bq
105. 输出：
106. <div></div>
107. <div>
108. <p><span></span><em></em></p>
109. </div>
110. <blockquote></blockquote>
111.
112. Grouping: ()
113.
114. 输入：div>(header>ul>li*2>a)+footer>p
115. 输出：
116. <div>
117. <header>
118. <ul>
119. <li><a href=""></a></li>
120. <li><a href=""></a></li>
121. </ul>
122. </header>
123. <footer> <p></p> </footer>
124. </div>
125.
126. 输入：(div>dl>(dt+dd)*3)+footer>p
127. 输出：
128. <div>
129. <dl>
130. <dt></dt>
131. <dd></dd>
132. <dt></dt>
133. <dd></dd>
134. <dt></dt>
135. <dd></dd>
136. </dl>
137. </div>
138. <footer> <p></p> </footer>
139.
140. Custom attributes 自定义对象
141.
142. 输入：p[title="Hello world"]
143. 输出：<p title="Hello world"></p>
144.
145. 输入：td[rowspan=2 colspan=3
146. 输出：<td rowspan="2" colspan="3" title=""></td>
147.
148. 输入：[a='value1' b="value2"]
149. 输出：<div a="value1" b="value2"></div>
150.
151. Text: {}
152.
153. 输入：a{Click me}
154. 输出：<a href="">Click me</a>
155.
156. 输入：p>{Click }+a{here}+{ to continue}
157. 输出：<p>Click <a href="">here</a> to continue</p>
158.
159. Implicit tag names
160.
161. 输入：.class
162. 输出：<div class="class"></div>
163.
164. 输入：em>.class
165. 输出：<em><span class="class"></span></em>
166.
167. 输入：ul>.class
168. 输出：<ul> <li class="class"></li> </ul>
169.
170. 输入：table>.row>.col
171. 输出：
172. <table>
173. <tr class="row">
174. <td class="col"></td>
175. </tr>
176. </table>html元素快速输出
Html代码
1. 输入：html:5
2. 输出：
3. <!doctype html> <html lang="en">
4. <head> <meta charset="UTF-8" />
5. <title>Document</title>
6. </head>
7. <body>
8. </body>
9. </html>
10.
11. a
12. <a href=""></a>
13.
14. a:link
15. <a href="http://"></a>
16.
17. a:mail
18. <a href="mailto:"></a>
19.
20. abbr
21. <abbr title=""></abbr>
22.
23. acronym
24. <acronym title=""></acronym>
25.
26. base
27. <base href="" />
28.
29. basefont
30. <basefont />
31.
32. br
33. <br />
34.
35. frame
36. <frame />
37.
38. hr
39. <hr />
40.
41. bdo
42. <bdo dir=""></bdo>
43.
44. bdo:r
45. <bdo dir="rtl"></bdo>
46.
47. bdo:l
48. <bdo dir="ltr"></bdo>
49.
50. col
51. <col />
52.
53. link
54. <link rel="stylesheet" href="" />
55.
56. link:css
57. <link rel="stylesheet" href="style.css" />
58.
59. link:print
60. <link rel="stylesheet" href="print.css" media="print" />
61.
62. link:favicon
63. <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
64.
65. link:touch
66. <link rel="apple-touch-icon" href="favicon.png" />
67.
68. link:rss
69. <link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml" />
70.
71. link:atom
72. <link rel="alternate" type="application/atom+xml" title="Atom" href="atom.xml" />
73.
74. meta
75. <meta />
76.
77. meta:utf
78. <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
79.
80. meta:win
81. <meta http-equiv="Content-Type" content="text/html;charset=windows-1251" />
82.
83. meta:vp
84. <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
85.
86. meta:compat
87. <meta http-equiv="X-UA-Compatible" content="IE=7" />
88.
89. style
90. <style></style>
91.
92. script
93. <script></script>
94.
95. script:src
96. <script src=""></script>
97.
98. img
99. <img src="" alt="" />
100.
101. iframe
102. <iframe src="" frameborder="0"></iframe>
103.
104. embed
105. <embed src="" type="" />
106.
107. object
108. <object data="" type=""></object>
109.
110. param
111. <param name="" value="" />
112.
113. map
114. <map name=""></map>
115.
116. area
117. <area shape="" coords="" href="" alt="" />
118.
119. area:d
120. <area shape="default" href="" alt="" />
121.
122. area:c
123. <area shape="circle" coords="" href="" alt="" />
124.
125. area:r
126. <area shape="rect" coords="" href="" alt="" />
127.
128. area:p
129. <area shape="poly" coords="" href="" alt="" />
130.
131. form
132. <form action=""></form>
133.
134. form:get
135. <form action="" method="get"></form>
136.
137. form:post
138. <form action="" method="post"></form>
139.
140. label
141. <label for=""></label>
142.
143. input
144. <input type="text" />
145.
146. inp
147. <input type="text" name="" id="" />
148.
149. input:hidden
150.
151. type=hidden
152. <input type="hidden" name="" />
153.
154. input:h
155.
156. Alias of input:hidden
157. <input type="hidden" name="" />
158.
159. input:text, input:t
160.
161. Alias of inp
162. <input type="text" name="" id="" />
163.
164. input:search
165.
166. type=search]
167. <input type="search" name="" id="" />
168.
169. input:email
170.
171. type=email]
172. <input type="email" name="" id="" />
173.
174. input:url
175.
176. type=url]
177. <input type="url" name="" id="" />
178.
179. input:password
180.
181. type=password]
182. <input type="password" name="" id="" />
183.
184. input:p
185.
186. Alias of input:password
187. <input type="password" name="" id="" />
188.
189. input:datetime
190.
191. type=datetime]
192. <input type="datetime" name="" id="" />
193.
194. input:date
195.
196. type=date]
197. <input type="date" name="" id="" />
198.
199. input:datetime-local
200.
201. type=datetime-local]
202. <input type="datetime-local" name="" id="" />
203.
204. input:month
205.
206. type=month]
207. <input type="month" name="" id="" />
208.
209. input:week
210.
211. type=week]
212. <input type="week" name="" id="" />
213.
214. input:time
215.
216. type=time]
217. <input type="time" name="" id="" />
218.
219. input:number
220.
221. type=number]
222. <input type="number" name="" id="" />
223.
224. input:color
225.
226. type=color]
227. <input type="color" name="" id="" />
228.
229. input:checkbox
230.
231. <input type="checkbox" name="" id="" />
232.
233. input:c
234.
235. Alias of input:checkbox
236. <input type="checkbox" name="" id="" />
237.
238. input:radio
239.
240. type=radio]
241. <input type="radio" name="" id="" />
242.
243. input:r
244.
245. Alias of input:radio
246. <input type="radio" name="" id="" />
247.
248. input:range
249.
250. type=range]
251. <input type="range" name="" id="" />
252.
253. input:file
254.
255. type=file]
256. <input type="file" name="" id="" />
257.
258. input:f
259.
260. Alias of input:file
261. <input type="file" name="" id="" />
262.
263. input:submit
264. <input type="submit" value="" />
265.
266. input:s
267.
268. Alias of input:submit
269. <input type="submit" value="" />
270.
271. input:image
272. <input type="image" src="" alt="" />
273.
274. input:i
275.
276. Alias of input:image
277. <input type="image" src="" alt="" />
278.
279. input:button
280. <input type="button" value="" />
281.
282. input:b
283.
284. Alias of input:button
285. <input type="button" value="" />
286.
287. isindex
288. <isindex />
289.
290. input:reset
291.
292. type=reset]
293. <input type="reset" value="" />
294.
295. select
296. <select name="" id=""></select>
297.
298. option
299. <option value=""></option>
300.
301. textarea
302. <textarea name="" id="" cols="30" rows="10"></textarea>
303.
304. menu:context
305.
306. type=context]>
307. <menu type="context"></menu>
308.
309. menu:c
310.
311. Alias of menu:context
312. <menu type="context"></menu>
313.
314. menu:toolbar
315.
316. type=toolbar]>
317. <menu type="toolbar"></menu>
318.
319. menu:t
320.
321. Alias of menu:toolbar
322. <menu type="toolbar"></menu>
323.
324. video
325. <video src=""></video>
326.
327. audio
328. <audio src=""></audio>
329.
330. html:xml
331. <html xmlns="http://www.w3.org/1999/xhtml"></html>
332.
333. keygen
334. <keygen />
335.
336. command
337. <command />
338.
339. bq
340.
341. Alias of blockquote
342. <blockquote></blockquote>
343.
344. acr
345.
346. Alias of acronym
347. <acronym title=""></acronym>
348.
349. fig
350.
351. Alias of figure
352. <figure></figure>
353.
354. figc
355.
356. Alias of figcaption
357. <figcaption></figcaption>
358.
359. ifr
360.
361. Alias of iframe
362. <iframe src="" frameborder="0"></iframe>
363.
364. emb
365.
366. Alias of embed
367. <embed src="" type="" />
368.
369. obj
370.
371. Alias of object
372. <object data="" type=""></object>
373.
374. src
375.
376. Alias of source
377. <source></source>
378.
379. cap
380.
381. Alias of caption
382. <caption></caption>
383.
384. colg
385.
386. Alias of colgroup
387. <colgroup></colgroup>
388.
389. fst, fset
390.
391. Alias of fieldset
392. <fieldset></fieldset>
393.
394. btn
395.
396. Alias of button
397. <button></button>
398.
399. btn:b
400.
401. type=button]
402. <button type="button"></button>
403.
404. btn:r
405.
406. type=reset]
407. <button type="reset"></button>
408.
409. btn:s
410.
411. type=submit]
412. <button type="submit"></button>
413.
414. optg
415.
416. Alias of optgroup
417. <optgroup></optgroup>
418.
419. opt
420.
421. Alias of option
422. <option value=""></option>
423.
424. tarea
425.
426. Alias of textarea
427. <textarea name="" id="" cols="30" rows="10"></textarea>
428.
429. leg
430.
431. Alias of legend
432. <legend></legend>
433.
434. sect
435.
436. Alias of section
437. <section></section>
438.
439. art
440.
441. Alias of article
442. <article></article>
443.
444. hdr
445.
446. Alias of header
447. <header></header>
448.
449. ftr
450.
451. Alias of footer
452. <footer></footer>
453.
454. adr
455.
456. Alias of address
457. <address></address>
458.
459. dlg
460.
461. Alias of dialog
462. <dialog></dialog>
463.
464. str
465.
466. Alias of strong
467. <strong></strong>
468.
469. prog
470.
471. Alias of progress
472. <progress></progress>
473.
474. datag
475.
476. Alias of datagrid
477. <datagrid></datagrid>
478.
479. datal
480.
481. Alias of datalist
482. <datalist></datalist>
483.
484. kg
485.
486. Alias of keygen
487. <keygen />
488.
489. out
490.
491. Alias of output
492. <output></output>
493.
494. det
495.
496. Alias of details
497. <details></details>
498.
499. cmd
500.
501. Alias of command
502. <command />
503.
504. ol+
505.
506. >li
507. <ol> <li></li> </ol>
508.
509. ul+
510.
511. >li
512. <ul> <li></li> </ul>
513.
514. dl+
515.
516. >dt+dd
517. <dl> <dt></dt> <dd></dd> </dl>
518.
519. map+
520.
521. >area
522. <map name=""> <area shape="" coords="" href="" alt="" /> </map>
523.
524. table+
525.
526. >tr>td
527. <table> <tr> <td></td> </tr> </table>
528.
529. colgroup+, colg+
530.
531. >col
532. <colgroup> <col /> </colgroup>
533.
534. tr+
535.
536. >td
537. <tr> <td></td> </tr>
538.
539. select+
540.
541. >option
542. <select name="" id=""> <option value=""></option> </select>
543.
544. optgroup+, optg+
545.
546. >option
547. <optgroup> <option value=""></option> </optgroup>
548.
549. !!!
550. >
551.
552. !!!4t
553. >
554.
555. !!!4s
556. >
557.
558. !!!xt
559. >
560.
561. !!!xs
562. >
563.
564. !!!xxs
565. >
566.
567. c
568. <!-- ${child} -->
569.
570. cc:ie6
571. <!--[if lte IE 6]> ${child} <![endif]-->
572.
573. cc:ie
574. <!--[if IE]> ${child} <![endif]-->
575.
576. cc:noie
577. <!--[if !IE]><!--> ${child} <!--<![endif]-->
