HTML abbreviations

Emmet using syntax similar to CSS selectors to describe the properties and position of an element in the element tree generated.

element

You can use the name of the element, such as a div or p to generate HTML tags.
Emmet is not available a set of predefined tag names, you can write any word and convert it to the label: div →
，foo→ Wait.

Nested operator

Nested operator Acronym for generating elements are placed within the tree: whether it is placed on or near the context elements.

Sons element>
You can use the> operator to nested elements with each other:
div>ul>li

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

+ Siblings
using the + operator elements are placed on the same level with each other:
div+p+bq

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

Climb ^
^ operator, you can climb the tree layer and change the context, which should display the following elements:
div+div>p>span+em^bq

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

Any number may be used as necessary ^ operators, each operator will move up one level:

* Multiplication
use the * operator, you can define the elements should output how many times:
ul>li*5

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

Packet ()
parentheses complex Acronym subtree packet:
div>(header>ul>li*2>a)+footer>p

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

If you are using the browser's DOM, you can group considered documents fragment: Each group contains abbreviations sub-tree, and all of the following with the first element of the same level as the insertion of the following elements.

Each group can be nested within each other, using the multiplication operator * combine them:

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

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

Use groups, you can use an acronym literally meaning to write complete page mark, but please do not do this.

Attribute Operator

Attribute operator is used to modify the properties of the output element. For example, in HTML and XML, you can quickly add class attributes to the elements generated.

id and class
in the CSS, you can use the elem # id and elem.class notation to access the element with the specified id or class attributes. In Emmet can use exactly the same syntax to add these attributes specified element:
div#header+div.page+div#footer.class1.class2.class3

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

Custom attributes []
You can use [attr] symbol (such as the CSS) to add custom attributes to elements:
td[title="Hello world!" colspan=3]

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

Any number of attributes may be placed in square brackets.

Not need to specify the property value: td [colspan title] will use a tab character in each empty property generated (if your editor supports it> them).

You may be used single or double quotes to reference the property value.

If the values do not contain spaces, there is no need to refer to them: td [title = hello colspan = 3] can.

$ Item number
with * multiplication operator can duplicate elements, but you can $ numbering them. The operator on the element name $, the attribute name or attribute value to output the current number of repeating elements:
ul>li.item$*5

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

You can use more than $ continuous filled with zeros numbers:
ul>li.item$$$*5

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

Change the number and direction @ basis
using the @ modifier, you can change the number direction (ascending or descending) and base (eg start value).
For example, to change the orientation, please @ - after adding $:
ul>li.item$@-*5

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

To change the basic value of the counter, add the modifier $ @N on:
ul>li.item$@3*5

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

You can use these modifiers with:
ul>li.item$@-3*5

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

{Text}
You can use curly braces to add text to the elements:
a{Click me}

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

Note that {text} as a separate element (e.g., etc.) and parsing div, p immediately but has a special meaning when the back element. For example, a {click} and a> {click} will produce the same output, but a {click} + b {here} and a> {click} + b {here} not:

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

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

In the second example, the elements placed inside the element. That's the difference: When {text} written immediately after the element, it does not change the parent context. This is a more complex example, shows why it is important:
p>{Click }+a{here}+{ to continue}

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

In this example, to be written Click here to continue internal

Elements, we must use the> operator after explicitly move it to a tree p, but for a element, it is not necessary to do so, because we only need with the elements here of the word, without changing the parent context.

For comparison, it is not the tape> Acronym same operator:

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

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

Implicitly generated tag

span>.item



ul>.item

<ul> <li class="item"></li> </ul>

Abbreviations Notes

Do not use spaces around operators

"Lorem Ipsum" constructor

You can specify how many words should be generated in the abbreviation. For example, lorem100 100 generates a pseudo-word text.

You can create lorem filled with completely random sentence generator label use within the repeating elements. For example, p * 4> lorem will generate the following abbreviations:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus! Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates rem at neque quos facere sequi unde optio aliquam! Tenetur quod quidem in voluptatem corporis dolorum dicta sit pariatur porro quaerat autem ipsam odit quam beatae tempora quibusdam illum! Modi velit odio nam nulla unde amet odit pariatur at! Consequatur rerum amet fuga expedita sunt et tempora saepe? Iusto nihil explicabo perferendis quos provident delectus ducimus necessitatibus reiciendis optio tempora unde earum doloremque commodi laudantium ad nulla vel odio?

When the element is a self-repeating elements, lorem generator will use the implicit label name resolver, lorem so you can shorten the abbreviation:
ul.generic-list>lorem10.item*4+

<ul class="generic-list"> <li class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam vero.</li> <li class="item">Laboriosam quaerat sapiente minima nam minus similique illum architecto et!</li> <li class="item">Incidunt vitae quae facere ducimus nostrum aliquid dolorum veritatis dicta!</li> <li class="item">Tenetur laborum quod cum excepturi recusandae porro sint quas soluta!</li> </ul>

emmet html Abbreviations

HTML abbreviations

element

Nested operator

Attribute Operator

Implicitly generated tag

Abbreviations Notes

"Lorem Ipsum" constructor

Guess you like