Emmet插件: 提高效率的必備"神器"
工欲善其事，必先利其器
本文推薦Emmet插件，HTML/CSS代碼快速編寫"神器"~~，快來(lái)和我一起學(xué)習(xí)吧
一、快速編寫HTML代碼
1.? 初始化?
HTML文檔需要包含一些固定的標(biāo)簽，比如<html>、<head>、<body>等，現(xiàn)在你只需要1秒鐘就可以輸入這些標(biāo)簽。
比如輸入“!”或“html:5”，然后按Tab鍵：
<!DOCTYPE?html>
<html>
<head>
? ? ? ? ? ?<meta charset="utf-8"? />
? ? ? ? ? ?<title></title>
? ? ?</head>
? ? ? <body>
? ? ? </body>
</html>
2.?輕松添加類、id、文本和屬性
連續(xù)輸入元素名稱和ID，Emmet會(huì)自動(dòng)為你補(bǔ)全，比如輸入p#foo：
Html代碼?
<p id="foo"></p>?
連續(xù)輸入類和id，比如p.bar#foo，會(huì)自動(dòng)生成：?
Html代碼?
<p class="bar" id="foo"></p>?
下面來(lái)看看如何定義HTML元素的內(nèi)容和屬性。你可以通過(guò)輸入h1{foo}和a[href=#]，就可以自動(dòng)生成如下代碼：
Html代碼?
<h1>foo</h1>??
<a href="#"></a>
?
3.? 嵌套?
現(xiàn)在你只需要1行代碼就可以實(shí)現(xiàn)標(biāo)簽的嵌套。?
>：子元素符號(hào)，表示嵌套的元素
+：同級(jí)標(biāo)簽符號(hào)
^：可以使該符號(hào)前的標(biāo)簽提升一行
4.? 分組?
你可以通過(guò)嵌套和括號(hào)來(lái)快速生成一些代碼塊，比如輸入(.foo>h1)+(.bar>h2)，會(huì)自動(dòng)生成如下代碼：?
Html代碼?
<div class="foo">??
? <h1></h1>??
</div>??
<div class="bar">??
? <h2></h2>??
</div>?
5.? 隱式標(biāo)簽?
聲明一個(gè)帶類的標(biāo)簽，只需輸入div.item，就會(huì)生成<div></div>。?
在過(guò)去版本中，可以省略掉div，即輸入.item即可生成<div></div>。
現(xiàn)在如果只輸入.item，則Emmet會(huì)根據(jù)父標(biāo)簽進(jìn)行判定。比如在<ul>中輸入.item，就會(huì)生成<li></li>。
下面是所有的隱式標(biāo)簽名稱：?
li：用于ul和ol中
tr：用于table、tbody、thead和tfoot中
td：用于tr中
option：用于select和optgroup中
6.? 定義多個(gè)元素?
要定義多個(gè)元素，可以使用*符號(hào)。比如，ul>li*3可以生成如下代碼：?
Html代碼?
<ul>??
? <li></li>??
? <li></li>??
? <li></li>??
</ul>
?7.? 定義多個(gè)帶屬性的元素?
如果輸入?ul>li.item$*3，將會(huì)生成如下代碼：?
Html代碼?
<ul>??
? <li class="item1"></li>??
? <li class="item2"></li>??
? <li class="item3"></li>??
</ul>
二、CSS縮寫?
1.? 值?
比如要定義元素的寬度，只需輸入w100，即可生成?
css代碼?
width: 100px;
除了px，也可以生成其他單位，比如輸入h10p+m5e，結(jié)果如下：?
css代碼?
height: 10%; ?
margin: 5em;
單位別名列表：?
p 表示%
e 表示 em
x 表示 ex
2.? 附加屬性?
可能你之前已經(jīng)了解了一些縮寫，比如?@f，可以生成：?
css代碼?
@font-face {
? ?font-family:;
? ?src:url();
??}
一些其他的屬性，比如background-image、border-radius、font、@font-face,text-outline、text-shadow等額外的選項(xiàng)，可以通過(guò)“+”符號(hào)來(lái)生成，比如輸入@f+，將生成：?
css代碼?
@font-face {??
? font-family: 'FontName';??
? src: url('FileName.eot');??
? src: url('FileName.eot?#iefix') format('embedded-opentype'),??
? ? ?url('FileName.woff') format('woff'),??
? ? ?url('FileName.ttf') format('truetype'),??
? ? ?url('FileName.svg#FontName') format('svg');??
? font-style: normal;??
? font-weight: normal;??
}
3.? 模糊匹配?
如果有些縮寫你拿不準(zhǔn)，Emmet會(huì)根據(jù)你的輸入內(nèi)容匹配最接近的語(yǔ)法，比如輸入ov:h、ov-h、ovh和oh，生成的代碼是相同的：?
css代碼?
overflow: hidden;
4.? 供應(yīng)商前綴?
如果輸入非W3C標(biāo)準(zhǔn)的CSS屬性，Emmet會(huì)自動(dòng)加上供應(yīng)商前綴，比如輸入trs，則會(huì)生成：?
css代碼?
-webkit-transform: ;
?-moz-transform: ;
??-ms-transform: ;
??-o-transform: ;
??transform: ;
你也可以在任意屬性前加上“-”符號(hào)，也可以為該屬性加上前綴。比如輸入-super-foo：?
css代碼?
-webkit-super-foo: ;
?-moz-super-foo: ;
?-ms-super-foo: ;
??-o-super-foo: ;
??super-foo: ;
?
如果不希望加上所有前綴，可以使用縮寫來(lái)指定，比如-wm-trf表示只加上-webkit和-moz前綴：?
css代碼?
-webkit-transform: ;
?-moz-transform: ;
?transform: ;
前綴縮寫如下：?
w 表示 -webkit-
m 表示 -moz-
s 表示 -ms-
o 表示 -o-
5.? 漸變?
輸入lg(left, #fff 50%, #000)，會(huì)生成如下代碼：?
css代碼?
background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #fff), to(#000));??
background-image: -webkit-linear-gradient(left, #fff 50%, #000);??
background-image: -moz-linear-gradient(left, #fff 50%, #000);??
background-image: -o-linear-gradient(left, #fff 50%, #000);??
background-image: linear-gradient(left, #fff 50%, #000);
趕快收藏吧！小小插件，大大效率
茍有恒 , 何必三更眠五更起
關(guān)注我，一起學(xué)習(xí)吧
