I. 利用Emmet快速编写HTML标签
Emmet is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow
Emmet是一个介于标记性语言和规范之外的一种逻辑方式，它的前身是zen coding，Emmet可以大幅度提高前端开发的一个小工具，并不是开发工具，在其他IDE里面称之为插件，他可以根据你提供的逻辑快速生成HTML代码片段。
II. 引示符号
| 符号 | 描述 |
|---|---|
html:5 or ! | 快速生成一段HTML标准文档标签 |
. | Class Name |
# | ID Name |
[] | 标签的内部属性 |
{} | 标签的内容 |
() | 分组标签 |
快速生成一段HTML标准文档标签
html:5OR
!生成的HTML标签
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>Class
ul>li.ClassName生成的HTML标签
<ul>
<li class="ClassName"></li>
</ul>ID
ul>li#ClassName生成的HTML标签
<ul>
<li id="ClassName"></li>
</ul>标签的内部属性
ul>li>a[href="https://www.ansheng.me"]生成的HTML标签
<ul>
<li><a href="https://www.ansheng.me"></a></li>
</ul>标签的内容
div>{Hello World}生成的HTML标签
<div>Hello World</div>分组标签
(h1>p>a[href="https://www.ansheng.me/"])+(h2>p{Hello World})生成的HTML标签
<h1>
<p><a href="https://www.ansheng.me/"></a></p>
</h1>
<h2>
<p>Hello World</p>
</h2>III. 关系符号
| 符号 | 描述 |
|---|---|
> | 嵌套元素 |
+ | 同级元素 |
^ | 上级元素 |
* | 同级多少个元素 |
$ | 数字通配符正序 |
@ | 数字通配符倒序 |
嵌套元素
ul>li>a{Hello World!}生成的HTML标签
<ul>
<li><a href="">Hello World!</a></li>
</ul>同级元素
h2+h3生成的HTML标签
<h2></h2>
<h3></h3>上级元素
ul>li^p生成的HTML标签
<ul>
<li></li>
</ul>
<p></p>div>ul>li^^p生成的HTML标签
<div>
<ul>
<li></li>
</ul>
</div>
<p></p>div>ul>li^ul>li生成的HTML标签
<div>
<ul>
<li></li>
</ul>
<ul>
<li></li>
</ul>
</div>同级多少个元素
ul>li*5生成的HTML标签
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>数字通配符
ul>li.a$*5生成的HTML标签
<ul>
<li class="a1"></li>
<li class="a2"></li>
<li class="a3"></li>
<li class="a4"></li>
<li class="a5"></li>
</ul>ul>li.a$$$*5生成的HTML标签
<ul>
<li class="a001"></li>
<li class="a002"></li>
<li class="a003"></li>
<li class="a004"></li>
<li class="a005"></li>
</ul>ul>li.a$@-*5生成的HTML标签
<ul>
<li class="a5"></li>
<li class="a4"></li>
<li class="a3"></li>
<li class="a2"></li>
<li class="a1"></li>
</ul>ul>li.a$@3*5生成的HTML标签
<ul>
<li class="a3"></li>
<li class="a4"></li>
<li class="a5"></li>
<li class="a6"></li>
<li class="a7"></li>
</ul>IV. 占位标记
| 符号 | 描述 |
|---|---|
lorem | 生成多端文字 |
实例
p*2>lorem生成的HTML标签
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore molestias, neque. Ad atque commodi deleniti,
doloribus fugiat hic in libero nam nisi non omnis quas recusandae, rem repellendus soluta vel.</p>
<p>Ad alias amet aut autem debitis dolore doloribus eos esse, hic itaque iusto labore laborum modi nesciunt officiis
quia reiciendis sed sequi vitae voluptas. A beatae enim mollitia necessitatibus perspiciatis.</p>p*2>lorem2生成的HTML标签
<p>Lorem ipsum.</p>
<p>Exercitationem, sint?</p>