Shulou(Shulou.com)06/01 Report--

This article focuses on "how to use VSCode's emmet plug-in". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to use VSCode's emmet plug-in.

Instructions before reading

E stands for HTML tag

E#id stands for id attribute

E.class stands for class attribute

E {content} means that the tag contains content

E > N means that N is a child of E.

EBay N means that N is the sibling element of E.

$stands for sequential numbers

* represents the number of repeats

() means this is a group.

Press enter to take effect after entering the emmet statement (in the case of copying and pasting, you must delete the last character of the statement and re-enter it and press enter to take effect)

Use emmet to generate an element (which can be combined)

Generate elements using #, periods, or attribute names surrounded by []

Div#box = = >

Div.box = = >

A [href] = = >

A#link.link [href] [rel] = = >

Using emmet to generate html with tree structure

Ul > li = = >

Ul > li+li = = >

Use groups to create more complex tree-structured html

Div > (header > ul > li*2 > a) + footer > p = = >

Content contains, sequential numbers and repetition

Li {this is a list item} = > this is a list item

Li {this is a list item} * 6 = = >

This is a list item.

Use $to display the number of loops in the content (can also be used in list and id names)

Li#list$ {this is the $list item} * 6 = >

This is the first list item, this is the second list item, this is the third list item, this is the fourth list item, this is the fifth list item, this is the sixth list item to quickly generate the HTML structure.

Html:5== >

Document so far, I believe you have a deeper understanding of "how to use VSCode's emmet plug-in". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.