Emmet- front-end development artifact

Emmet is a plug-in editor, support multiple editors support. In the front-end development, Emmet using abbreviated syntax to quickly write HTML, CSS and implement other functions, which greatly improves the efficiency of front-end development.

Download http://emmet.io/download/

abbreviation

Emmet using special expression Abbreviations, i.e. Abbreviation: This particular expression is parsed into an escape code blocks and structured Emmet. Emmet CSS selectors using a similar syntax element position and attributes described in the DOM tree node.

E.g

#page>div.logo+ul#navigation>li*5>a{Item $}

It will be escaped as

<div id="page">
    <div class="logo"></div> <ul id="navigation"> <li><a href="">Item 1</a></li> <li><a href="">Item 2</a></li> <li><a href="">Item 3</a></li> <li><a href="">Item 4</a></li> <li><a href="">Item 5</a></li> </ul> </div>

HTML element

In Emmet element names may be used to generate, for example, p div or HTML tags. Emmet without any preset tag name can be any name can be used to generate HTML tags: div → <div> </ div> or foo → <foo> </ foo>

Nested operator

Nested operations for generating sibling elements in the DOM tree or a child node

child：>

Use> generating element children

div>ul>li

It will be escaped as

<div>
    <ul>
        <li></li>
    </ul> </div>

Sibling: +

Generating a sibling element using +

div+p+bq

It will be escaped as

<div></div>
<p></p>
<blockquote></blockquote>

Climb-up: ^

Use ^ to generate a new node element in the parent element

And the role of the operator ^> opposite

With> can generate a new child node

div+div>p>span+em

It will be escaped as

<div></div>
<div>
    <p><span></span><em></em></p> </div>

You can generate a new node with parent ^

div+div>p>span+em^bq

It will be escaped as

<div></div>
<div>
    <p><span></span><em></em></p> <blockquote></blockquote> </div>

^, You can generate a new parent node in the n by n th

div+div>p>span+em^^^bq

It will be escaped as

<div></div>
<div>
    <p><span></span><em></em></p> </div> <blockquote></blockquote>

Multiplication: *

* Used to generate a plurality of identical elements

ul>li*5

It will be escaped as

<ul>
    <li></li>
    <li></li> <li></li> <li></li> <li></li> </ul>

Grouping: ()

Parentheses () is the advanced use of Emmet, used to achieve more complex DOM structure

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

It will be escaped as

<div>
    <header>
        <ul> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </header> <footer> <p></p> </footer> </div>

May also be nested in parentheses ()

(div>dl>(dt+dd)*3)+footer>p

It will be escaped as

<div>
    <dl>
        <dt></dt>
        <dd></dd> <dt></dt> <dd></dd> <dt></dt> <dd></dd> </dl> </div> <footer> <p></p> </footer>

Attribute Operator

Operator is used to modify the properties of the element attributes

ID and CLASS

Emmet add to the element ID and CLASS methods and syntax similar to CSS

div#header+div.page+div#footer.class1.class2.class3

It will be escaped as

<div id="header"></div>
<div class="page"></div> <div id="footer" class="class1 class2 class3"></div>

Custom Attributes

Use [attr] tag to add custom properties

td[title="Hello world!" colspan=3]

It will be escaped as

<td title="Hello world!" colspan="3"></td>

Element number

$ Operator can use the number of ordered repetitive elements

ul>li.item$*5

It will be escaped as

<ul>
    <li class="item1"></li> <li class="item2"></li> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> </ul>

You may also be defined by a plurality of number formatting $

ul>li.item$$$*5

It will be escaped as

<ul>
    <li class="item001"></li> <li class="item002"></li> <li class="item003"></li> <li class="item004"></li> <li class="item005"></li> </ul>

More flexible numbering

Use @ modifier can change the format of numbers

E.g:

Add $ @ in the back - you can change the order of numbers

ul>li.item$@-*5

It will be escaped as

<ul>
    <li class="item5"></li> <li class="item4"></li> <li class="item3"></li> <li class="item2"></li> <li class="item1"></li> </ul>

Behind the $ Add  @N  can change the number base

ul>li.item$@3*5

It will be escaped as

<ul>
    <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> <li class="item6"></li> <li class="item7"></li> </ul>

Above may also be used in combination modifier

ul>li.item$@-3*5

It will be escaped as

<ul>
    <li class="item7"></li> <li class="item6"></li> <li class="item5"></li> <li class="item4"></li> <li class="item3"></li> </ul>

Text operator

Use Emmet Text: {} element is added to the text content

a{Click me}

It will be escaped as

<a href="">Click me</a>

Note: {text} is in Emmet as a separate element to be resolved, but when combined with other elements, and have special meanings when used

For example:
A {} and the Click a> {click 
the same result is output, but
a {click} + b {here } and a> {click} + b {  here}
result output is not the same

<!-- a{click}+b{here} --> <a href="">click</a><b>here</b> <!-- a>{click}+b{here} --> <a href="">click<b>here</b></a>

In a> {click} + b {here} in, <b> element which is a child element <a>. This is the difference: When {text} written directly after the element, and does not change the context of the parent element.

Here is a more complex case:

p>{Click }+a{here}+{ to continue}

It will be escaped as

<p>Click <a href="">here</a> to continue</p>

and

p{Click }+a{here}+{ to continue}

It will be escaped as

<p>Click </p>
<a href="">here</a> to continue