Conversion to emmet and emmet

Conversion to emmet and emmet

In sublime, you can save emmet as A. html file first. Enter the short name below, and press the tab key to promote the effect.

 

1. Generate html Format

Input html: 5

 

2. Div

 

As you can see, whether or not you have added a div, Emmet automatically generates the required div element.

Ambiguous Tag Name

This technique is an implicit tag names feature. You do not need to specify div or li. Emmet will automatically help you generate it, as shown below:

3. the abbreviation of a chain with DOM navigation

If you use Emmet to extend a simple class name to generate a div. This method can help you save a lot of time. You only need to remember the following syntax:

 
 

  
  
> Subnode: add an element under the DOM tree.
  
  
+ Same level: add an element to the same layer of the DOM tree.
  
  
^ Up layer: Add and create an element to the up layer.
 
 

Level 1

You can add multiple layers as follows:

4. Use grouping to simplify your code structure

Sometimes you may find that the use of UP symbols is complicated, and grouping may be more reasonable at this time. As follows:

A more complex example is as follows:

5. Insert text and attributes

If you need to generate HTML, you often need to add content and attributes. Many developers only use Emmet to generate the framework and then add content. In fact, you can add attributes and content when generating the page framework.

The following code shows that the text and attributes you input can be generated by braces and brackets respectively.

6. add multiple classes to one element.

This is very simple. You only need to use commas to add multiple classes, as shown below:

7. Add again

This may be the most comfortable operation to help you repeat the elements:

If you integrate the grouping function, you will be able to process more complex HTML generation:

8. Automatic list count

If you need to generate HTML elements in sequence, you must like this technique. Using the $ symbol can help you generate a series of numbers, including class, id, attribute, and content. As follows:

Note: If you need to generate a two-digit number, use two $ symbols.