Emment使用手册

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

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html> ```
div　　　新建一个div标签

<div></div>```
div*3 　　　新建三个div标签

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

<div class="content"></div>```
div#content　　新建一个div并且其id为content

<div id="content"></div>```
div>ul>il

<div>
<ul>
<il></il>
</ul>
</div>```
div+p+span

<div></div>
<p></p>
<span></span>```
ul>il*3

<ul>
<il></il>
<il></il>
<il></il>
</ul>```
ul>li.item$*5

<ul>
    <il class="item1"></il>
    <il class="item2"></il>
    <il class="item3"></il>
    <il class="item4"></il>
    <il class="item5"></il>
</ul>```
h$[title=item$]{Header $}*3

<h1 title="item1">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3>```
ul>li.item$$$*5

<ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
    <li class="item004"></li>
    <li class="item005"></li>
</ul>```
\#header

<div id="header"></div>```
.header

<div class="header"></div>```
div.class1.class2.class3

<div class="class1 class2 class3"></div>```
p[title="Hello world"]

<p title="Hello world"></p>```
a

<a href=""></a>```
a:link

<a href="http://"></a>```
link

<link rel="stylesheet" href="style.css">```
img

<img src="" alt="">```
object

<object data="" type=""></object>```
area

<area shape="" coords="" href="" alt="">```
form

<form action=""></form>```
form:get

<form action="" method="get"></form>```
form:post

<form action="" method="post"></form>```
inp

<input type="text" name="" id="">```
input:psaaword

<input type="password" name="" id="">```
input:r

<input type="radio" name="" id="">```
inout:s

<input type="submit" value="">```
textarea

<textarea name="" id="" cols="30" rows="10"></textarea>```
btn:b

<button type="button"></button>```
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+

<table>
<tr>
<td></td>
</tr>
</table>```

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

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