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="">```
link:css
<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>```
好了，这里就先列举这些常用的缩写，在日常的开发中使用这些缩写会使我们的效率得到极大提高，然后就有时间做更多自己喜欢的事情啦。至于说更多的缩写请参照Emment官网文档
本教程版权归Rozer和饥人谷所有，转载须说明来源
网友评论