VScode如何快速生成Html標籤（Emmet的簡單使用）

寫前端的時候往往會遇到需要寫很多重複標籤或是複雜包絡關係的時候，這時候單單複製絕不是個好辦法。
我也是在看大佬敲代碼的時候發現了這個技巧，然後簡單瞭解了一下，這裏介紹給大家。

首先舉個例子，這也是我第一次見到別人敲的代碼

div>input.obj*8

回車或者Tab之後，就生成了這樣的代碼
是不是很方便快捷，第一次看到的我都驚呆了。
然後我們來看一下這些技巧的使用規則

常用語法

• #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>

如果大家有興趣，可以去詳細瞭解 (*￣︶￣)