Acceleration Tool Emmet

Front-end development artifact Emmet Introduction

Emmet, it can greatly improve the efficiency of code writing, it provides a very concise syntax rules, and then immediately generate the corresponding HTML structure or CSS code, while there are a variety of useful features to help the front-end development.

Emmet strictly speaking, is not a software or tool, it is an editor plug-in, must be based on an editor to use.

Emmet Workflow: open HTML or CSS file (or set syntax format), write instructions by grammar, press TAB --- build!

• html:5Or! Generating HTML5 structures
• html:xtGenerate HTML4 Transition Type
• html:4sGenerate HTML4 Strict type

To generate a div tag with an AAA ID, we just need to write the following instruction:

#aaa

If you write a span tag with a class of BBB, we need to write the following instruction:

span.bbb

Write an ID for the CCC class for DDD UL label, we can write:

ul#ccc.ddd

Generating Descendants:>

The greater-than sign indicates that the content to be generated later is the descendant of the current label. For example, if I want to generate an unordered list and be wrapped by Class AAA Div, you can use the following command:

div.aaa>ul>li

Polygons are the generation of subordinate elements, and if you want to create a peer element, you need to use the + sign. For example, the following directives:

div+p+bq

Generate ancestor elements: ^

What does a superior (climb-up) element mean? In front of us, we said ">" to generate the subordinate elements, and after using Div>ul>li's instructions, continue writing, then the next content is in the Li subordinate. If I want to write a span tag with UL level, then I need to start with "^" to raise the hierarchy. For example:

div>ul>li^span

Generate multiple copies: *

In particular, an unordered list, UL under the Li certainly not just a copy, usually to generate a lot of Li tags. Then we can go directly to the LI behind * some numbers:

ul>li*5

Build groups: ()

Use parentheses to group, so that you can more clearly define the structure to be generated, especially the hierarchical relationships, for example:

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

A tag often needs to include the href attribute and the title attribute, if we want to generate an href "http://blog.wpjam.com", the title "I Love Boiled fish" a tag, you can write:

a[href="http://blog.wpjam.com" title="我爱水煮鱼"]

To generate content number: $

For example unordered list, I want to add a class attribute value item1 for five Li, then increment from 1-5, then you need to use the $ symbol:

ul>li.item$*5

Generate text content: {}

The above explains how to generate HTML tags, what about the content? Of course, you can also generate:

a[href="http://blog.wpjam.com"]{点击这里到 我爱水煮鱼}

Lorem IpsumA text that is not understood at random. Lorem Ipsumtext so that people can not understand, so as to ignore the meaning of content and focus on the content of the layout, as the test data filled with. Use Emmet Lorem Ipsum  to generate this command, and after hitting the Tab key, the following text will be generated:

Acceleration Tool Emmet