emmet详解
许天逸
目录
一、概念
emmet是一种介于标记性语言（如html、xml）和规范之外的逻辑输入方法，是一种能大幅提高前端开发效率的工具。
二、隐式符号
html:5
html:5和叹号，二者作用相同。
html:5!<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>点号
表示class属性。
div.jpf<div class="jpf"></div>井号
表示id属性。
div#jpf<div id="jpf"></div>方括号
表示标签的内部属性。
a[href="123" class="a"]<a href="123" class="a"></a>花括号
表示标签的内容。
div{hi}<div>hi</div>小括号
表示分组标签。
(a>h1)+(b>h2)<a href="">
<h1></h1>
</a>
<b>
<h2></h2>
</b>特殊实例
ul>.jpf<ul>
<li class="jpf"></li>
</ul>label[for='content']>#content<label for="content">
<span id="content"></span>
</label>三、关系符号
关系符号共有五个，分别是大于号、加号、角号、星号和美元符。
大于号
表示嵌套元素。
ul>li<ul>
<li></li>
</ul>加号
表示同级元素。
div+div<div></div>
<div></div>ul>li+a<ul>
<li></li>
<a href=""></a>
</ul>角号
表示上级元素。
div>ul>li^p<div>
<ul>
<li></li>
</ul>
<p></p>
</div>div>ul>li^^p<div>
<ul>
<li></li>
</ul>
</div>
<p></p>ul>li^ul>li<ul>
<li></li>
</ul>
<ul>
<li></li>
</ul>div>(p>ul>li*2>a)+div>p<div>
<p>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</p>
<div>
<p></p>
</div>
</div>div>(tr>td*5)*2+div>p<div>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<div>
<p></p>
</div>
</div>星号
表示批量复制。
ul>li*5<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>div*5<div></div>
<div></div>
<div></div>
<div></div>
<div></div>美元符
表示数字通配符。
div.jpf$*5<div class="jpf1"></div>
<div class="jpf2"></div>
<div class="jpf3"></div>
<div class="jpf4"></div>
<div class="jpf5"></div>div.jpf$$$*5<div class="jpf001"></div>
<div class="jpf002"></div>
<div class="jpf003"></div>
<div class="jpf004"></div>
<div class="jpf005"></div>div>ul>li.item-$*3<div>
<ul>
<li class="item-1"></li>
<li class="item-2"></li>
<li class="item-3"></li>
</ul>
</div>ul>li.$*3<ul>
<li class="1"></li>
<li class="2"></li>
<li class="3"></li>
</ul>ul>li[id='item$']{第$$$条数据}*3<ul>
<li id="item1">第001条数据</li>
<li id="item2">第002条数据</li>
<li id="item3">第003条数据</li>
</ul>美元符配合@可以实现从指定数字开始向后数指定位数。
div.jpf$@3*5<div class="jpf3"></div>
<div class="jpf4"></div>
<div class="jpf5"></div>
<div class="jpf6"></div>
<div class="jpf7"></div>四、占位标记
lorem表示占位标记，作用是随机生成一个文本。lorem1表示生成的文本包含一个单词，lorem2表示生成的文本包含两个单词，以此类推，loremN表示生成的文本包含N个单词。
p*4>lorem2<p>Lorem, ipsum.</p>
<p>Blanditiis, consequatur.</p>
<p>Ullam, id?</p>
<p>Corrupti, ratione.</p>div>lorem2<div>Lorem, ipsum.</div>
类似资料：