需要安装好emmet包
1, div*5按tab. 创建多个空的div.
<!-- div*5按tab. 创建多个空的div. -->
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
2, div#id$*5按tab, 创建多个带id的div.
<!-- div#id$*5按tab, 创建多个带id的div. -->
<div id="id1"></div>
<div id="id2"></div>
<div id="id3"></div>
<div id="id4"></div>
<div id="id5"></div>
3, div.item*5按tab, 创建多个带class的div,class的名称是item.
<!-- div.item*5按tab, 创建多个带class的div,class的名称是item. -->
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
4,div#id$.item*5按tab, 创建多个带id, 带classs的div.
<!-- div#id$.item*5按tab, 创建多个带id, 带classs的div. -->
<div id="id1" class="item"></div>
<div id="id2" class="item"></div>
<div id="id3" class="item"></div>
<div id="id4" class="item"></div>
<div id="id5" class="item"></div>
扩展知识1:
Emmet 默认的标签为 div ,如果我们不给出标签名称的话,默认就生成 div 标签。
#item,按tab,机会默认生成一个 id为item的div标签.
<div id="item"></div>
.item,按tab,默认是会生成一个类名为item的div标签
<!-- 输入.item,按tab,生成下面的代码. -->
<div class="item"></div>
所以输入 #item.classname,就会默认生成自带id和classname的div标签.
<!-- 所以输入 #item.classname,就会默认生成自带id和classname的div标签. -->
<div id="item" class="classname"></div>
既然默认为div,如果指定标签呢? 比如span.item
<!-- 输入span.item,生成 -->
<span class="item"></span>
<!-- 输入span#name,生成 -->
<span id="name"></span>
<!-- 输入span#name.classnames,生成 -->
<span id="name" class="clas"></span>snames
<!-- 输入span#name.item$*5生成 -->
<span id="name" class="item1"></span>
<span id="name" class="item2"></span>
<span id="name" class="item3"></span>
<span id="name" class="item4"></span>
<span id="name" class="item5"></span>
<!-- 输入span#name$.item$*5生成 -->
<span id="name1" class="item1"></span>
<span id="name2" class="item2"></span>
<span id="name3" class="item3"></span>
<span id="name4" class="item4"></span>
<span id="name5" class="item5"></span>
<!-- ul#idname.classname -->
<ul id="idname" class="classname"></ul>
<!-- ul#idname$.classname$*5 -->
<ul id="idname1" class="classname1"></ul>
<ul id="idname2" class="classname2"></ul>
<ul id="idname3" class="classname3"></ul>
<ul id="idname4" class="classname4"></ul>
<ul id="idname5" class="classname5"></ul>
扩展知识2: 生成后代:>
<!-- div.item>ul>li -->
<div class="item">
<ul>
<li></li>
</ul>
</div>
<!-- div#idname.classname>ul>li -->
<div id="idname" class="classname">
<ul>
<li></li>
</ul>
</div>
<!-- div#idname.classname>ul>li$*5 -->
<div id="idname" class="classname">
<ul>
<li1></li1>
<li2></li2>
<li3></li3>
<li4></li4>
<li5></li5>
</ul>
</div>
<!-- div#idname$.classname$*3>ul>li$*5 -->
<div id="idname1" class="classname1">
<ul>
<li1></li1>
<li2></li2>
<li3></li3>
<li4></li4>
<li5></li5>
</ul>
</div>
<div id="idname2" class="classname2">
<ul>
<li1></li1>
<li2></li2>
<li3></li3>
<li4></li4>
<li5></li5>
</ul>
</div>
<div id="idname3" class="classname3">
<ul>
<li1></li1>
<li2></li2>
<li3></li3>
<li4></li4>
<li5></li5>
</ul>
</div>
<!-- div#idname$.classname$*3>ul*3>li*5 -->
<div id="idname1" class="classname1">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div id="idname2" class="classname2">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div id="idname3" class="classname3">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
扩展知识3, 生成生成兄弟:+
<!-- div+span -->
<div></div>
<span></span>
<!-- div+span+p -->
<div></div>
<span></span>
<p></p>
<!-- (div#idname$.classnames$+span#idname$.classname$+p)*3 -->
<div id="idname1" class="classnames1"></div>
<span id="idname1" class="classname1"></span>
<p></p>
<div id="idname2" class="classnames2"></div>
<span id="idname2" class="classname2"></span>
<p></p>
<div id="idname3" class="classnames3"></div>
<span id="idname3" class="classname3"></span>
<p></p>
扩展知识4, 生成上级元素:^
<!-- div>ul>li^span -->
<div>
<ul>
<li></li>
</ul>
<span></span>
</div>
<!-- div>ul>li$*5^span>ul>li$*5 -->
<div>
<ul>
<li1></li1>
<li2></li2>
<li3></li3>
<li4></li4>
<li5></li5>
</ul>
<span>
<ul>
<li1></li1>
<li2></li2>
<li3></li3>
<li4></li4>
<li5></li5>
</ul></span>
</div>
<!-- (div>(ul>li$*5)*2^span>(ul>li$*5)*2)*2 -->
<div>
<ul>
<li1></li1>
<li2></li2>
<li3></li3>
<li4></li4>
<li5></li5>
</ul>
<ul>
<li1></li1>
<li2></li2>
<li3></li3>
<li4></li4>
<li5></li5>
</ul>
</div>
<span>
<ul>
<li1></li1>
<li2></li2>
<li3></li3>
<li4></li4>
<li5></li5>
</ul>
<ul>
<li1></li1>
<li2></li2>
<li3></li3>
<li4></li4>
<li5></li5>
</ul></span>
<div>
<ul>
<li1></li1>
<li2></li2>
<li3></li3>
<li4></li4>
<li5></li5>
</ul>
<ul>
<li1></li1>
<li2></li2>
<li3></li3>
<li4></li4>
<li5></li5>
</ul>
</div>
<span>
<ul>
<li1></li1>
<li2></li2>
<li3></li3>
<li4></li4>
<li5></li5>
</ul>
<ul>
<li1></li1>
<li2></li2>
<li3></li3>
<li4></li4>
<li5></li5>
</ul></span>
<!-- (div>(ul>li$*5)*2+span>(ul>li$*5)*2)*2 -->
<div>
<ul>
<li1></li1>
<li2></li2>
<li3></li3>
<li4></li4>
<li5></li5>
</ul>
<ul>
<li1></li1>
<li2></li2>
<li3></li3>
<li4></li4>
<li5></li5>
</ul>
<span>
<ul>
<li1></li1>
<li2></li2>
<li3></li3>
<li4></li4>
<li5></li5>
</ul>
<ul>
<li1></li1>
<li2></li2>
<li3></li3>
<li4></li4>
<li5></li5>
</ul></span>
</div>
<div>
<ul>
<li1></li1>
<li2></li2>
<li3></li3>
<li4></li4>
<li5></li5>
</ul>
<ul>
<li1></li1>
<li2></li2>
<li3></li3>
<li4></li4>
<li5></li5>
</ul>
<span>
<ul>
<li1></li1>
<li2></li2>
<li3></li3>
<li4></li4>
<li5></li5>
</ul>
<ul>
<li1></li1>
<li2></li2>
<li3></li3>
<li4></li4>
<li5></li5>
</ul></span>
</div>
扩展5, 生成网站结构.
<!-- 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>((header>ul>li*2>a)+(body>ul>li*5>a))+footer>p -->
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<body>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</body>
<footer>
<p></p>
</footer>
</div>
<!-- div>((header>ul>li*2>a)+(body>ul*5>li*5>a)+footer>p -->
div>(<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<body>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</body>
<footer>
<p></p>
</footer>
功能真的很强大. 👍👍👍👍👍👍
<!-- div#name$.detail$*3 -->
<div id="name1" class="detail1"></div>
<div id="name2" class="detail2"></div>
<div id="name3" class="detail3"></div>
<!-- (div#name$.detail$*3)*2 -->
<div id="name1" class="detail1"></div>
<div id="name2" class="detail2"></div>
<div id="name3" class="detail3"></div>
<div id="name1" class="detail1"></div>
<div id="name2" class="detail2"></div>
<div id="name3" class="detail3"></div>
<!-- div#name$$.detail$$*3 -->
<div id="name01" class="detail01"></div>
<div id="name02" class="detail02"></div>
<div id="name03" class="detail03"></div>
<!-- span#name$.item$*3 -->
<span id="name1" class="item1"></span>
<span id="name2" class="item2"></span>
<span id="name3" class="item3"></span>
<!-- div#name$.detail$*3>span#name$.item$*3 -->
<div id="name1" class="detail1">
<span id="name1" class="item1"></span>
<span id="name2" class="item2"></span>
<span id="name3" class="item3"></span>
</div>
<div id="name2" class="detail2">
<span id="name1" class="item1"></span>
<span id="name2" class="item2"></span>
<span id="name3" class="item3"></span>
</div>
<div id="name3" class="detail3">
<span id="name1" class="item1"></span>
<span id="name2" class="item2"></span>
<span id="name3" class="item3"></span>
</div>
<!-- div#name$.detail$*2>span#name$.item$*2>ul*2>li*2 -->
<div id="name1" class="detail1"><span id="name1" class="item1">
<ul>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
</ul>
</span><span id="name2" class="item2">
<ul>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
</ul>
</span></div>
<div id="name2" class="detail2"><span id="name1" class="item1">
<ul>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
</ul>
</span><span id="name2" class="item2">
<ul>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
</ul>
</span></div>
<!-- div#idname$.ClassName$>span#idname$.ClassName$*3 -->
<div id="idname1" class="ClassName1">
<span id="idname1" class="ClassName1"></span>
<span id="idname2" class="ClassName2"></span>
<span id="idname3" class="ClassName3"></span>
</div>
<!-- (div#idname$.ClassName$>span#idname$.ClassName$*3)*2 -->
<div id="idname1" class="ClassName1">
<span id="idname1" class="ClassName1"></span>
<span id="idname2" class="ClassName2"></span>
<span id="idname3" class="ClassName3"></span>
</div>
<div id="idname2" class="ClassName2">
<span id="idname1" class="ClassName1"></span>
<span id="idname2" class="ClassName2"></span>
<span id="idname3" class="ClassName3"></span>
</div>
<!-- (div#idname$.ClassName$>span#idname$.ClassName$*2>ul*2>li*3)*2 -->
(<div id="idname1" class="ClassName1">
<span id="idname1" class="ClassName1">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</span>
<span id="idname2" class="ClassName2">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</span>
<span id="idname1" class="ClassName1">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</span>
<span id="idname2" class="ClassName2">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</span>
</div>
带属性.
<!-- (div#Dividname$.DivClassname${DivName$})*3>span>ul#Spanidname$.Spanclassname$*2>li{LiItemTodo$}*2 -->
<!-- (div[style="background-color: red;"]#DivIdname$.DivClassName${DivName$})*3>span>ul#SpanIdname$.SpanClassname$*2>li{LiItemTodo$}*2 -->
<div style="background-color: red;" id="DivIdname1" class="DivClassName1">DivName1</div>
<span>
<ul id="SpanIdname1" class="SpanClassname1">
<li>LiItemTodo1</li>
<li>LiItemTodo2</li>
</ul>
<ul id="SpanIdname2" class="SpanClassname2">
<li>LiItemTodo1</li>
<li>LiItemTodo2</li>
</ul></span>
<div style="background-color: red;" id="DivIdname2" class="DivClassName2">DivName2</div>
<span>
<ul id="SpanIdname1" class="SpanClassname1">
<li>LiItemTodo1</li>
<li>LiItemTodo2</li>
</ul>
<ul id="SpanIdname2" class="SpanClassname2">
<li>LiItemTodo1</li>
<li>LiItemTodo2</li>
</ul></span>
<div style="background-color: red;" id="DivIdname3" class="DivClassName3">DivName3</div>
<span>
<ul id="SpanIdname1" class="SpanClassname1">
<li>LiItemTodo1</li>
<li>LiItemTodo2</li>
</ul>
<ul id="SpanIdname2" class="SpanClassname2">
<li>LiItemTodo1</li>
<li>LiItemTodo2</li>
</ul></span>