调用快捷键:默认为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.