一、快速編輯HTML代碼
1、添加類、id、文本和屬性
（1）輸入 .box
|
1
|
<
div
class="box"></
div
>
|
（2）輸入p#wrap
|
1
|
<
p
id="wrap"></
p
>
|
（3）類和id一起輸入 .box.text
|
1
|
<
div
id="box" class="text"></
div
>
|
（4）元素和內容一塊輸出 p{add}
|
1
|
<
p
>add</
p
>
|
（5）輸出屬性 a[href=#]
|
1
|
<
a
href="#"></
a
>
|
2、嵌套
（1）輸入div+p
|
1
2
|
<
div
></
div
>
<
p
></
p
>
|
（2）輸入ul>li*3>a
|
1
2
3
4
5
|
<
ul
>
<
li
><
a
href=""></
a
></
li
>
<
li
><
a
href=""></
a
></
li
>
<
li
><
a
href=""></
a
></
li
>
</
ul
>
|
(3) >：子元素符號，表示嵌套的元素
+：同級標簽符號
3、分組
可以通過嵌套和括號來快速生成一些代碼塊(.foo>h1)+(.bar>h2)
|
1
2
3
4
5
6
|
<
div
class="foo">
<
h1
></
h1
>
</
div
>
<
div
class="bar">
<
h2
></
h2
>
</
div
>
|
4、定義多個帶屬性的元素
輸入ul>li.item$*3，代碼輸出
|
1
2
3
4
5
|
<
ul
>
<
li
class="item1"></
li
>
<
li
class="item2"></
li
>
<
li
class="item3"></
li
>
</
ul
>
|
二、CSS縮寫
1. 值
比如要定義元素的寬度，只需輸入w100，即可生成
|
1
|
width: 100px;
|
注：除了px，也可以生成其他單位
- p 表示%
- e 表示 em
- x 表示 ex
2. 附加屬性
可能你之前已經了解了一些縮寫，比如 @f，可以生成：
|
1
2
3
4
|
1
@font-face {
2
font-family
:;
3
src
:
url
();
4
}
|
3. 模糊匹配
如果有些縮寫你拿不准，Emmet會根據你的輸入內容匹配最接近的語法，比如輸入ov:h、ov-h、ovh和oh，生成的代碼是相同的：
|
1
|
overflow
:
hidden
;
|
4、供應商前綴
如果輸入非W3C標准的CSS屬性，Emmet會自動加上供應商前綴，比如輸入trs，則會生成：（未實現）
|
1
2
3
4
5
|
1
-webkit-transform: ;
2
-moz-transform: ;
3
-ms-transform: ;
4
-o-transform: ;
5
transform: ;
|
你也可以在任意屬性前加上“-”符號，也可以為該屬性加上前綴。比如輸入-super-foo：
|
1
2
3
4
5
|
1
-webkit-super-foo: ;
2
-moz-super-foo: ;
3
-ms-super-foo: ;
4
-o-super-foo: ;
5
super-foo: ;
|
如果不希望加上所有前綴，可以使用縮寫來指定，比如-wm-trf表示只加上-webkit和-moz前綴：
|
1
2
3
|
-webkit-transform: ;
-moz-transform: ;
transform: ;
|
前綴縮寫如下：
w 表示 -webkit-
m 表示 -moz-
s 表示 -ms-
o 表示 -o-
5、漸變
輸入lg(left, #fff 50%, #000)，會生成如下代碼：（未實現）
|
1
2
3
4
5
|
1
background-image
: -webkit-gradient(linear,
0
0
,
100%
0
, color-stop(
0.5
,
#fff
), to(
#000
));
2
background-image
: -webkit-linear-gradient(
left
,
#fff
50%
,
#000
);
3
background-image
: -moz-linear-gradient(
left
,
#fff
50%
,
#000
);
4
background-image
: -o-linear-gradient(
left
,
#fff
50%
,
#000
);
5
background-image
: linear-gradient(
left
,
#fff
50%
,
#000
);
|