前言
emmet是一个语法包，很多的编辑器都支持，常用的像idea,webstorm,vscode,andriod studio等等。具体支持列表可以看官网下载列表，看看你常用的html编辑器是否支持。
以webstorm举例,webstrom本身就支持emmet，不用再去下插件了
生成html结构
输入“!”，然后按tab键，会生成如下代码
<!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>
生成普通标签
输入div按tab键
<div></div>
其他标签也是类似的
类名.
输入p.p1按tab键
<p class="p1"></p>
id'#'
输入p#p1按tab键
<p id="p1"></p>
组合类和id
输入p.p1#p2.p3.p4按tab键
<p class="p1 p3 p4" id="p2"></p>
属性[]
输入table[cellspacing=0][cellpadding=0]按tab键
<table cellspacing="0" cellpadding="0"></table>
内部文字{}
输入button{登陆}按tab键
<button>登陆</button>
生成同级+
输入p.p1+p.p2按tab键
<p class="p1"></p>
<p class="p2"></p>
下级>
输入ul#ul1>li.li1按tab键
<ul id="ul1">
<li class="li1"></li>
</ul>
分组()
输入ul>(li>p+a+div)+li按tab键
<ul>
<li>
<p></p>
<a href=""></a>
<div></div>
</li>
<li></li>
</ul>
重复*
输入ul.ul1>li.li1{张三}*5按tab键
<ul class="ul1">
<li class="li1">张三</li>
<li class="li1">张三</li>
<li class="li1">张三</li>
<li class="li1">张三</li>
<li class="li1">张三</li>
</ul>
网友评论