Emmet (前身爲 Zen Coding) 是一個能大幅度提高前端開發效率的一個工具，使用前需要在編輯器中安裝emmet插件
語法
| 說明 | 語法 | 縮寫 | 生成代碼（tab鍵） |
|---|---|---|---|
| 後代 | > | div>div>span | <div><div><span></span> </div></div> |
| 兄弟 | + | div+p+span | <div></div><p></p><span></span> |
| 上級 | ^ | div+div>p>span+em^strong | <div></div><div><p><span></span><em></em><p><strong></strong></div> |
| div+div>p>span+em^^strong | <div></div><div><p><span></span><em></em><p></div><strong></strong> |
||
| 分組 | () | div>(header>ul>li>a)+footer>p | <div><header><ul><li><a href=''></a></li></ul></header><footer></footer></div> |
| (div>dl>(dt+dd)*2)+footer>p | <div><dl><dt></dt><dd></dd><dt></dt><dd></dd></dl></div><footer><p></p></footer> |
||
| 乘法 | * | ul>li*3 | <ul><li></li><li></li><li></li></ul> |
| 自增 | $ |
ul>li.item$*3 |
<ul><li class='item1'></li><li class='item2'></li><li class='item3'></li></ul> |
h$[title=item$]{header$}*3 |
<h1 title="item1">header1</h1><h2 title="item2">header2</h2><h3 title="item3">header3</h3> |
||
ul>li.item$$$*3 |
<ul><li class="item001"></li><li class="item002"></li><li class="item003"></li></ul> |
||
| ul>li.item$@-*3 | <ul><li class="item3"></li><li class="item2"></li><li class="item1"></li></ul> |
||
| ID | # | div#header | <div id="header"></div> |
| 類 | . | div.header | <div class="header"></div> |
| form#search.search | <form id="search" class="search"></form> |
||
| p.class1.class2.class3 | <p class="class1 class2 class3"></p> |
||
| 自定義屬性 | p[title=’hello’] | <p title="hello"></p> |
|
| td[rowspan=2 colspan=3 title] | <td rowspan="2" colspan="3" title=""></td> |
||
| 文本 | {} | a{文本} | <a href="">文本</a> |
| p>{Click }+a{here}+{ to continue} | <p>Click <a href="">here</a> to continue</p> |
||
| 隱式標籤 | .class | <div class="class"></div> |
|
| ul>.class | <ul><li class="class"></li></ul> |
||
| table>.row>.col | <table><tr class="row"><td class="col"></td></tr></table> |
html縮寫
所有未知的縮寫都會轉換成標籤，例如，foo →
<foo></foo>
| 縮寫 | 代碼 |
|---|---|
| a | <a href=""></a> |
| a:link | <a href="http://"></a> |
| a:mail | <a href="mailto:"></a> |
| abbr | <abbr title=""></abbr> |
| base | <base href="" /> |
| bdo | <bdo dir=""></bdo> |
| bdo:r | <bdo dir="rtl"></bdo> |
| bdo:l | <bdo dir="ltr"></bdo> |
| link | <link rel="stylesheet" href="" /> |
| link:css | <link rel="stylesheet" href="style.css" /> |
| link:print | <link rel="stylesheet" href="print.css" media="print" /> |
| 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:utf | <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> |
| meta:win | <meta http-equiv="Content-Type" content="text/html;charset=windows-1251" /> |
| meta:vp | <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> |
| meta:compat | <meta http-equiv="X-UA-Compatible" content="IE=7" /> |
| script:src | <script src=""></script> |
| area | <area shape="" coords="" href="" alt="" /> |
| area:d | <area shape="default" href="" alt="" /> |
| area:c | <area shape="circle" coords="" href="" alt="" /> |
| area:r | <area shape="rect" coords="" href="" alt="" /> |
| area:p | <area shape="poly" coords="" href="" alt="" /> |
| form | <form action=""></form> |
| form:get | <form action="" method="get"></form> |
| form:post | <form action="" method="post"></form> |
| input:hidden | <input type="hidden" name="" /> |
| input:h | <input type="hidden" name="" /> |