Emmet

功能
snippet(代碼片段,不如用專門的片段插件)
abbreviation expand(簡寫展開)

目的
只有一個,加快web開發(fā)(編碼速度)

Emmet特性
簡寫支持嵌套
簡寫支持分組
簡寫支持乘法
簡寫支持自增和自減,起序,編號

解析簡寫代碼可以用Tab鍵或者Ctrl+E來調(diào)用

Emmet與HTML

1.創(chuàng)建初始文檔

只要輸入!或html:5，然后點(diǎn)擊tab鍵，你就會看到一個HTML5的doctype默認(rèn)標(biāo)簽

html:5或!：HTML5文檔類型
html:xt：XHTML過渡型文檔類型
html:xs：XHTML嚴(yán)格型文檔類型
html:4t：HTML4過渡型文檔類型
html:4s：HTML4嚴(yán)格型文檔類型

2.輕松添加類、id、文本和屬性

連續(xù)輸入元素名稱和ID，Emmet會自動為你補(bǔ)全

使用E#ID添加ID名
使用E.class添加類名
使用E[attr]添加屬性
使用E{text}添加文本

div#d1.test

 <div id="d1" class="test"></div> 

a#a1.test[href=#]{返回首頁}

<a href="#" id="a1" class="test">返回首頁</a>

3.后代> 兄弟+ 上級^

使用>運(yùn)算符可以用來生成彼此嵌套的元素:
div>ul>li>a

<div>
<ul>
    <li><a href=""></a></li>
</ul>

</div>

使用+運(yùn)算符可以用來生成彼此相鄰的元素：
h1+p+a

 <h1></h1>
 <p></p>
 <a href=""></a>

使用^運(yùn)算符，可以讓你的代碼返回上一層。當(dāng)你使用>嵌套元素時，想讓后面的回到上一層，那么這個方法很適用
div>p>a^h1

<div>
    <p><a href=""></a></p>
    <h1></h1>
</div>

4.乘法 *

如果你想一次性生成多個相同的元素，那么就可以使用乘法運(yùn)算符
ul>li*4

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

除了能一次性生成多個相同的標(biāo)簽之外，我們還可以通過$符號做遞增；通過$@-符號做遞減；
ul>li.lie$*5

<ul>
    <li class="lie1"></li>
    <li class="lie2"></li>
    <li class="lie3"></li>
    <li class="lie4"></li>
    <li class="lie5"></li>
</ul>

ul>li.lie$@3*5

<ul>
    <li class="lie3"></li>
    <li class="lie4"></li>
    <li class="lie5"></li>
    <li class="lie6"></li>
    <li class="lie7"></li>
</ul>

ul>li.lie$@-3*5

<ul>
    <li class="lie7"></li>
    <li class="lie6"></li>
    <li class="lie5"></li>
    <li class="lie4"></li>
    <li class="lie3"></li>
</ul>

5.組合 ()

為了更有效的利用嵌套，我們常會制作一些代碼片段。在Emmet中你可以通過()將一個塊組合在一起
ul>(li>a)*4

<ul>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
</ul>

(ul>(li>a)*4)+(select>option*4)+p

  <ul>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
  </ul>
  <select name="" id="">
    <option value=""></option>
    <option value=""></option>
    <option value=""></option>
    <option value=""></option>
  </select>
  <p></p>

6.省略標(biāo)簽名

在Emmet中可以省略標(biāo)簽名，Emmet會根據(jù)其父標(biāo)簽進(jìn)行判定。一般情況下都是生成div標(biāo)簽。
.test

<div class="test"></div>

在實際中還有一下情況

ul和 ol中輸入指的是li
table、tbody、thead和tfoot指的是tr
tr中指的是td
select指的是option

例如：ul>.test

<ul>
    <li class="test"></li>
</ul>

Emmet與CSS

屬性值：CSS的屬性，它只需要添加一個值。這是通過一個組合縮寫和所需要的值一起來完成。例如，fz18將輸出font-size:18px
單位：在Emmet中每一個單位都有其縮寫形式：

px→ 默認(rèn)
p→ %
e→ em
r→ rem
x→ ex

例如fz1e font-size:1em

多個單位：CSS中的某些屬性，比如margin，允許多個值。只需要每個值之間使用（減號）-
例如：m10-20-30-40 margin: 10px 20px 30px 40px;
多個屬性：可以使用加號+運(yùn)算符來創(chuàng)建多個屬性
例如：m10+p20+fz30

  margin: 10px;
  padding: 20px;
  font-size: 30px;

Emmet定義了所有已知的CSS屬性和縮寫
盒模型相關(guān)

d展開為display: block;
d:n展開為display:none;
d:f展開為display:flex;
d:i展開為display:inline;

d:ib展開為display: inline-block;
fl展開為float: left;
fl:r展開為float: right;
fl:n展開為float: none;
pos展開為position:relative;
pos:a展開為position: absolute;
pos:f展開為position:fixed;
m展開為margin: ;
m:a展開為margin: auto;
mt展開為margin-top: ;
類型的還有 mt,mb,mr
p展開為padding: ;
其他和margin類型
bxz展開為box-sizing: border-box;

字體相關(guān)

f展開為font: ;
fz展開為font-size: ;
ff展開為font-family: ;

fs展開為font-style: italic;

文本相關(guān)

va展開為vertical-align: top;
va:m展開為vertical-align: middle;
ta展開為text-align: left;
ta:c展開為text-align: center;
td:n展開為text-decoration: none;
wos展開為word-spacing: ;
c展開為color: #000;
c:r展開為color: rgb(0, 0, 0);
c:ra展開為color: rgba(0, 0, 0, .5);

op展開為opacity: ;
op+展開為opacity: ;filter: alpha(opacity=);

背景

bg展開為background: #000;
bg+展開為background: #fff url() 0 0 no-repeat;
bgc展開為background-color: #fff;
bgi展開為background-image: url();
bgr展開為background-repeat: ;
bgp展開為background-position: 0 0;
bgsz展開為background-size: ;

邊框和輪廓

bd展開為border: ;
bd+展開為border: 1px solid #000;
bd:n展開為border: none;
bdl展開為border-left: ;
bdl+展開為border-left: 1px solid #000;
bdrs展開為border-radius: ;
bdc:t展開為border-color: transparent;
ol展開為outline: ;

列表

lis展開為list-style: ;
lst展開為list-style-type: ;
list:n展開為list-style-type:none;

其他

!展開為!important
anim展開為animation: ;
anim-展開為animation:name duration timing-function delay iteration-count direction fill-mode;
trf展開為transform: ;
trf:r展開為transform: rotate(angle);
trf:rx展開為transform: rotateX(angle);
trf:sc展開為transform: scale(x, y);
trf:t展開為transform: translate(x, y);
trf:t3展開為transform: translate3d(tx, ty, tz);
trs展開為transition: prop time;
us展開為user-select: none;