Emmet插件使用方法

emmet使用方法

emmet的前身是大名鼎鼎的zen coding，它使用仿css选择器的语法来生成代码。

快速编写HTML代码

初始化

html:5或者!：用于HTML5文档类型
html:xt：用于XHTML过渡文档类型
html:4s：用于HTML4严格文档类型

轻松添加类，id文本和属性

添加类和id

p.bar#foo

定义元素的内容和属性

h1{foo}
a[href=#]

嵌套

>：子元素符号
+：同级元素符号
^：可以使该符号前的标签提升一行

分组

通过嵌套和括号快速生成代码块：

(.foo>h1)+(.bar>h2)

隐式声明

输入.item，emmet会根据父标签来进行判定。
比如，在<ul>中输入.item，就会生成<li class="item"></li>
下面是所有隐形标签的名称
- li
- tr
- td
- option

定义多个元素

使用*来定义多个元素

ul>li*3

定义多个带属性的元素

ul>li.item$*3

CSS缩写

值

宽度：w100 宽度：h10p+m5e

height: 10p;
margin: 5em;

p表示百分比 e表示em x表示ex

附加属性

@f可以生成

@font-face {
  font-family;
  src:url();
}

模糊匹配

供应商前缀

输入trs

-webkit-transform:;
-moz-transform:;
-ms-transform:;
-o-transform:;
transform:;

渐变

附加功能

lorem或者lipsum即可生成文字，还可以加数字指定个数。