Emmet语法爆速开发前端web保姆级图文教程

目录

介绍

实战演示

基础生成

id（#）标签生成

class（.）标签生成

class和id联合生成

标签[属性名='属性值']生成

标签内容生成 {}

批量生成

计算符号: *

 计算符号: $

占位生成

​ @指定开始数字占位生成

​$$占位数字格式化生成

​$@- 数字递减生成

嵌套生成

父子嵌套元素

同级兄弟元素

上级嵌套元素

CSS语法

width和height

margin和padding

属性值生成

介绍

Emmet是一个Web开发工具，用于加快HTML和CSS代码的编写速度。使用Emmet能够通过简短的表达式生成HTML或CSS代码片段。另外，截至2022年，主流的编辑器工具如Visual Studio Code、WebStorm都已经集成了Emmet工具，无需手动安装即可使用。

实战演示

以VsCode为例演示emmmet语法的使用

基础生成

id（#）标签生成

在VsCode中编写前端html标签时,可以使用emmet语法很方便地生成对应的dom元素

输入后按回车或者tab键即可生成

class（.）标签生成

生成class属性值的标签

class和id联合生成

class和id也可以同时生成

标签[属性名='属性值']生成

可以生成对应属性值的标签元素

当然多个属性值的也可以生成,注意属性值之间用空格间隔

标签内容生成 {}

对标签内部的内容生成,比如h1标签的文本内容

批量生成

计算符号: *

* 可以批量生成指定数量的元素

加上属性和id值等都是可以的,可以自行进行尝试,不再演示

 计算符号: $

占位生成

当在使用img元素,且img元素图片基本都是img1,img2,img3...依次类推这样的命名时,一个一个书写非常麻烦,比如下面的元素格式:

这里$符号可以进行很方便的递增数字或者递减进行生成

默认是递增生成

 或者生成img标签

 @指定开始数字占位生成

$默认生成是从0开始进行生成,还可以指定开始数字进行生成

指定开始数值使用@符号

 $$占位数字格式化生成

在生成指定数字时,有的情况下是需要 con01,con02...con10,con11等这种进行格式化,9之前的数字都需要0进行占位,此时可以使用$$进行占位

当然也可以指定数字开始,需要占位多少字符,就写多少$符号

 $@- 数字递减生成

$后面加 @- 可以对数字进行递减生成

可以指定递减结束数字进行递减

嵌套生成

父子嵌套元素

父子间元素嵌套使用 > 

当然也可以进行前面批量生成的联合生成

还可以混合计算生成

ul*2>li*3 等同于 (ul>li*3)*2 如同数学运算一样的,先算括号内的内容,再计算括号外的

同级兄弟元素

同级兄弟元素间使用 + 进行生成

可以看到生成的子级元素有class为sp的3个div和同级的button元素

上级嵌套元素

上级级元素嵌套,就是父子嵌套基础上,再跳出子级,生成父级元素的兄弟元素,使用^符号

可以看到在子级后面使用^跟着和父级元素header同级的叔级元素footer 

CSS语法

本文对Emmet中的CSS语法部分仅做简单介绍并列举一些常用的方法，若读者想详细了解请参阅官方文档CSS Abbreviations。

width和height

输入w100即可生成width: 100px，输入w100%即可生成width: 100%；height同理。

margin和padding

输入m10即可生成margin: 10px，当要分别设置四个方向的属性值时，输入m10px20px30px40px即可生成代码片段margin: 10px 20px 30px 40px；padding同理。

属性值生成

1. 输入fwb即可生成代码片段font-weight: bold；
2. 输入lh20px即可生成代码片段line-height: 20px；
3. 输入df即可生成代码片段display: flex；
4. 输入jcc即可生成代码片段justify-content: center；
5. 输入aic即可生成代码片段align-items: center；
6. 输入poa即可生成代码片段position: absolute；
7. 输入tac即可生成代码片段text-align: center；