emmet 基本语法

Emmet是一个可以提高前端开发效率的实用插件，你可以通过极短的代码输入来获得你想要的代码结构，而你需要做的前期工作就是花些时间来熟悉emmet本身的语法，其实这些语法看起来并不复杂，下面就向大家分享一下emmet常用的基本语法。

一旦上手熟练emmet的基本语法之后，你会发现写代码是一件无比轻松愉快的事情！

 

如果你对emmet还不太熟悉，建议你查看一下之前发布的有关Emmet视频教程， 如果你使用的是Dreamweaver开发的话，你可以查看一下Emmet Dreamweavercs6 扩展包的安装方法。

 

html结构快速输出

 

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 title]  
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.     Alias of input[type=hidden name]  
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.     Alias of inp[type=search]  
167.     <input type="search" name="" id="" />  
168.    
169. input:email  
170.    
171.     Alias of inp[type=email]  
172.     <input type="email" name="" id="" />  
173.    
174. input:url  
175.    
176.     Alias of inp[type=url]  
177.     <input type="url" name="" id="" />  
178.    
179. input:password  
180.    
181.     Alias of inp[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.     Alias of inp[type=datetime]  
192.     <input type="datetime" name="" id="" />  
193.    
194. input:date  
195.    
196.     Alias of inp[type=date]  
197.     <input type="date" name="" id="" />  
198.    
199. input:datetime-local  
200.    
201.     Alias of inp[type=datetime-local]  
202.     <input type="datetime-local" name="" id="" />  
203.    
204. input:month  
205.    
206.     Alias of inp[type=month]  
207.     <input type="month" name="" id="" />  
208.    
209. input:week  
210.    
211.     Alias of inp[type=week]  
212.     <input type="week" name="" id="" />  
213.    
214. input:time  
215.    
216.     Alias of inp[type=time]  
217.     <input type="time" name="" id="" />  
218.    
219. input:number  
220.    
221.     Alias of inp[type=number]  
222.     <input type="number" name="" id="" />  
223.    
224. input:color  
225.    
226.     Alias of inp[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.     Alias of inp[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.     Alias of inp[type=range]  
251.     <input type="range" name="" id="" />  
252.    
253. input:file  
254.    
255.     Alias of inp[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.     Alias of input:button[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.     Alias of menu[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.     Alias of menu[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.     Alias of button[type=button]  
402.     <button type="button"></button>  
403.    
404. btn:r  
405.    
406.     Alias of button[type=reset]  
407.     <button type="reset"></button>  
408.    
409. btn:s  
410.    
411.     Alias of button[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.     Alias of ol>li  
507.     <ol> <li></li> </ol>  
508.    
509. ul+  
510.    
511.     Alias of ul>li  
512.     <ul> <li></li> </ul>  
513.    
514. dl+  
515.    
516.     Alias of dl>dt+dd  
517.     <dl> <dt></dt> <dd></dd> </dl>  
518.    
519. map+  
520.    
521.     Alias of map>area  
522.     <map name=""> <area shape="" coords="" href="" alt="" /> </map>  
523.    
524. table+  
525.    
526.     Alias of table>tr>td  
527.     <table> <tr> <td></td> </tr> </table>  
528.    
529. colgroup+, colg+  
530.    
531.     Alias of colgroup>col  
532.     <colgroup> <col /> </colgroup>  
533.    
534. tr+  
535.    
536.     Alias of tr>td  
537.     <tr> <td></td> </tr>  
538.    
539. select+  
540.    
541.     Alias of select>option  
542.     <select name="" id=""> <option value=""></option> </select>  
543.    
544. optgroup+, optg+  
545.    
546.     Alias of optgroup>option  
547.     <optgroup> <option value=""></option> </optgroup>  
548.    
549. !!!  
550.     <!doctype html>  
551.    
552. !!!4t  
553.     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
554.    
555. !!!4s  
556.     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
557.    
558. !!!xt  
559.     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
560.    
561. !!!xs  
562.     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
563.    
564. !!!xxs  
565.     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  
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]-->  

    

   附上:  Emmet Dreamweavercs6   安装方法

             Emmet Dreamweavercs6   安装包