介紹
- Emmet是一個插件，在IDE中安裝該插件后即可使用該功能。
- HTML代碼寫起來雖簡單，但是重復代碼很多，Emmet能夠存在一種HTML代碼簡寫法(比較類似CSS的選擇器寫法)，比如
div.c1>ul>li*4
(按下tab)將生成如下HTML代碼，是不是非常方便：
<div class="c1"> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </div>
支持Emmet插件的編輯器
基本用法
- E: 生成<E></E>
- E#N: 生成<E id="N"></E>
- E.N: 生成<E class="N"></E>
- E{value}: 生成<E>value</E>
- E+N: 生成<E></E><N></N>
- E>N: 生成<E><N></N><E>
- B>E^N: 生成<B><E></E></B><N></N>. >表示下級，^表示上級
- E[attr1="foo1" attr2="foo2"]: 生成<E attr1="foo1" attr2="foo2"></E>
- E*n:生成n個<E></E>
- E$*n: 自動編號，生成<E1></E1><E2></E2>...<EN></EN>, \$表示一位數字，如果\$\$表示01開始編號，\$\$\$表示001開始編號
- E$@m*n: 從m開始自動編號。
- E$@-*n: 倒序自動編號，生成<EN></EN>...<E1></E1>
- (E): 分組
- html:5或！ : 生成html5骨架代碼，如下：
- html:xt :生成html4 traditional 骨架代碼。
- html:4s : 生成html4 strict 骨架代碼。
例子
這個例子可以自己試試看最后的結果是什么。
html:5>div.container>(nav.navbar.navbar-inverse>div.navbar-header>a.navbar-brand{Crazy Fast}+ul.nav.navbar-nav>li*2>a.menu-\${Menu Item \$})+(div.jumbotron.text-center>h1{Crazy Fast HTML}+p+a#go-button.btn.btn-danger{Learn More})+(div.row.text-center>(div.col-sm-4>div.info-box>span.glyphicon.glyphicon-fire+h2{Lions}+p)+(div.col-sm-8>div.info-box>span.glyphicon.glyphicon-send+h2{Emmmet}+p))
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div class="container"> <nav class="navbar navbar-inverse"> <div class="navbar-header"> <a href="" class="navbar-brand">Crazy Fast</a> <ul class="nav navbar-nav"> <li><a href="" class="menu-1">Menu Item 1</a></li> <li><a href="" class="menu-2">Menu Item 2</a></li> </ul> </div> </nav> <div class="jumbotron text-center"> <h1>Crazy Fast HTML</h1> <p></p> <a href="" id="go-button" class="btn btn-danger">Learn More</a> </div> <div class="row text-center"> <div class="col-sm-4"> <div class="info-box"> <span class="glyphicon glyphicon-fire"></span> <h2>Lions</h2> <p></p> </div> </div> <div class="col-sm-8"> <div class="info-box"> <span class="glyphicon glyphicon-send"></span> <h2>Emmmet</h2> <p></p> </div> </div> </div> </div> </body> </html>
參考文獻
[1] Emmet入門：http://www.ruanyifeng.com/blog/2013/06/emmet_and_haml.html
[2] 不錯的Emmet教程：http://www.tedlife.com/qian_duan_dai_ma_li_qi_emmet.html
[3] Emmet的高級功能：http://salonglong.com/emmet-advanced.html
[4] Emmet全部符號介紹：http://docs.emmet.io/cheat-sheet/