Emmet语法是VsCode常用的一种插件,可以简化代码书写格式,让代码飞起来。
我们打开VsCode新建一个html后缀的文件,输入!
符号并按Tab
或Enter
键,Emmet语法帮我们自动生成以下代码:
<!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>
可以看出,使用Emmet语法,可以提升开发效率。
那今天我们来熟悉以下Emmet常用的8种语法。
1、标签与内容
通过Emmet语法可以快速生成带标签的内容,包括该标签的属性。
例如,我们创建一个class
属性名称为container
的div
标签,并写上内容我是网页的容器
,那我们用Emmet写上如下代码:
[class=container]{我是网页的容器}
接着按Tab
或Enter
键后生成的代码为:
<div class="container">我是网页的容器</div>
2、属性与语法糖
因为class
和id
为常用的属性,所以Emmet给他们赋了“语法糖”,进一步简化了写法,用.
可以代码class
,用#
代表id,如:
.container{我是网页的容器}
#containerID{我是网页的容器}
分别按Tab
或Enter
键后生成的代码为:
<div class="container">我是网页的容器</div>
<div id="containerID">我是网页的容器</div>
3、重复
我们在开发的时候经常遇到重复的样式,那我们用Emmet语法快速生成代码就可以,使用方法很简单,用*
再加重复的数量即可。例如:
.product{我是商品图内容}*9
接着按Tab
或Enter
键后生成的代码为:
<div class="product">我是商品图内容</div>
<div class="product">我是商品图内容</div>
<div class="product">我是商品图内容</div>
<div class="product">我是商品图内容</div>
<div class="product">我是商品图内容</div>
<div class="product">我是商品图内容</div>
<div class="product">我是商品图内容</div>
<div class="product">我是商品图内容</div>
<div class="product">我是商品图内容</div>
4、父子关系
父子关系也是html元素种最常见的,用>
符号表达父子关系,其格式为父>子
比如我们用ul
和li
做一个菜单导航,那一级菜单和二级菜单就是父子关系,那我们用Emmet快速写父子关系的菜单导航。如:
ul>li*5>a{我是子菜单的A标签}
接着按Tab
或Enter
键后生成的代码为:
<ul>
<li><a href="">我是子菜单的A标签</a></li>
<li><a href="">我是子菜单的A标签</a></li>
<li><a href="">我是子菜单的A标签</a></li>
<li><a href="">我是子菜单的A标签</a></li>
<li><a href="">我是子菜单的A标签</a></li>
</ul>
5、兄弟关系
兄弟关系是平级的,所以我们用+
号表示,比如网页的头部的左侧是logo,右侧是搜索框,那logo和搜索框是兄弟关系,然后头部和他们俩是父子关系。如下:
.top>.logo+.search
接着按Tab
或Enter
键后生成的代码为:
<div class="top">
<div class="logo"></div>
<div class="search"></div>
</div>
6、父级
父级是表示往回退一级的意思,比如还是网页头部左侧是logo,右侧是搜索框,那我们头部下面形成一个banner元素的话,可以这些写:
.top>.logo+.search^.banner
接着按Tab
或Enter
键后生成的代码为:
<div class="top">
<div class="logo"></div>
<div class="search"></div>
</div>
<div class="banner"></div>
7、分组
分组是为了写Emmet语法的时候让元素的层级关系更清晰。例如,网页头部左侧是logo,右侧是菜单的话,我们按照分组法这样写:
.top>.logo+(.menu>a{菜单名称}*4)
效果为:
<div class="top">
<div class="logo"></div>
<div class="menu"><a href="">菜单名称</a><a href="">菜单名称</a><a href="">菜单名称</a></div>
</div>
8、序号
序号我们通过$
和$@
符号来实现添加顺序数字。例如写同样的元素给不通的属性,class
名称需按序号分辨时:
.product$*3
接着按Tab
或Enter
键后生成的代码为:
<div class="product1"></div>
<div class="product2"></div>
<div class="product3"></div>
或
.menu>a{我是菜单$}*5
效果为
<div class="menu">
<a href="">我是菜单1</a><a href="">我是菜单2</a><a href="">我是菜单3</a><a href="">我是菜单4</a><a href="">我是菜单5</a>
</div>
还有一种情况是从某一个数开始按顺序排,从某一个数开始我们用@
表达即可:
.menu>a{我是菜单$@7}*3
其效果为:
<div class="menu">
<a href="">我是菜单7</a><a href="">我是菜单8</a><a href="">我是菜单9</a>
</div>
另一种情况为从某一个数开始倒序排,从某一个数开始我们用@-
表达即可:
.menu>a{我是菜单$@-6}*5
其效果为:
<div class="menu">
<a href="">我是菜单10</a><a href="">我是菜单9</a><a href="">我是菜单8</a
><a href="">我是菜单7</a><a href="">我是菜单6</a>
</div>