Emmet常用语法
Emmet是一个Web开发工具,用于加快HTML和CSS代码的编写速度。使用Emmet能够通过简短的表达式生成HTML或CSS代码片段。另外,截至2022年,主流的编辑器工具如Visual Studio Code、WebStorm都已经集成了Emmet工具,无需手动安装即可使用。
1.初始化HTML结构
输入!
再按Tab键执行(下同)即可生成HTML初始化结构:
<!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>
2.标签与内容
使用大括号{}
即可生成带文本内容的标签
例1:div{文本内容}
<div>文本内容</div>
例2:p{文本内容}
<p>文本内容</p>
3.属性和语法糖
使用方括号[]
也称中括号即可生成带有属性的标签
例1:div[name=kangkang]
或 [name=kangkang]
(不写标签默认为div)
<div name="kangkang"></div>
例2:p[name=kangkang]{名称}
<p name="kangkang">名称</p>
id,class是高频,通用属性,emmet为它定制了”语法糖”id => #, class => .
例1:div#id
或 #id
<div id="id"></div>
例2:div.class
或 .class
<div class="class"></div>
例3:#id.class{文本内容}
<div id="id" class="class">文本内容</div>
4.重复
使用*
符号(乘号)即可生成重复的代码
例:#id.class{文本内容}*3
<div id="id" class="class">文本内容</div>
<div id="id" class="class">文本内容</div>
<div id="id" class="class">文本内容</div>
5.父子节点
使用>
符号即可生成父子节点
例:ul>li{item}*3
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
6.兄弟节点
使用+
符号即可生成兄弟节点
例:h3{标题}+p{内容}
<h3>标题</h3>
<p>内容</p>
7.父级兄弟节点
使用^
符号即可生成父级兄弟节点
例:ul>li{item}*3^p{内容}
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<p>内容</p>
8.分组
使用括号()
即可将节点分组执行
例:div>(ul>li*3>a{link})+p
<div>
<ul>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
</ul>
<p></p>
</div>
如果不加括号()
分组则 div>ul>li*3>a{link}+p
<div>
<ul>
<li>
<a href="">link</a>
<p></p>
</li>
<li>
<a href="">link</a>
<p></p>
</li>
<li>
<a href="">link</a>
<p></p>
</li>
</ul>
</div>
9.序号
使用$
,$@
进行编号
例1. ul>li{item-$}*3
(默认从1开始使用$
或 $@
1)
<ul>
<li>item-1</li>
<li>item-2</li>
<li>item-3</li>
</ul>
例2. ul>li{item-$@3}*3
(自定义起始序号使用$@
+值)
<ul>
<li>item-3</li>
<li>item-4</li>
<li>item-5</li>
</ul>
例3.ul>li{item-$@-1}*3
(逆序使用$@-
+值)
<ul>
<li>item-3</li>
<li>item-2</li>
<li>item-1</li>
</ul>