Emmet插件技巧

调用快捷键：默认为ctrl+e在html和css文件中可tab调用

html:5 或!：用于HTML5文档类型

html:xt：用于XHTML过渡文档类型

html:4s：用于HTML4严格文档类型

div.foo      //<div class="foo"></div>添加类名  div可省略为.foo
div#foo      //<div id="foo"></div>添加ID      div可省略为#foo
div{文本}    //<div>文本</div>添加文本
div[style]  //<div style=""></div>添加属性

>嵌套子元素
h1>h2
<h1>
<h2></h2>
</h1>
+同级元素
h1+h2
<h1></h1>
<h2></h2>
^该标签后换行(使该符号前的标签提升一行)
h1>p^span
<h1>
<p></p>
</h1>
<span></span>

用()分组
(.foo>h1)+(.bar>h2)或者.foo>h1^.bar>h2
<div class="foo">
<h1></h1>
</div>
<div class="bar">
<h2></h2>
</div>

隐式标签
Emmet会根据父标签进行判定。比如在<ul>中输入.item，就会生成<li class="item"></li>。
<ul>.test</ul>
<ul><li class="test"></li></ul>
- li：用于ul和ol中
- tr：用于table、tbody、thead和tfoot中
- td：用于tr中
- option：用于select和optgroup中
-
定义多个元素
ul>li*3
<ul>
<li></li>
<li></li>
<li></li>
</ul>

ul>li.item*3
<ul>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>

ul>li#test$*3 用$变量定义多个ID名
<ul>
<li id="test1"></li>
<li id="test2"></li>
<li id="test3"></li>
</ul>

在html只有在属性或style标签内才生效 css后缀文件可直接生效

body{w100}

body{width: 100px;}

h1{w10p+h2x+p4e}
h1{width: 10%;
height: 2ex;
padding: 4em;}

-默认单位为px
- p 表示%
- e 表示 em
- x 表示 ex

@f
@font-face {
font-family:;
src:url();
}
@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;
}
@f+c#fff
@font-face {
font-family:;
src:url();
}
color: #fff;

模糊匹配
oh/ovh/o:h 都会生成下面这段代码
overflow: hidden;

前缀
非W3C标准的CSS属性，Emmet会自动加上供应商前缀，比如输入transform
-webkit-transform: ;
-ms-transform: ;
-o-transform: ;
transform: ;
在任意属性前加上“-”符号，也可以为该属性加上前缀
-border
-webkit-border: ;
-moz-border: ;
-ms-border: ;
-o-border: ;
border: ;
用缩写来指定前缀，比如-wm-bg表示只加上-webkit和-moz前缀：
-wm-bg
-webkit-background: #000;
-moz-background: #000;
background: #000;

- w 表示 -webkit-
- m 表示 -moz-
- s 表示 -ms-
- o 表示 -o-

渐变
lg(left, #fff 50%, #000)
background-image: -webkit-linear-gradient(left, #fff 50%, #000);
background-image: -o-linear-gradient(left, #fff 50%, #000);
background-image: linear-gradient(to right, #fff 50%, #000)

border1#f30solid
//border: 1px #f30 solid;

文字排版测试 可指定文字个数

lorem

//Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio est nemo sed a laudantium dolorum, laboriosam iste. Incidunt ex numquam, quae delectus. Repudiandae vitae, possimus culpa quas itaque natus, voluptatibus!

lorem3

//Lorem ipsum dolor.