使用Emmet快速生成HTML代碼
在前端開發裏面，經常會遇到很多重複的操作，比如：標籤、屬性、尖括號、標籤閉合等，令人不勝其煩，在這裏我們將介紹一些快捷方式來生成HTML代碼。
1、前期準備：
使用編寫HTML的編輯器（除文本以外），比如：HBuilder X 、Visual Studio Code…
2、編寫流程
打開 HTML 或 CSS 文件->按語法編寫指令->按下 TAB 鍵->生成
3、具體語法
（1）帶有id與class的HTML標籤
“.”表示id
“#”表示class
div.page
生成的HTML代碼如下：
<div class="page"></div>
div#page
生成的HTML代碼如下：
<div id="page"></div>
（2）“+” 爲兄弟標籤，即平級元素，使用指令 + ，例如下面指令：
div+ul+li+span
生成的HTML代碼如下：
<div></div>
<ul></ul>
<li></li>
<span></span>
（3）“>”爲後代元素
表示後面要生成的內容是當前標籤的後代。例如我要生成一個無序列表，而且被 class 爲 nav 的 div 包裹，那麼可以使用下面指令：
div>ul>li>span
生成的HTML代碼如下：
<div>
<ul>
<li><a href=""></a></li>
</ul>
</div>
（4）“^”爲上級元素
前面咱們說過了生成下級元素的符號“>”，當使用 div>ul>li 的指令之後，再繼續寫下去，那麼後續內容都是在 li 下級的。如果我想編寫一個跟 ul 平級的 span 標籤，那麼我需要先用 “^” 提升一下層次。**
div.nav>ul>li^span
生成的HTML代碼如下：
<div class="nav">
<ul>
<li></li>
</ul>
<span></span>
</div>
（5）“*”爲重複多份
ul>li*5
生成的HTML代碼如下：
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
（6）“（）”爲分組元素
用括號進行分組，表示一個代碼塊，分組內部的嵌套和層級關係和分組外部無關，例如：
div>(header>ul>li*2>a)+footer>p
生成的HTML代碼如下：
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
（7）“[ attr ]”
a 標籤中往往需要附帶 href 屬性和 title 屬性，如果我們想生成一個 href 爲 “http://baidu.com”，title 爲“百度一下”的 a 標籤，可以這樣寫：
a[href=“http://baidu.com” title=“百度一下”]
生成的HTML代碼如下：
<a href="http://baidu.com" title="“百度一下”"></a>
（8）“$”編號
例如無序列表，我想爲五個 li 增加一個 class 屬性值 item1 ，然後依次遞增從 1-5，那麼就需要使用 $ 符號：
ul>li.item$*5
生成的HTML代碼如下：
<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>
（9）此外還有許多快捷的輸入方式
在css裏面輸入w200
就如下所示：
width：200px；
輸入m20-30
就如下所示：
margin：20px 30px;