这篇关于 Emmet 插件使用的博文之前就想写了，今天刚好闲暇时间，就花了一些时间进行了总结。
我们都这道 Emmet 这款插件在前端设计里被称为神器，确实，神器称号名不虚传。因为这款插件可以帮助我们高效的编写代码，以后写前端代码就不用复制粘贴了。仅仅寥寥几行代码，就可以把一个网页的整体框架给建立起来。好了话不多说，我们马上进入主题吧！
HMTL部分
1.创建标准的页面
创建标准 xhtml-1.0 页面：html:xt
创建标准 xhtml-1.1 页面：html:xxs
创建标准 html4 页面：html:4s
创建标准 html5 页面：!/html:5/html5
注意：单独输入 html 只是单独创建一个 html 标签
2.创建html标签
输入任意标签名，然后按下 tab 键就会自动生成成对的标签。
3.创建带类的标签
方式：标签名 . 类名
如：p.classname
4.创建带id的标签
方式：标签名 #id 名称
如：p#idname
5.创建带属性的标签
方式：标签名 [ 属性 = 属性值 ]
如：a[href=#]
6.创建带内容的标签
方式：标签名 { 文本内容 }
如：h1{text}
text
7.嵌套标签
嵌套使用的是符号 " > "
如：div>p
8.同级标签
同级使用的是符号 " + "
如：h1+h2
9.另一种特别的符号 " ^ "
" ^ " 可以使后面的标签提升一个层级
如：div^p
10.分组标签
" () " 可以将标签分组，十分常用
如：(div>p)+(div>p)
11.隐式标签
隐式标签就是当你不写的时候，默认生成的标签。
如：(.classname>p)+(.classname>p)
这里的 div 标签就是隐式标签。当然不能写成：(>p)+(>p)
所有隐式标签：
li:用于ul和ol中
tr:用于table,tboby,thead和tfoot中
td:用于tr中
option:用于select和optgroup中
div 在块级元素中默认，span 在行内元素中默认
12.同时创建多个标签
同时创建多个标签使用的是 " * "
如：div>p*3
13.同时创建多个带类名的标签
如：ul>li.classname$*3
14.同时创建多个带类名、内容、属性的标签
如：div>p.classname$[style=font-size:2$px]{$}*5
1
2
3
4
5
Css部分：
1.设置属性值
如：w100
width: 100px;
当然除了px，还有其他的单位如：p, e, x
如：h20p+m2e+p2x
height: 20%;margin: 2em;padding: 2ex;
p:%
e:em x:ex2.附加属性
如：@f
@font-face { font-family:; src:url();} 如果需要其他的属性，如：background-image, border-radius, font 等，可以使用 " + " 来生成。
如：@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 会根据你的输入内容匹配最接近的语法。
如：ov:h, ov-h, ovh, oh 生成的代码是相同的
overflow: hidden;
4.供应商前缀
如果输入非 W3C 标准的 CSS 属性，Emmet 会自动加上供应商前缀。
如：trs
-webkit-transition: prop time;-o-transition: prop time;transition: prop time;
你也可以在任意属性前加上 " - " 符号，也可以为该属性加上前缀。
如：-super-foo
-webkit-super-foo: ;-moz-super-foo: ;-ms-super-foo: ;-o-super-foo: ;super-foo: ;
如果不希望加上所有前缀，可以使用缩写来指定。
如：-wm-trf
-webkit-transform: ;-moz-transform: ;transform: ;
表示只加上-webkit和-moz前缀。
以下是缩写形式：
w:-webkit-
m:-moz- s:-ms- o:-o-5.渐变
如：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);
特殊的例子：
em>.classnameaa:linka:mailabbracronymbasebasefont brframehr
bdobdo:rbdo:lcollink link:css link:print link:favicon link:touch link:rss link:atom meta meta:utf meta:win meta:vp meta:compat stylescriptscript:srcimgiframeembed
附：
" $ " 代表自增符号
" $@- " 代表自减 " $@3 " 代表从3开始自增 " $@-3 " 代表从3开始自减