Blogger Information
Blog 2
fans 0
comment 0
visits 999
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
学习Emmet语法8种常见写法,有效提升开发效率!
Sun@grace
Original
395 people have browsed it

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>
Correcting teacher:PHPzPHPz

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post