Emmet的用法及相關語法 · 偽全棧技術匯總

本節來講一下Emmet插件的用法及相關語法。 Emmet插件極大的提高了編程員的編程速度，下面我們來講講它的具體語法： # 一、生成 HTML 文檔初始結構 HTML 文檔的初始結構，就是包括 doctype、html、head、body 以及 meta 等內容。你只需要輸入一個 “!” 就可以生成一個 HTML5 的標準文檔初始結構，你沒有看錯，輸入一個感嘆號（當然是英文符號），然后摁下 ctrl+E 鍵或者Tab，就會發現生成了下面的結構： ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html> ~~~ 這就是一個 HTML5 的標準結構，也是默認的 HTML 結構。如果你想生成 HTML4 的過渡型結構，那么輸入指令 html:xt,然后ctrl+E, 即可生成如下結構： ~~~ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> </head> <body> </body> </html> ~~~ * Emmet 會自動把 doctype 給你補全了，怎么樣，這樣的功能會不會讓你動心？簡單總結一下常用的 HTML 結構指令： * html:5 或者 ! 生成 HTML5 結構 * html:xt 生成 HTML4 過渡型 * html:4s 生成 HTML4 嚴格型 # 二、生成帶有 id 、class 的 HTML 標簽 Emmet 的語法有點類似 CSS 的語法，生成 id 為 aaa 的 div 標簽，我們只需要編寫下面指令： `#aaa` Emmet 默認的標簽為 div ，如果我們不給出標簽名稱的話，默認就生成 div 標簽。如果編寫一個 class 為 bbb 的 span 標簽，我們需要編寫下面指令： `span.bbb` 然后就生成了對應的結構。同理，如果想要編寫一個 id 為 ccc 的 class 為 ddd 的 ul 標簽，我們可以這樣寫： `ul#ccc.ddd` 很簡單吧？比你用手寫 id 、class 方便多了吧 # 三、生成后代：> 大于號表示后面要生成的內容是當前標簽的后代。例如我要生成一個無序列表，而且被 class 為 aaa 的 div 包裹，那么可以使用下面指令： `div.aaa>ul>li` 可以生成如下的結構： ~~~ <div> <ul> <li></li> </ul> </div> ~~~ # 四、生成兄弟：+ 上面是生成下級元素，如果想要生成平級的元素，就需要使用 + 號。例如下面指令： `div+p+bq` 就可以生成如下的 HTML 結構： ~~~ <div></div> <p></p> <blockquote></blockquote> ~~~ # 五、生成上級元素：^ 上級（Climb-up）元素是什么意思呢？前面咱們說過了生成下級元素的符號“>”，當使用 div>ul>li 的指令之后，再繼續寫下去，那么后續內容都是在 li 下級的。如果我想編寫一個跟 ul 平級的 span 標簽，那么我需要先用 “^” 提升一下層次。例如： `div>ul>li^span` 就會生成如下結構： ~~~ <div> <ul> <li></li> </ul> <span></span> </div> ~~~ 如果我想相對與 div 生成一個平級元素，那么就再上升一個層次，多用一個“^”符號： `div>ul>li^^span` # 六、重復生成多份：特別是一個無序列表，ul 下面的 li 肯定不只是一份，通常要生成很多個 li 標簽。那么我們可以直接在 li 后面 * 上一些數字： `ul>li*5` 這樣就直接生成五個項目的無序列表了。如果想要生成多份其他結構，方法類似。 # 七、生成分組：()、用括號進行分組，這樣可以更加明確要生成的結構，特別是層次關系，例如： `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> ~~~ # 九、生成自定義屬性：[attr] a 標簽中往往需要附帶 href 屬性和 title 屬性，如果我們想生成一個 href 為 “http://www.haorooms.com/ ，title 為“haorooms 博客”的 a 標簽，可以這樣寫： `a[href="http://www.haorooms.com/" title="haorooms 博客"]` 其他標簽和屬性都類似。 # 十、對生成內容編號：$ 例如無序列表，我想為五個個 li 增加一個 class 屬性值 item1 ，然后依次遞增從 1-5，那么就需要使用 $ 符號： `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> ~~~ $ 就表示一位數字，只出現一個的話，就從1開始。如果出現多個，就從0開始。如果我想生成三位數的序號，那么要寫三個 $： `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> ~~~ 只能這樣單調的生成序號？對于強大的 Emmet 來說，肯定不會會了，我們也可以在 $ 后面增加 @- 來實現倒序排列： `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> ~~~ 同樣，我們也可以使用 @N 指定開始的序號： `ul>li.item$@3*5` 這樣就會從 3 開始排序，生成如下代碼： ~~~ <ul> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> <li class="item6"></li> <li class="item7"></li> </ul> ~~~ 配合上面倒序輸出，可以這樣寫： `ul>li.item$@-3*5` 生成的就是以 3 為底倒序： ~~~ <ul> <li class="item7"></li> <li class="item6"></li> <li class="item5"></li> <li class="item4"></li> <li class="item3"></li> </ul> ~~~ # 十一、生成文本內容：{} 上面講解了如何生成 HTML 標簽，那里面的內容呢？當然也可以生成了： `a[href="http://www.haorooms.com/"]{點擊這里到 haorooms 的博客}` 這樣就生成了一個到我博客的超鏈接了。在生成內容的時候，特別要注意前后的符號關系，雖然 a>{Click me} 和 a{Click me} 生成的結構是相同的，但是加上其他的內容就不一定了，例如： ~~~  <a href="">click</a><b>here</b>  <a href="">click<b>here</b></a> ~~~ 這樣就生成了完全不同的結構，注意這些小細節哦。 **不要有空格** 在寫指令的時候，你可能為了代碼的可讀性，使用一些空格什么的排版一下。這就會導致代碼無法使用。例如下面這句： `(header > ul.nav > li*5) + footer` 而去掉空格之后，就可以正常執行生成結構了。文章來源：http://www.haorooms.com/post/emmet_s