The label
- # the front-end
- # Code tools

The content of this article is from the official document of Emmet, and only about the syntax of HTML (because I am not the front-end, I rarely need to write CSS), I added some Chinese annotations to it, so that I can refer to it in the future when I forget. In fact, it is very easy to master Emmet, the syntax is not very complicated, and basically you can learn it after reading it. Why not translate it into Chinese? Because some nouns and sentences don’t know how to translate, it might be better to paste them in the original (dog_head.jpg).

For the original Documentation, go to Emmet Documentation

The relevant Emmet

Emmet is a Web-developer’s Toolkit that can greatly improve your HTML & CSS Workflow Emmet uses abbreviations to generate HTML and CSS code quickly and easily, making it very efficient and easy to write HTML and CSS code.

How to use Emmet

Some ides integrate the Emmet plug-in and do not need to be downloaded and installed. However, some editors do not integrate the Emmet plug-in. You can download it from the editor’s plug-in market or from the Emmet website. Emmet generates code using abbreviations that look like CSS selectors. Enter the following code and press TAB.

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

The following code is generated:

<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>

Copy the code

It’s convenient. Is it?

Emmet grammar

Elements

Emmet has no preset tag name, so you can use any element name to generate the tag.

You can use elements’ names like div or P to generate HTML tags. Emmet doesn’t have a predefined set of available tags Names, you can write any word and transform it into a tag: div →

, foo →
and so on.

Nesting operators

Child: `>`(Child node)

You can use > operator to nest elements inside each other:

div>ul>li 

<! -- will produce -->

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

Copy the code

Sibling: `+`(Sibling node)

Use + operator to place elements near each other, on the same level:

div+p+bq

<! -- will produce -->

<div></div>
<p></p>
<blockquote></blockquote>
Copy the code

Climb-up: `^`(rise)

Usage scenarios

For example, the abbreviation div+div>p>span+em produces:
<div></div>
<div>
    <p><span></span><em></em></p>
</div>
Copy the code
The generated code, em tag is the child of p tag, but your intention is not so, you want em tag and P tag to be brothers, so how to do?

^ The label can be raised one level, for example

div+div>p>span+^em

The following code is generated:
<div></div>
<div>
    <p><span></span></p>
    <em></em>
</div>
Copy the code

With > operator you’re descending down the generated tree and positions of all sibling elements will be resolved against the most deepest element:

div+div>p>span+em

will be expanded to

<div></div>
<div>
    <p><span></span><em></em></p>
</div>
Copy the code

With ^ operator, you can climb one level up the tree and change context where following elements should appear:

div+div>p>span+em^bq
Copy the code

. outputs to

<div></div>
<div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div>
Copy the code

You can use as many ^ operators as you like, each operator will move one level up:

You can use more than one ^ to go up more than one level

div+div>p>span+em^^^bq
Copy the code

. will output to

<div></div>
<div>
    <p><span></span><em></em></p>
</div>
<blockquote></blockquote>
Copy the code

Multiplication: `*`(double)

Multiple of the same elements can be generated using *

With * operator you can define how many times element should be outputted:

ul>li*5
Copy the code

. outputs to

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
Copy the code

Grouping: `(a)`(branch)

Parentheses are used to group elements

Parenthesises are used by Emmets’ power users for grouping subtrees in complex abbreviations:

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

. expands to

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

If you’re working with browser’s DOM, you may think of groups as Document Fragments: each group contains abbreviation subtree and all the following elements are inserted at the same level as the first element of group.

Groups, or parentheses, can be used to make abbreviations in parentheses a whole. Operators before and after parentheses treat only the abbreviations in parentheses as a whole.

Groups can be nested

You can nest groups inside each other and combine them with multiplication * operator:

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

. produces

<div>
    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
    </dl>
</div>
<footer>
    <p></p>
</footer>
Copy the code

With groups, you can literally write full page mark up With a single, but please don’t do that.

Attribute Operators

Attribute operators are used to modify attributes of outputted elements. For example, in HTML and XML you can quickly add class attribute to generated element.

ID and CLASS

In CSS, you use elem#id and elem.class notation to reach the elements with specified id or class attributes. In Emmet, you can use the very same syntax to add these attributes to specified element:

div#header+div.page+div#footer.class1.class2.class3
Copy the code

. will output

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

Custom Attributes

Customize attributes with brackets []

The double quotation marks of attribute values can be omitted, but there can be no space between attribute values and =.

You can use [attr] notation (as in CSS) to add custom attributes to your element:

td[title="Hello world!" colspan=3]
Copy the code

. outputs

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

You can place as many attributes as you like inside square brackets.
You don’t have to specify attribute values: td[colspan title] will produce <td colspan="" title=""> with tabstops inside each empty attribute (if your editor supports them).
You can use single or double quotes for quoting attribute values.
You don’t need to quote values if they don’t contain spaces: td[title=hello colspan=3] will work.

Item numbering:`$`(Automatic numbering)

With multiplication * operator you can repeat elements, But with $you can number them. Place $operator inside element’s name, Attribute’s name or attribute’s value to output current number of repeated elements:

ul>li.item$*5
Copy the code

. outputs to

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

You can use multiple $ in a row to pad number with zeroes:

ul>li.item$$$*5
Copy the code

. outputs to

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

1. It is formulated to change the numbering base and direction.

With @ modifier, you can change numbering direction (ascending or descending) and base (e.g. start value).

For example, to change direction, add @- after $:

The @ sign changes the direction of growth (increasing or decreasing) and the base of a number.

It should be noted that the number after * sometimes represents the number, that is, the number of labels generated, and sometimes can be understood as the base

when@When a symbol is not followed by a number, it can be interpreted as a base.

when@When a symbol is followed by a number, it is understood as a number (in this case, it is only a number).

The sign for growth comes after the number at sign, you don’t have to write it for increase, you have to write a minus sign for decrease.

ul>li.item$@-*5
<! -- indicates that the growth direction is decreasing -->
Copy the code

… outputs to

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

To change counter base value, add @N modifier to $:

ul>li.item$@3*5
Copy the code

… transforms to

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

You can use these modifiers together:

ul>li.item$@-3*5
Copy the code

… is transformed to

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

Text: `{}`(text)

Use curly braces to add text, that is, text inside the tag.

You can use curly braces to add text to element:

a{Click me}
Copy the code

. will produce

<a href="">Click me</a>
Copy the code

Note that {text} is also an element

Note that {text} is used and parsed as a separate element (like, div, p etc.) but has a special meaning when written right after element. For example, A {click} and a>{click} will produce the same output, but a{click}+b{here} and a>{click}+b{here} won’t:

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

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

In second example the element is placed inside element. And that’s the difference: when {text} is written right after element, It doesn’t change the parent context. Here’s more complex example showing why it is important:

p>{Click }+a{here}+{ to continue}
Copy the code

. produces

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

In this example, to write Click here to continue inside

element we have explicitly move down the tree with > operator after p, But in case of an element we don’t have to, since we need element with here word only, without changing parent context.

For comparison, here’s the same kind of abbreviation written without child > operator:

p{Click }+a{here}+{ to continue}
Copy the code

. produces

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

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Emmet Quick Start

The relevant Emmet

How to use Emmet

Emmet grammar

Elements

Nesting operators

Child: `>`(Child node)

Sibling: `+`(Sibling node)

Climb-up: `^`(rise)

Multiplication: `*`(double)

Grouping: `(a)`(branch)

Attribute Operators

ID and CLASS

Custom Attributes

Item numbering:`$`(Automatic numbering)

1. It is formulated to change the numbering base and direction.

Text: `{}`(text)

Emmet Quick Start

The relevant Emmet

How to use Emmet

Emmet grammar

Elements

Nesting operators

Child: >(Child node)

Sibling: +(Sibling node)

Climb-up: ^(rise)

Multiplication: *(double)

Grouping: (a)(branch)

Attribute Operators

ID and CLASS

Custom Attributes

Item numbering:$(Automatic numbering)

1. It is formulated to change the numbering base and direction.

Text: {}(text)

Related Posts

ES6 Practices

Basic concepts of iOS startup optimization

React Hooks performance optimization

Child: `>`(Child node)

Sibling: `+`(Sibling node)

Climb-up: `^`(rise)

Multiplication: `*`(double)

Grouping: `(a)`(branch)

Item numbering:`$`(Automatic numbering)

Text: `{}`(text)