在前端開發的過程中，大部分的工作是寫 HTM L和 CSS 代碼。手動編寫代碼的時候，效率會特别低下，因為需要敲打很多尖括号，盡管一些軟體給開發者提供了一些能快速編寫代碼方式，但是效率提高不是特别的明顯。
于是，就有了 Emmet(前身是Zen Coding) 橫空出世！
它可以極大的提高代碼編寫的效率，它提供了一種非常簡練的文法規則，然後立刻生成對應的 HTML 結構或者 CSS 代碼，同時還有多種實用的功能幫助進行前端開發。
目前，很多前端開發工具，包括 Webstorm，HBuilder，Dreamweaver ，VSCode 等都已經內建了 Emmet。
沒有內建 Emmet 的編輯器都提供了安裝插件，如 Sublime Text、Eclipse/Aptana、Notepad++等。
關于webstorm的 Emmet 快捷鍵，網上有，但是沒有一個總的集合。
基于我自己的使用 Webstorm 的經驗，特寫此文，總結一下 Emmet 的快捷方式，也給新手做一個使用指南。
Emmet 在 webstorm 中，通過簡寫代碼+ tab鍵就可以生成對應的完整代碼。
更多簡寫方式，可以參考 Emmet 官網：https://docs.emmet.io/cheat-sheet/
一、寫标簽
1.快速生成 HTML5 網頁結構
! + tab
html:5 + tab
<!doctype html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
個人覺得這種方式生成的HTML5架構，比 webstorm 自帶的HTML5架構來的更實在。
2. 生成meta
編碼設定
meta:utf + tab
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
viewport 是移動端開發必備代碼。
meta:vp + tab
<meta name="viewport" content="width=device-width, initial-scale=1.0">
3. 生成link
引入 CSS 檔案。
link
<link rel="stylesheet" href="" target="_blank" rel="external nofollow" >
link:css
<link rel="stylesheet" href="style.css" target="_blank" rel="external nofollow" >
引入網站小圖示。
link:favicon
<link rel="shortcut icon" href="favicon.ico" target="_blank" rel="external nofollow" type="image/x-icon">
4. id（#）,class（.）
div.box
<div class="box"></div>
div#header
<div id="header"></div>
div.box#header
<div class="box" id="header"></div>
div.box.top#header
<div class="box top" id="header"></div>
5. 屬性（ [ ] ）
div[title]
<div title=""></div>
div[title]
<div title=""></div>
button[type=submit][name=login]
<button type="submit" name="login"></button>
button[type=submit name=login]
<button type="submit" name="login"></button>
6. 子節點（>），兄弟節點（+），上級節點（^）
div.box>p
<div class="box">
<p></p>
</div>
div.box+p
<div class="box"></div>
<p></p>
div.box>p+div.small^div.next
<div class="box">
<p></p>
<div class="small"></div>
</div>
<div class="next"></div>
7. 重複（ * ）、内容（ { } ）、自增符（ $ ）
ul.list>li*3
<ul class="list">
<li></li>
<li></li>
<li></li>
</ul>
ul.list>li{這個是清單}*3
<ul class="list">
<li>這個是清單</li>
<li>這個是清單</li>
<li>這個是清單</li>
</ul>
ul.list>li.item${這個是清單 $ }*3
<ul class="list">
<li class="item1">這個是清單 1</li>
<li class="item2">這個是清單 2</li>
<li class="item3">這個是清單 3</li>
</ul>
ul.list>li{ 内容 $$$}*3
<ul class="list">
<li> 内容 001</li>
<li> 内容 002</li>
<li> 内容 003</li>
</ul>
插入無意義的文字：lorem 其後加上數字就會生成對應數量的無意義的文字，補全文本，友善排版
lorem10
-----------
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, exercitationem?
8. 一些特殊情況
（1）類型較多的标簽
比如，a，input，其他依次類推。
以下也可以用 标簽[屬性=值] 的方式去寫
a:link
<a href="http://" target="_blank" rel="external nofollow" ></a>
a:mail
<a href="mailto:" target="_blank" rel="external nofollow" ></a>
input
<input type="text">
input:button
<input type="button" value="">
input:submit
<input type="submit" value="">
input:range
<input type="range" name="" id="">
input:radio
<input type="radio" name="" id="">
（2）如果不寫标簽名，預設就是 div
.box
<div class="box"></div>
（3）自帶的子标簽是可以省略的
table>.a>.b*2
<table>
<tr class="a">
<td class="b"></td>
<td class="b"></td>
</tr>
</table>
ul>.item*2
<ul>
<li class="item"></li>
<li class="item"></li>
</ul>
二、寫樣式
寫樣式主要秉承的原則，簡寫就是單詞的首字母。
tdn
text-decoration: none;
ovh
overflow: hidden;
如果有數值，直接在後面寫就是。
h100px
height: 100px;
非數值的值，就用冒号（:）連接配接首字母。
bg:n
background: none;
更多的樣式簡寫，大家可以參考 Emmet 官網：https://docs.emmet.io/cheat-sheet/
總的來說，個人覺得要多寫，才能熟練。熟練了，工作效率自然就提高了。
![git新手學習筆記前言一、git是什麼？二、下載下傳方法及相關配置三、使用介紹總結[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)