以下都是在支持emmet的环境下(如vscode)输入emmet结构形式后按Tab键生成html代码
生成html模板结构(!)
形式:
输入 !(英文感叹号),然后按Tab键或按回车
结果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
class(.)和id(#)
标签名.类名
(省略标签名时,在最外层默认是使用div,在ul或ol中默认使用li,在table、tbody、thead或tfoot中默认使用tr,在tr中默认使用td、在select中默认使用option标签)
emmet形式 ====> 生成的html代码
div.wrap ====> <div class="wrap"></div>
ul.list ====> <ul class="list"></ul>
.container ====> <div class="container"></div>
标签名#id名
(省略标签名时,在最外层默认是使用div,在ul或ol中默认使用li,在table、tbody、thead或tfoot中默认使用tr,在tr中默认使用td、在select中默认使用option标签)
emmet形式 ====> 生成的html代码
div#wrap ====> <div id="wrap"></div>
p#p1 ====> <p id="p1"></p>
#container ====> <div id="container"></div>
重复(*)
emmet形式 ====> 生成的html代码
div*6 ====> <div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
子节点(>)
emmet形式 ====> 生成的html代码
div>p>a ====> <div>
<p>
<a href=""></a>
</p>
</div>
兄弟节点(+)
emmet形式 ====> 生成的html代码
div+p+ul ====> <div></div>
<p></p>
<ul></ul>
上级节点(^)
emmet形式 ====> 生成的html代码
div>ul>li^div ====> <div>
<ul>
<li></li>
</ul>
<div></div>
</div>
分组(( ))
emmet形式 ====> 生成的html代码
div>(ul>li>a)+div>p ====> <div>
<ul>
<li><a href=""></a></li>
</ul>
<div>
<p></p>
</div>
</div>
属性([ ])
emmet形式 ====> 生成的html代码
ul>li*3>a[href="#" traget="_blank"] ====> <ul>
<li>
<a href="#" target="_blank"></a>
</li>
<li>
<a href="#" target="_blank"></a>
</li>
<li>
<a href="#" target="_blank"></a>
</li>
</ul>
自增符($)
从1开始自增,可以使用在内容也可以使用类名、id名等
emmet形式 ====> 生成的html代码
ul>li.item$*3 ====> <ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>
文本({})
emmet形式 ====> 生成的html代码
ul>li.item$*3{文本内容$} ====> <ul>
<li class="item1">文本内容1</li>
<li class="item2">文本内容2</li>
<li class="item3">文本内容3</li>
</ul>
以上emmet规则是可以结合一起来使用的