博客列表 >学习Emmet语法8种常见写法,有效提升开发效率!

学习Emmet语法8种常见写法,有效提升开发效率!

Sun@grace
Sun@grace原创
2022年10月15日 16:05:09332浏览

Emmet语法是VsCode常用的一种插件,可以简化代码书写格式,让代码飞起来。
我们打开VsCode新建一个html后缀的文件,输入符号并按TabEnter键,Emmet语法帮我们自动生成以下代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. </head>
  9. <body>
  10. </body>
  11. </html>

可以看出,使用Emmet语法,可以提升开发效率。
那今天我们来熟悉以下Emmet常用的8种语法。

1、标签与内容

通过Emmet语法可以快速生成带标签的内容,包括该标签的属性。
例如,我们创建一个class属性名称为containerdiv标签,并写上内容我是网页的容器,那我们用Emmet写上如下代码:

  1. [class=container]{我是网页的容器}

接着按TabEnter键后生成的代码为:

  1. <div class="container">我是网页的容器</div>

2、属性与语法糖

因为classid为常用的属性,所以Emmet给他们赋了“语法糖”,进一步简化了写法,用.可以代码class,用#代表id,如:

  1. .container{我是网页的容器}
  2. #containerID{我是网页的容器}

分别按TabEnter键后生成的代码为:

  1. <div class="container">我是网页的容器</div>
  2. <div id="containerID">我是网页的容器</div>

3、重复

我们在开发的时候经常遇到重复的样式,那我们用Emmet语法快速生成代码就可以,使用方法很简单,用*再加重复的数量即可。例如:

  1. .product{我是商品图内容}*9

接着按TabEnter键后生成的代码为:

  1. <div class="product">我是商品图内容</div>
  2. <div class="product">我是商品图内容</div>
  3. <div class="product">我是商品图内容</div>
  4. <div class="product">我是商品图内容</div>
  5. <div class="product">我是商品图内容</div>
  6. <div class="product">我是商品图内容</div>
  7. <div class="product">我是商品图内容</div>
  8. <div class="product">我是商品图内容</div>
  9. <div class="product">我是商品图内容</div>

4、父子关系

父子关系也是html元素种最常见的,用>符号表达父子关系,其格式为父>子比如我们用ulli做一个菜单导航,那一级菜单和二级菜单就是父子关系,那我们用Emmet快速写父子关系的菜单导航。如:

  1. ul>li*5>a{我是子菜单的A标签}

接着按TabEnter键后生成的代码为:

  1. <ul>
  2. <li><a href="">我是子菜单的A标签</a></li>
  3. <li><a href="">我是子菜单的A标签</a></li>
  4. <li><a href="">我是子菜单的A标签</a></li>
  5. <li><a href="">我是子菜单的A标签</a></li>
  6. <li><a href="">我是子菜单的A标签</a></li>
  7. </ul>

5、兄弟关系

兄弟关系是平级的,所以我们用+号表示,比如网页的头部的左侧是logo,右侧是搜索框,那logo和搜索框是兄弟关系,然后头部和他们俩是父子关系。如下:

  1. .top>.logo+.search

接着按TabEnter键后生成的代码为:

  1. <div class="top">
  2. <div class="logo"></div>
  3. <div class="search"></div>
  4. </div>

6、父级

父级是表示往回退一级的意思,比如还是网页头部左侧是logo,右侧是搜索框,那我们头部下面形成一个banner元素的话,可以这些写:

  1. .top>.logo+.search^.banner

接着按TabEnter键后生成的代码为:

  1. <div class="top">
  2. <div class="logo"></div>
  3. <div class="search"></div>
  4. </div>
  5. <div class="banner"></div>

7、分组

分组是为了写Emmet语法的时候让元素的层级关系更清晰。例如,网页头部左侧是logo,右侧是菜单的话,我们按照分组法这样写:

  1. .top>.logo+(.menu>a{菜单名称}*4)

效果为:

  1. <div class="top">
  2. <div class="logo"></div>
  3. <div class="menu"><a href="">菜单名称</a><a href="">菜单名称</a><a href="">菜单名称</a></div>
  4. </div>

8、序号

序号我们通过$$@符号来实现添加顺序数字。例如写同样的元素给不通的属性,class名称需按序号分辨时:

  1. .product$*3

接着按TabEnter键后生成的代码为:

  1. <div class="product1"></div>
  2. <div class="product2"></div>
  3. <div class="product3"></div>

  1. .menu>a{我是菜单$}*5

效果为

  1. <div class="menu">
  2. <a href="">我是菜单1</a><a href="">我是菜单2</a><a href="">我是菜单3</a><a href="">我是菜单4</a><a href="">我是菜单5</a>
  3. </div>

还有一种情况是从某一个数开始按顺序排,从某一个数开始我们用@表达即可:

  1. .menu>a{我是菜单$@7}*3

其效果为:

  1. <div class="menu">
  2. <a href="">我是菜单7</a><a href="">我是菜单8</a><a href="">我是菜单9</a>
  3. </div>

另一种情况为从某一个数开始倒序排,从某一个数开始我们用@-表达即可:

  1. .menu>a{我是菜单$@-6}*5

其效果为:

  1. <div class="menu">
  2. <a href="">我是菜单10</a><a href="">我是菜单9</a><a href="">我是菜单8</a
  3. ><a href="">我是菜单7</a><a href="">我是菜单6</a>
  4. </div>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议