Summary of Emmet usage notes

Summary of Emmet usage notes

Recently, I am following the video tutorial of CSS, and then I have to write a lot of HTML structures, so I want to summarize the syntax of Emmet.

Emmet is a tool that can be used to speed up the development process of HTML and CSS, but emmet only supports HTML & XML file structure, so I personally think that it is not very helpful for CSS. VSCode itself has CSS abbreviation support, which is quite easy to use convenient.

The shortcut keys below are all based on VSCode.

basic grammar

Generate HTML frame

To generate the basic framework of HTML5 !, a doctype can use more than one, but no more than three !:

generate tag

All tags can be directly entered into the tag and then press tab to generate. VSCode will also prompt for abbreviations, such as section, which can be typed sectionor used sect:

Some special abbreviations will add some common attributes, such as importing JS can be used directly script:src, importing CSS can be used link:css, inputthe default is text, but it can also be used to :bgenerate buttons, :telgenerate calls, etc.

generate class name

The class name can be directly used <tag name>., and there is a special tag called div, which can directly .generate a div with an empty class through:

If you want to generate multiple ids for the same class, you can use <tag-name>.<class name 1>.<class name 2>the method of nesting. For example, some common fontawesome icons will use one class to control the shape and another to control the icon. At this time, you can use this technique:i.fa-solid.fa-house

Generate tag with id

It is similar to a class, but it is used here #, such as: i.fa-solid.fa-house#house-iconit will generate

The id is unique, so there is no need to overload, even if it is overload, emmet will only use the last one:

Generate tags with attributes

For this purpose [], I personally use more pictures and input, such as img[src="images/example"]:

or input:password[placeholder="Your Password"]:

Attributes is not easy to say, if it is input, use directly to input:pgenerate tabs, and then go inside to operate according to the automatic prompts, reducing typo and typing less, in terms of efficiency, I think it will be faster than emmet.

number placeholder

$, as img[src="images/exaple$"]will generate

This alone is not easy to use, but it is easy to use with the following function

Generate multiple identical tags

It can be used *<num>to generate multiple same tags, and it is easy to use with number placeholders here. For example, I have multiple lists, and the contents of each list are the same, but the class names of the lists are different:

li.list-$*10generate

Or when multiple images (slideshow) need to be generated:

img[src="img/slideshows/slideshow-$"]*6generate

Add content to tag

There are two, one is that >this will form a parent-child structure, which will be mentioned later when we talk about the structure, and the other is that {}this will directly add content to the current tag. If it is a flat structure, there is not much difference between the two. It is easier to use the former can directly add lorem

p>loremwill generate

p{lorem}will generate

nested structure

Let's talk about nesting

flat structure

Use +concatenation, such as generating two inputs like this:

input:t+input:email+input:submitwill generate

Parent-child structure (down)

Use >, briefly mentioned above, here will form a parent-child structure, such as:

ul>li>a>i.fa.fas-homewill generate:

Parent-child structure (up)

Use ^, here you can go back to the previous node:

` will generate:

<ul>
  <li>
    <a href=""><i class="fa fas-home"></i></a>
    <img src="" alt="" />
  </li>
</ul>

At this time, it can be seen that emmet's inline structure typesetting is actually not very convenient.

I just found one |that says it can achieve this function, but I tried it on VSCode and it doesn't support it. If you use other ide/editor, you can try it

node grouping

Use (), here the parts in brackets are generated as a whole, such as:

(li>a>i.fa)*10will generate

This is something I have only seen recently. Before, I kept going back to the previous layer to implement it. It is much more troublesome than using grouping.

Summarize

In fact, emmet doesn't set the inline structure very well (it won't break the line by default), so sometimes when using it a*n>i, it will be uncomfortable to automatically typesetting the structure, but overall it is much more convenient than cv one by one...

By the way, throw away a structure used when following the tutorial:

h1.section-heading{Teams}+.team-wrapper>.team-member*3>img.team-member-img[src="images/team-member-$.jpg"]+h2.team-member-name{Nick Smith}>span{ Designer}^ul.team-member-skills>li{Ps}+li{Figma}+li{HTML5}+li{CSS3}+li{Ai}^a.projects-btn[href="$"]+.story-btn[title="My Story"]>.story-btn-line^.story>h4.story-heading{About Me}+p.story-paragraph>lorem

Probably such a triple structure:

I think each cv is too troublesome, so I wrote it in emmet...but there still seems to be something wrong (scratching head)

Thinking about it now, in fact, it should be ()more convenient to use grouping.

So emmet is not recommended to write too long, unless you know what you want to do.