emmet 基本语法-CFANZ编程社区

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

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

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

html结构快速输出

Child: >
输入：nav>ul>li
输出：
<nav>
<ul>
<li></li>
</ul>
</nav>
Multiplication: *
输入：ul>li*5
输出：
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
Item numbering: $
输入：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>
输入：form#search.wide
输出： <form id="search" class="wide"></form>
输入：p.class1.class2.class3
输出：<p class="class1 class2 class3"></p>
ID and CLASS attributes 快速输出id和class标签结构
输入：#header
输出：
<div id="header"></div>
输入：.header
输出：
<div class="header"></div>
Sibling: + 组合标签
输入：div+p+bq
输出：
<div></div>
<p></p>
<blockquote></blockquote>
Climb-up: ^
输入：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>
Grouping: ()
输入：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>
Custom attributes 自定义对象
输入：p[title="Hello world"]
输出：<p title="Hello world"></p>
输入：td[rowspan=2 colspan=3
输出：<td rowspan="2" colspan="3" title=""></td>
输入：[a='value1' b="value2"]
输出：<div a="value1" b="value2"></div>
Text: {}
输入：a{Click me}
输出：<a href="">Click me</a>
输入：p>{Click }+a{here}+{ to continue}
输出：<p>Click <a href="">here</a> to continue</p>
Implicit tag names
输入：.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元素快速输出

Html代码

emmet 基本语法_ico


  
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]-->

附上: Emmet Dreamweavercs6 安装方法

Emmet Dreamweavercs6 安装包