Atalhos Html no VsCode+Emmet

Sempre tive dificuldade em ganhar agilidade ao trabalhar com HTML no VSCode e em realizar mais com menos esforço em tarefas chatas e repetitivas. Recentemente, retomei meus estudos em programação e estava desenvolvendo um pequeno site. No entanto, percebi que não estava sendo tão produtivo quanto gostaria no trabalho com HTML e decidi buscar algo que pudesse me ajudar. Foi então que encontrei uma documentação que me trouxe grandes benefícios. Recomendo a leitura dessa documentação, pois tenho certeza de que também pode ser útil para ajudar outras pessoas, principalmente iniciantes.

Documentação Emmet----->> https://docs.emmet.io/cheat-sheet/

Bons estudos a todos. :)

Criança: >
nav>ul>li

<nav> 
    <ul> 
        <li>
        </li> 
    </ul> 
</nav>

Irmão: +
div+p+bq

<div>
</div> 
<p>
</p> 
<blockquote>
</blockquote>

Escalada: ^
div+div>p>span+em^bq

<div>
</div> 
<div> <p>
    <span>
    </span>
    <em>
    </em>
    </p> 
    <blockquote>
    </blockquote>
</div>

div+div>p>span+em^^bq

<div>
</div> 
<div> <p>
    <span>
    </span>
    <em>
    </em>
    </p> 
</div> 
<blockquote>
</blockquote>

Atributos de ID e CLASSE

.minhaclasse e pressione tab e você obterá <div class="minhaclasse"></div>

Observação: se minha classe tiver espaços, use um ponto no lugar do espaço (por exemplo, para "minha ótima classe", você deve digitar ".minha.ótima.aula" e clicar em tab)

#header
<div id="header"></div>

.title

<div class="title"></div>

form#search.wide

<form id="search" class="wide"></form>

p.class1.class2.class3

<p class="class1 class2 class3"></p>

Multiplicação e numeração de itens:*

ul>li.item$*5

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>