Emmet經常使用語法

Emmet經常使用語法
一、輸入!和html:5（不能大寫），按下TAB 鍵，快速生成一個 HTML5 的標準文檔初始結構。
html:xt 生成 HTML4 過渡型
html:4s 生成 HTML4 嚴格型
二、生成帶有 id 、class 的 HTML 標籤
(1)Emmet 的語法有點相似 CSS 的語法，生成 id 爲 aaa 的 div 標籤，咱們只須要編寫下面指令：#aaaEmmet 默認的標籤爲 div ，若是咱們不給出標籤名稱的話，默認就生成 div 標籤。
(2)若是編寫一個 class 爲 bbb 的 span 標籤，咱們須要編寫下面指令：span.bbb
(3)編寫一個 id 爲 ccc 的 class 爲 ddd 的 ul 標籤，只要寫ul#ccc.ddd按下快捷鍵
三、生成後代：>
大於號表示後面要生成的內容是當前標籤的後代。例如我要生成一個無序列表，並且被 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.qianxingzhem.com」 ，title 爲「潛行者m 博客」的 a 標籤，能夠這樣寫：
a[href="http://www.qianxingzhem.com" title="潛行者m 博客"]
其餘標籤和屬性都相似。

九、對生成內容編號：$
例如無序列表，我想爲五個個 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.qianxingzhem.com"]{點擊這裏到 潛行者m 的博客}
這樣就生成了一個到我博客的超連接了。在生成內容的時候，特別要注意先後的符號關係，雖然 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
而去掉空格以後，就能夠正常執行生成結構了。HTML 語法部分說完了，如今回頭看看第一篇文字，你是否已經看懂了那一串指令？下一篇將會講解快速編寫 CSS 的技巧。