一、快速編寫HTML代碼
1.? 初始化
HTML文檔需要包含一些固定的標簽曹步，比如宪彩、、等讲婚，現(xiàn)在你只需要1秒鐘就可以輸入這些標簽尿孔。比如輸入“!”或“html:5”，然后按Tab鍵：
html:5 或!：用于HTML5文檔類型
html:xt：用于XHTML過渡文檔類型
html:4s：用于HTML4嚴格文檔類型
2.? 輕松添加類筹麸、id活合、文本和屬性
連續(xù)輸入元素名稱和ID，Emmet會自動為你補全物赶，比如輸入p#foo：
連續(xù)輸入類和id白指，比如p.bar#foo，會自動生成：
下面來看看如何定義HTML元素的內(nèi)容和屬性酵紫。你可以通過輸入h1{foo}和a[href=#]告嘲，就可以自動生成如下代碼：
foo
3.? 嵌套
現(xiàn)在你只需要1行代碼就可以實現(xiàn)標簽的嵌套。
>：子元素符號奖地，表示嵌套的元素
+：同級標簽符號
^：可以使該符號前的標簽提升一行
效果如下圖所示：
4.? 分組
你可以通過嵌套和括號來快速生成一些代碼塊橄唬，比如輸入(.foo>h1)+(.bar>h2)，會自動生成如下代碼：
5.? 隱式標簽
聲明一個帶類的標簽参歹，只需輸入div.item仰楚，就會生成
。在過去版本中泽示，可以省略掉div缸血，即輸入.item即可生成
。現(xiàn)在如果只輸入.item械筛，則Emmet會根據(jù)父標簽進行判定捎泻。比如在- 中輸入.item，就會生成
- 埋哟。
下面是所有的隱式標簽名稱：
li：用于ul和ol中
tr：用于table笆豁、tbody郎汪、thead和tfoot中
td：用于tr中
option：用于select和optgroup中
6.? 定義多個元素
要定義多個元素，可以使用*符號闯狱。比如煞赢，ul>li*3可以生成如下代碼：
7.? 定義多個帶屬性的元素
如果輸入 ul>li.item$*3，將會生成如下代碼：
二哄孤、CSS縮寫
1.? 值
比如要定義元素的寬度照筑，只需輸入w100，即可生成
width:?100px;
除了px瘦陈，也可以生成其他單位凝危，比如輸入h10p+m5e，結(jié)果如下：
height:?10%;
margin:?5em;
單位別名列表：
p 表示%
e 表示 em
x 表示 ex
2.? 附加屬性
可能你之前已經(jīng)了解了一些縮寫晨逝，比如 @f蛾默，可以生成：
@font-face?{
font-family:;
src:url();
}
一些其他的屬性，比如background-image捉貌、border-radius支鸡、font、@font-face,text-outline趁窃、text-shadow等額外的選項牧挣，可以通過“+”符號來生成，比如輸入@f+棚菊，將生成：
@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.? 模糊匹配
如果有些縮寫你拿不準浸踩，Emmet會根據(jù)你的輸入內(nèi)容匹配最接近的語法叔汁，比如輸入ov:h统求、ov-h、ovh和oh据块，生成的代碼是相同的：
overflow:?hidden;
4.? 供應商前綴
如果輸入非W3C標準的CSS屬性码邻，Emmet會自動加上供應商前綴，比如輸入trs另假，則會生成：
-webkit-transform:?;
-moz-transform:?;
-ms-transform:?;
-o-transform:?;
transform:?;
你也可以在任意屬性前加上“-”符號像屋，也可以為該屬性加上前綴。比如輸入-super-foo：
-webkit-super-foo:?;
-moz-super-foo:?;
-ms-super-foo:?;
-o-super-foo:?;
super-foo:?;
如果不希望加上所有前綴边篮，可以使用縮寫來指定己莺，比如-wm-trf表示只加上-webkit和-moz前綴：
-webkit-transform:?;
-moz-transform:?;
transform:?;
前綴縮寫如下：
w 表示 -webkit-
m 表示 -moz-
s 表示 -ms-
o 表示 -o-
5.? 漸變
輸入lg(left, #fff 50%, #000)，會生成如下代碼：
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);
三戈轿、附加功能
生成Lorem ipsum文本
Lorem ipsum指一篇常用于排版設(shè)計領(lǐng)域的拉丁文文章凌受，主要目的是測試文章或文字在不同字型、版型下看起來的效果思杯。通過Emmet胜蛉，你只需輸入lorem 或 lipsum即可生成這些文字。還可以指定文字的個數(shù)，比如lorem10誊册，將生成：
引用
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero delectus.
四领突、定制
你還可以定制Emmet插件：
添加新縮寫或更新現(xiàn)有縮寫，可修改snippets.json文件
更改Emmet過濾器和操作的行為案怯，可修改preferences.json文件
定義如何生成HTML或XML代碼君旦，可修改syntaxProfiles.json文件
