VSCode的emmet插件如何使用

本篇内容主要讲解"VSCode的emmet插件如何使用"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"VSCode的emmet插件如何使用"吧!

阅前须知

E 代表HTML标签

E#id 代表id属性

E.class 代表class属性

E{content} 代表标签包含的内容是content

E>N 代表N是E的子元素

E+N 代表N是E的同级元素

$ 代表顺序数字

* 代表重复次数

() 代表这是一个组

输入完 emmet 语句之后按 enter 才能生效（复制黏贴的情况一定要把语句的最后一个字符删除重新输入后按 enter 才能生效）

使用 emmet 生成一个元素（可以进行组合）

使用#，点号，或者用 [] 包围的属性名生成元素，

div#box ==>

div.box ==>

a[href] ==>

a#link.link[href][rel] ==>

使用emmet生成具有树形结构的html

ul>li ==>

ul>li+li ==>

使用组来创建更复杂的树形结构的html

div>(header>ul>li*2>a)+footer>p ==>

内容包含，顺序数字以及重复

li{这是一个列表项} ==>

li{这是一个列表项}*6 == >

这是一个列表项
这是一个列表项
这是一个列表项
这是一个列表项
这是一个列表项
这是一个列表项

使用$可以在内容中显示循环的次数（也可以用在列表名和id名中）

li#list${这是第$个列表项}*6 == >

这是第1个列表项
这是第2个列表项
这是第3个列表项
这是第4个列表项
这是第5个列表项
这是第6个列表项

快速生成HTML结构

html：5==>

到此，相信大家对"VSCode的emmet插件如何使用"有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！