Emmet 語法介紹

時間 2019-11-26

標籤 emmet 語法介紹简体版

原文原文鏈接

1、生成 HTML 文檔初始結構

HTML 文檔的初始結構，就是包括 doctype、html、head、body 以及 meta 等內容。你只須要輸入一個「!」就能夠生成一個 HTML5 的標準文檔初始結構，你沒有看錯，輸入一個感嘆號（固然是英文符號），而後摁下 ctrl+E 鍵，就會發現生成了下面的結構：html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>

這就是一個 HTML5 的標準結構，也是默認的 HTML 結構。若是你想生成 HTML4 的過渡型結構，那麼輸入指令 html:xt,而後ctrl+E, 便可生成以下結構：ui

<!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 結構指令：spa

html:5 或者 ! 生成 HTML5 結構code

html:xt 生成 HTML4 過渡型xml

html:4s 生成 HTML4 嚴格型htm

2、生成帶有 id 、class 的 HTML 標籤

Emmet 的語法有點相似 CSS 的語法，生成 id 爲 aaa 的 div 標籤，咱們只須要編寫下面指令：排序

#aaa

Emmet 默認的標籤爲 div ，若是咱們不給出標籤名稱的話，默認就生成 div 標籤。若是編寫一個 class 爲 bbb 的 span 標籤，咱們須要編寫下面指令：文檔

span.bbb

而後就生成了對應的結構。同理，若是想要編寫一個 id 爲 ccc 的 class 爲 ddd 的 ul 標籤，咱們能夠這樣寫：get

ul#ccc.ddd

很簡單吧？比你用手寫 id 、class 方便多了吧博客

3、生成後代：>

大於號表示後面要生成的內容是當前標籤的後代。例如我要生成一個無序列表，並且被 class 爲 aaa 的 div 包裹，那麼可使用下面指令：

div.aaa>ul>li

能夠生成以下的結構：

<div> <ul> <li></li> </ul> </div>

4、生成兄弟：+

上面是生成下級元素，若是想要生成平級的元素，就須要使用 + 號。例以下面指令：

div+p+bq

就能夠生成以下的 HTML 結構：

<div></div> <p></p> <blockquote></blockquote>

5、生成上級元素：^

上級（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

6、重複生成多份：

特別是一個無序列表，ul 下面的 li 確定不僅是一份，一般要生成不少個 li 標籤。那麼咱們能夠直接在 li 後面 * 上一些數字：

ul>li*5

這樣就直接生成五個項目的無序列表了。若是想要生成多份其餘結構，方法相似。

7、生成分組：()、

用括號進行分組，這樣能夠更加明確要生成的結構，特別是層次關係，例如：

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>

8、此外，分組還能夠很方便的結合上面說的「*」符號生成重複結構：

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

9、生成自定義屬性：[attr]

a 標籤中每每須要附帶 href 屬性和 title 屬性，若是咱們想生成一個 href 爲「http://www.haorooms.com/ ，title 爲「haorooms 博客」的 a 標籤，能夠這樣寫：

a[href="http://www.haorooms.com/" title="haorooms 博客"]

其餘標籤和屬性都相似。

10、對生成內容編號：$

例如無序列表，我想爲五個個 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>

11、生成文本內容：{}

上面講解了如何生成 HTML 標籤，那裏面的內容呢？固然也能夠生成了：

a[href="http://www.haorooms.com/"]{點擊這裏到 haorooms 的博客}

這樣就生成了一個到我博客的超連接了。在生成內容的時候，特別要注意先後的符號關係，雖然 a>{Click me} 和 a{Click me} 生成的結構是相同的，可是加上其餘的內容就不必定了，例如：

<!-- a{click}+b{here} --> <a href="">click</a><b>here</b> <!-- a>{click}+b{here} --> <a href="">click<b>here</b></a>

這樣就生成了徹底不一樣的結構，注意這些小細節哦。

不要有空格

在寫指令的時候，你可能爲了代碼的可讀性，使用一些空格什麼的排版一下。這就會致使代碼沒法使用。例以下面這句：

(header > ul.nav > li*5) + footer

而去掉空格以後，就能夠正常執行生成結構了。

1. Emmet語法
2. Emmet 語法
3. emmet語法
4. Emmet(Zencoding)語法
5. 前端開發利器 Emmet 介紹與基礎語法教程
6. Emmet縮寫語法
7. Emmet 語法探析
8. Emmet開發語法
9. Jade基礎語法介紹
10. 【Emmet】HTML速寫之Emmet語法規則
更多相關文章...
• 網站主機介紹 - 網站主機教程
• SQLite 語法 - SQLite教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用
• Kotlin學習（一）基本語法

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。