您好,欢迎来到二三四教育网。
搜索
您的当前位置:首页Emment使用手册

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="">```
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>```

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

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

Copyright © 2019- how234.cn 版权所有 赣ICP备2023008801号-2

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务