VScode如何快速生成Html标签（Emmet的简单使用）

素颜马尾好姑娘i 2023-07-03 10:36 3阅读 0赞

写前端的时候往往会遇到需要写很多重复标签或是复杂包络关系的时候，这时候单单复制绝不是个好办法。  
我也是在看大佬敲代码的时候发现了这个技巧，然后简单了解了一下，这里介绍给大家。

首先举个例子，这也是我第一次见到别人敲的代码

div>input.obj*8

回车或者Tab之后，就生成了这样的代码  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Nsb3VkMTIwOQ_size_16_color_FFFFFF_t_70]是不是很方便快捷，第一次看到的我都惊呆了。  
然后我们来看一下这些技巧的使用规则

## 常用语法 ##

*  `#id` ——id属性
 *  `.class`——class属性
 *  `>`——表示下级
 *  `+`——表示同级
 *  `^`——表示上级
 *  `*N`——表示数量（可以配合括号使用）
 *  `$`——自动计数

举几个例子

1、div#top
    	生成
    	<div id="top"></div>
    2、div.card
    	生成
    	<div class="card"></div>
    3、div>btn+input
    	生成
    	<div> <button></button><input type="text"> </div>
    4、div*3
    	生成
    	<div></div>
        <div></div>
        <div></div>	
    5、div#obj$*3
    	生成
    	<div id="obj1"></div>
        <div id="obj2"></div>
        <div id="obj3"></div>

（）逻辑仍然成立  
例如

(div>div#obj$)*2
    和
    div>div#obj$*2
    的结果不同
    大家慢慢理解就ok啦

## Emmet简直是一款神器，我也是只用了它常用的一小部分功能， ##

## 它的使用远远不止这些。 ##

比如这个例子（搬运）

div.nav>(nav#navbar>(ul>li>(a[href="/xxx/product/$" data-index=$]>lorem4)*5))+div.btn[type='button']>span{--}^^div#main

效果图 ↓ ↓ ↓

<div class="nav">
        <nav id="navbar">
            <ul>
                <li>
                    <a href="/xxx/product/1" data-index="1">Lorem ipsum dolor sit.</a>
                    <a href="/xxx/product/2" data-index="2">Dolor vel, quia quas.</a>
                    <a href="/xxx/product/3" data-index="3">Qui hic, corrupti eum!</a>
                    <a href="/xxx/product/4" data-index="4">Necessitatibus perspiciatis, corrupti. Praesentium!</a>
                    <a href="/xxx/product/5" data-index="5">Nostrum quos, voluptate. Velit!</a>
                </li>
            </ul>
        </nav>
        <div class="btn" type="button"><span>--</span></div>
    </div>
    <div id="main"></div>

如果大家有兴趣，可以去详细了解 (\*￣︶￣)

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Nsb3VkMTIwOQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200205151756818.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Nsb3VkMTIwOQ==,size_16,color_FFFFFF,t_70