VSCode的emmet插件如何使用

2024-10-26 技术教程

本篇内容主要讲解“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 ==> <divid="box"></div>

div.box ==> <divclass="box"></div>

a[href]==><ahref=""></a>

a#link.link[href][rel]==><ahref=""id="link"class="link"rel=""></a>

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

ul>li==><ul><li></li></ul>

ul>li+li==><ul><li></li><li></li></ul>

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

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

<div><header><ul><li><ahref=""></a></li><li><ahref=""></a></li></ul></header><footer><p></p></footer></div>内容包含，顺序数字以及重复

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

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

<li>这是一个列表项</li><li>这是一个列表项</li><li>这是一个列表项</li><li>这是一个列表项</li><li>这是一个列表项</li><li>这是一个列表项</li>

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

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

<liid="list1">这是第1个列表项</li><liid="list2">这是第2个列表项</li><liid="list3">这是第3个列表项</li><liid="list4">这是第4个列表项</li><liid="list5">这是第5个列表项</li><liid="list6">这是第6个列表项</li>快速生成HTML结构

html：5==>

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title></head><body></body></html>

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