使用Emmet提高前端开发效率

在写HTML代码时，你有没有感到痛苦，我们甚至要花好多时间写这些符号<>,"",/,写CSS的时候，有时候要写一大堆的浏览器前缀。Emmet就是一款能解放我们的工具。

      Emmet是一款编辑器插件，支持多种编辑器支持。Emmet的前身是Zen coding，使用仿CSS选择器的语法来生成代码，在前端开发中，Emmet 使用缩写语法快速编写 HTML、CSS 以及实现其他的功能，极大的提高前端开发效率。
      我们之前提过的Sublime,VS code,Webstorm,Hbuilder已经内置了Emmet插件，如果你使用过这些编辑器，按下“tab”键即可瞬间也许你已经使用了Emmet强大的功能而不自知。
如果你用的编辑器没有内置Emmet，不要紧，大部分流行的编辑器都可以安装这个插件。

      我们假设你的编辑器已经安装了Emmet，现在就来了解一下它的常见用法吧。
更多用法见官方文档

在HTML代码中使用Emmet

一、生成html文档结构

新建一个HTML文档，输入“!”或“html:5”，然后按Tab键：

• !或html:5生成HTML5文档的初始结构
• html:4t生成HTML4（过渡）结构初始文档
• html:4s生成HTML4（严格）结构初始文档
• html:xt生成XHTML过渡文档类型

二、为元素添加id（#）、class（.）

三、嵌套 :子节点（>），兄弟节点（+），上级节点（^）

• 子节点（>）
  
• 兄弟节点（+）
  
• 上级节点（^）
  

四、重复（*），可以输出多个标签

五、分组（()），用()操作符进行分组，使编写的代码结构更加清晰、明了

六、属性 [attr]

七、自增符号：$

$的用法很灵活：
1、倒序：在$后添加@-
2、设定起始数字：在$后添加@起始数字
3、多个$,会在前面的位数上补零

八、文本（{}）

与其他用法结合

九、隐式标签

1、不指定标签，默认生成div标签。

2、根据其父标签，生成适当的子标签。
适用于：

• li：用于 ul 和 ol 中
• tr：用于 table、tbody、thead 和 tfoot 中
• td：用于 tr 中
• option：用于 select 和 optgroup 中

在CSS中使用Emmet缩写

一、值

单位别名列表：
p 表示%
e 表示 em
x 表示 ex

二、模糊匹配

如果有些缩写你拿不准，Emmet会根据你的输入内容匹配最接近的语法，比如输入ov:h、ov-h、ovh和oh，生成的代码是相同的：

overflow: hidden;  

大部分编辑器都有代码提示功能，模糊匹配功能有些鸡肋了。

三、附加属性

@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;
}

@m

@media screen {
    
}

五、供应商前缀

• 如果输入非W3C标准的CSS属性，Emmet会自动加上供应商前缀，比如输入bdrs，则会生成：
  

• 在任意属性前加上“-”符号，可以为该属性加上前缀。比如输入-p：
  

• 如果不希望加上所有前缀，可以使用缩写来指定，比如-wm-trf表示只加上-webkit和-moz前缀：
  
  前缀缩写如下：
  w 表示 -webkit-
  m 表示 -moz-
  s 表示 -ms-
  o 表示 -o-