Using the vs code editor or subordinate (of course, there are many other editors) will have a very practical function, TAB Key automatic completion function. Especially, it simplifies the process of writing front-end code and greatly improves the efficiency.

I uploaded all the grammar to the space and created a single page: https://www.ihewro.com/emmet.html Please right click the new window to open )。
(From this: http://docs.emmet.io/cheat-sheet/ All js and redundant parts are removed.)

Here are some common records( Continuously updated ):

syntax

child: >

nav>ul>li

 <nav> <ul> <li></li> </ul> </nav>
Sibling: + (Peer label)

div+p+bq

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

div and p and bq Labels belong to the same level

Combination symbol: ()

(div>p>span)+bq

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

div and bq Belong to the same level

Number of indications: *

ul>li*5

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

5 li label

Create element, ID, class

head

 <head> </head>

#head

 <div id="head"></div>

head

 <div class="head"></div>

The three can be used together, which is very convenient.

Html content

The following syntax can directly complete the html template, which is cool!

!
 <! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>

Automatic completion of html 5 initial code

Last modification: March 23, 2019
Do you like my article?
Don't forget to praise or appreciate, let me know that you accompany me on the way of creation.