Emment使用手册

Emment是个神奇的插件，它具有一些神奇的力量，你不用的话是永远想象不到它的魅力所在。它的神奇在于可使美丽的姑娘永葆青春，使帅气的小伙更加健硕，它是电，它是光，它是唯一的．．．．额，不好意思走错片场了。好了，回归正题，Emment确实是前端开发者必备的工具，使用它可以大大提高前端开发效率。

Emment为大部分的编辑器都提供了安装插件，一些在线编辑器也有Emment的支持。Emment的使用方法非常简单，直接在编辑器上输入HTML和CSS代码的缩写，然后按下tab键。嗯，接下来就是见证奇迹的时刻，然而程序员的世界里并没有奇迹，有的只是bug。好吧，又废话了，请忽略这句。按下tab键后缩写就会补全为完整的代码片段。

下面就介绍一些常用的Emment语法

! 　　　 新建一个HTML 5的标准文档初始结构

    
    


    

 ```
div　　　新建一个div标签

```
div*3 　　　新建三个div标签

```
div.content　　新建一个div并且其class为content

```
div#content　　新建一个div并且其id为content

```
div>ul>il

```
div+p+span

```
ul>il*3

```
ul>li.item$*5

    
    
    
    
    
```
h$[title=item$]{Header $}*3

Header 1

Header 2

Header 3

```
ul>li.item$$$*5

    

    

    

    

    

```
\#header

```
.header

```
div.class1.class2.class3

```
p[title="Hello world"]

```
a

```
a:link

```
link

```
link:css

```
img

```
object

```
area

```
form

```
form:get

```
form:post

```
inp

```
input:psaaword

```
input:r

```
inout:s

```
textarea

```
btn:b

```
bd

border```
bd+

border: 1px solid #000;```
bdt+

border-top: 1px solid #000;```
m: a

margin:auto;```
mt:a

margin-top:auto;```
c

color: #000;```
c:r

color: rgb(0, 0, 0);```
c:ra

color: rgba(0, 0, 0, .5);```
bgc

background-color: ```
fs

font-style: ```
table+

```

好了，这里就先列举这些常用的缩写，在日常的开发中使用这些缩写会使我们的效率得到极大提高，然后就有时间做更多自己喜欢的事情啦。至于说更多的缩写请参照Emment官网文档

本教程版权归Rozer和饥人谷所有，转载须说明来源