在进行前端开发的时候,经常要手动写一些Html和CSS代码,有时候手写比较的繁琐。所以Emmet语法就出现了,主要作用就是类似于快捷键的作用,只需要敲出几个字母就可以快速自动生成一段代码,大大提高开发效率。
Emmet是一款插件,只要能安装他的编辑器都能使用,大部分编辑器都可以使用该语法规则,我们平时开发的:Sublime Text、Eclipse、Notepad++、VS code、Atom、Dreamweaver
等等编辑器都可以使用。
那么接下来,就通过官方的文档给大家讲解,简单直接。
一、基础语法示例:
子节点(Child):>
输入:nav>ul>li
自动生成:
<nav>
<ul>
<li></li>
</ul>
</nav>
重复(Multiplication):*
输入:ul>li*5
自动生成:
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
编号(Item numbering):$
输入:ul>li.item$*5
自动生成:
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</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>
输入:ul>li.item$@-*5
自动生成:
<ul>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li>
</ul>
输入:ul>li.item$@3*5
自动生成:
<ul>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
<li class="item7"></li>
</ul>
重复(Sibling):+
输入:div+p+bq
自动生成:
<div></div>
<p></p>
<blockquote></blockquote>
上级结点(Climb-up):^
输入:div+div>p>span+em^bq
自动生成:
<div></div>
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div>
输入:div+div>p>span+em^^bq
自动生成:
<div></div>
<div>
<p><span></span><em></em></p>
</div>
<blockquote></blockquote>
分组(Grouping):()
输入:div>(header>ul>li*2>a)+footer>p
自动生成:
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
输入:(div>dl>(dt+dd)*3)+footer>p
自动生成:
<div>
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
</div>
<footer>
<p></p>
</footer>
ID和类属性(ID and CLASS attributes)
输入:#header
自动生成:
<div id="header"></div>
输入:.title
自动生成:
<div class="title"></div>
输入:form#search.wide
自动生成:
<form id="search" class="wide"></form>
输入:p.class1.class2.class3
自动生成:
<p class="class1 class2 class3"></p>
自定义属性(Custom attributes)
输入:p[title="Hello world"]
自动生成:
<p title="Hello world"></p>
输入:td[rowspan=2 colspan=3 title]
自动生成:
<td rowspan="2" colspan="3" title=""></td>
输入:[a='value1' b="value2"]
自动生成:
<div a="value1" b="value2"></div>
文本(Text):{}
输入:a{Click me}
自动生成:
<a href="">Click me</a>
输入:p>{Click }+a{here}+{ to continue}
自动生成:
<p>Click <a href="">here</a> to continue</p>
饮食标签(Implicit tag names)
输入:.class
自动生成:
<div class="class"></div>
输入:em>.class
自动生成:
<em><span class="class"></span></em>
输入:ul>.class
自动生成:
<ul>
<li class="class"></li>
</ul>
输入:table>.row>.col
自动生成:
<table>
<tr class="row">
<td class="col"></td>
</tr>
</table>
二、HTML结构:
输入:!或 html:5
自动生成:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
</body>
</html>
输入:a
自动生成:
<a href=""></a>
输入:a:link
自动生成:
<a href="http://"></a>
输入:br
自动生成:
<br />
输入:link
自动生成:
<link rel="stylesheet" href="" />
输入:link:css
自动生成:
<link rel="stylesheet" href="style.css" />
输入:style
自动生成:
<style></style>
输入:script
自动生成:
<script></script>
输入:script:src
自动生成:
<script src=""></script>
输入:input:text 或 input:t
自动生成:
<input type="text" name="" id="" />
输入:html:xml
自动生成:
<html xmlns="http://www.w3.org/1999/xhtml"></html>
输入:bq
自动生成:
<blockquote></blockquote>
输入:doc
自动生成:
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
</body>
</html>
输入:doc4
自动生成:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Document</title>
</head>
<body>
</body>
</html>
输入:ol+
自动生成:
<ol>
<li></li>
</ol>
输入:ul+
自动生成:
<ul>
<li></li>
</ul>
输入:!!!
自动生成:
<!DOCTYPE html>
三、CSS结构:
输入:pos
自动生成:
position:relative;
输入:pos:s
自动生成:
position:static;
输入:pos:a
自动生成:
position:absolute;
输入:m
自动生成:
margin:;
输入:m:a
自动生成:
margin:auto;
输入:bxz
自动生成:
box-sizing:border-box;
输入:bg
自动生成:
background:#000;
输入:!
自动生成:
!important
输入:@f
自动生成:
@font-face {
font-family:;
src:url(|);
}
输入:@i或@import
自动生成:
@import url();
输入:@kf
自动生成:
@-webkit-keyframes identifier {
from { }
to { }
}
@-o-keyframes identifier {
from { }
to { }
}
@-moz-keyframes identifier {
from { }
to { }
}
@keyframes identifier {
from { }
to { }
}
大致列举这么多,更多详细的其他用法类似。
大家也可以查看官方示例文档:https://docs.emmet.io/cheat-sheet/