How to improve the efficiency of writing front-end? Dry goods, fast forward!

When we are writing the front-end, when faced with repeated code, we often copy and paste. In fact, we can improve the efficiency of writing the front-end through techniques. Next, we will introduce several commonly used techniques to improve efficiency

Comment

Enter the following code

Ctrl+/

Also, uncomment is alsoCtrl+/

multiplication

*
Enter the following code

(div>ul>li)*5

Offspring

>
Enter the following code

nav>ul>li

brothers

+
Enter the following code

div+p+bq

Superior

^
Enter the following code

div+div>p>span+em^bq

Enter the following code

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

Grouping

()
Enter the following code

(div>dl>(dt+dd)*3)+footer>p

Self-increasing

$
Enter the following code

ul>li.item$*5

Reversed

 ul>li.item$@-*5

Number is 3 digits

ul>li.item$$$*10

Starting from 5, output 10

ul>li.item$@5*10

ID and class

#和.

#header

.title

form#search.wide

Custom attributes

[]

p[title="Hello world"]

Multiple attributes

 td[rowspan=2 colspan=3 title]

text

{}

a{Hello world}

p{段落内容}

Press Tab again (the same below)
For example:

Implicit label

.class

em>.class

ul>.class

table>.row>.col

There are many more, all unknown abbreviations will be converted into labels————"Poke in detail https://docs.emmet.io/cheat-sheet/