Emmet
功能
snippet(代碼片段,不如用專門的片段插件)
abbreviation expand(簡寫展開)
目的
只有一個,加快web開發(編碼速度)
Emmet特性
簡寫支持嵌套
簡寫支持分組
簡寫支持乘法
簡寫支持自增和自減,起序,編號
解析簡寫代碼可以用Tab鍵或者Ctrl+E來調用
Emmet與HTML
1.創建初始文檔
只要輸入!或html:5，然后點擊tab鍵，你就會看到一個HTML5的doctype默認標簽
html:5或!：HTML5文檔類型
html:xt：XHTML過渡型文檔類型
html:xs：XHTML嚴格型文檔類型
html:4t：HTML4過渡型文檔類型
html:4s：HTML4嚴格型文檔類型
2.輕松添加類、id、文本和屬性
連續輸入元素名稱和ID，Emmet會自動為你補全
使用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.后代> 兄弟+ 上級^
使用>運算符可以用來生成彼此嵌套的元素:
div>ul>li>a
<div>
<ul>
<li><a href=""></a></li>
</ul>
</div>
使用+運算符可以用來生成彼此相鄰的元素：
h1+p+a
<h1></h1>
<p></p>
<a href=""></a>
使用^運算符，可以讓你的代碼返回上一層。當你使用>嵌套元素時，想讓后面的回到上一層，那么這個方法很適用
div>p>a^h1
<div>
<p><a href=""></a></p>
<h1></h1>
</div>
4.乘法 *
如果你想一次性生成多個相同的元素，那么就可以使用乘法運算符
ul>li*4
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
除了能一次性生成多個相同的標簽之外，我們還可以通過$符號做遞增；通過$@-符號做遞減；
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.省略標簽名
在Emmet中可以省略標簽名，Emmet會根據其父標簽進行判定。一般情況下都是生成div標簽。
.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→ 默認
p→ %
e→ em
r→ rem
x→ ex
例如fz1e font-size:1em
多個單位：CSS中的某些屬性，比如margin，允許多個值。只需要每個值之間使用（減號）-
例如：m10-20-30-40 margin: 10px 20px 30px 40px;
多個屬性：可以使用加號+運算符來創建多個屬性
例如：m10+p20+fz30
margin: 10px;
padding: 20px;
font-size: 30px;
Emmet定義了所有已知的CSS屬性和縮寫
盒模型相關
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;
字體相關
f展開為font: ;
fz展開為font-size: ;
ff展開為font-family: ;
fs展開為font-style: italic;
文本相關
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;
