收藏
PHPz批改状态：合格
老师批语：
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种语法。
通过Emmet语法可以快速生成带标签的内容，包括该标签的属性。
例如，我们创建一个class属性名称为container的div标签，并写上内容我是网页的容器,那我们用Emmet写上如下代码：
[class=container]{我是网页的容器}
接着按Tab或Enter键后生成的代码为：
<div class="container">我是网页的容器</div>
因为class和id为常用的属性，所以Emmet给他们赋了“语法糖”，进一步简化了写法,用.可以代码class，用#代表id，如：
.container{我是网页的容器}#containerID{我是网页的容器}
分别按Tab或Enter键后生成的代码为：
<div class="container">我是网页的容器</div><div id="containerID">我是网页的容器</div>
我们在开发的时候经常遇到重复的样式，那我们用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>
父子关系也是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>
兄弟关系是平级的，所以我们用+号表示，比如网页的头部的左侧是logo，右侧是搜索框，那logo和搜索框是兄弟关系，然后头部和他们俩是父子关系。如下：
.top>.logo+.search
接着按Tab或Enter键后生成的代码为：
<div class="top"><div class="logo"></div><div class="search"></div></div>
父级是表示往回退一级的意思，比如还是网页头部左侧是logo，右侧是搜索框，那我们头部下面形成一个banner元素的话，可以这些写：
.top>.logo+.search^.banner
接着按Tab或Enter键后生成的代码为：
<div class="top"><div class="logo"></div><div class="search"></div></div><div class="banner"></div>
分组是为了写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>
序号我们通过$和$@符号来实现添加顺序数字。例如写同样的元素给不通的属性，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>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
