Sublime Text 2 Emmet8 a common technique

Since I started to do Web projects, I recently used the sublime editor to know a legendary Emmet, formerly known as Zen coding. HTML God plugin can be said to be. Part of the article is transferred from http://www.cnblogs.com/meetrice/archive/2013/01/27/2878548.html

In Sublime, the Emmet can be saved as an. html file first. Then enter the following shorthand, press the TAB key to promote the effect.

1. Generate HTML format
Enter html:52. Shorthand Div

As you can see, whether or not you add Div,emmet will automatically generate the need for DIV elements.

Ambiguous label name

This technique belongs to the implicit tag names feature, you do not need to specify DIV or Li,emmet will automatically help you build, as follows:

3. Chain abbreviation with DOM navigation

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

• > Child nodes: Add an element in the next layer of the DOM tree
• + Same level: Add create an element at the same level in the DOM tree
• ^ to the top: Add a layer up to create an element.

Up one level

You can climb up multiple layers if you want, as follows:

4. Use grouping to simplify your code structure

There are times when you might find it more complicated to use the up notation, and it might be more reasonable to use grouping. As follows:

A more complex example, as follows:

5. Inserting text and attributes

If you need to generate HTML, the content and attributes are often added to your needs. Many developers just use Emmet to build the framework and then add content. In fact, you can add both properties and content during the process of generating the page frame.

As you can see from the code below, the text and attributes you enter can be generated by curly braces and brackets, respectively.

6. Add more than one class to an element

This is very simple, you just need to use a comma to add more than one class, as follows:

7. Repeat add

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

If you integrate the grouping functionality, you will be able to handle more complex HTML generation:

8. Automatic list Count

If you need to generate HTML elements sequentially, this technique you must like, using the $ notation can help you to generate a series of numbers that support Class,id, attributes, content, and so on. As follows:

Note If you need to generate a 2-bit number, use two $ symbols.

Sublime Text 2 Emmet8 a common technique