Conversion to emmet and emmet

Source: Internet
Author: User

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.

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.