Emmet Grammar

HTML

Enter any of the following three lines to achieve the same effect

html:5
html5
!

The output effect

<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title>  <link rel="stylesheet" href=""> </head> <body> </body> </html>

Add class and id to the element

p.red
div#form-login

Add attributes to the element

input[value=10]
a[href=javascript:void(0)]
div[style=color:red]

The output effect

<input type="text" value="10">
<a href="javascript:void(0)"></a>
<div style="color:red"></div>

Adding content to an element (innerText)

section#slogan{Hello world! }

The output effect

<section id="slogan">Hello world! </section>

Element nesting, sibling, newline

P >span p.parg1+p.parg2 /* ^ */ p>span^p

The output effect

<p><span></span></p>

<p class="parg1"></p>
<p class="parg2"></p>

<p><span></span></p>
<p></p>

Expression grouping, same as ^ effect

(.foo>h1)+(.bar>h2)

The output effect

<div class="foo">
    <h1></h1>
</div>
<div class="bar">
    <h2></h2>
</div>

Define multiple elements

ul>li*3

The output effect

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

The classes are numbered sequentially, using $

ul>li.item$3

The output effect

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

CSS

The abbreviation for CSS property and unit mapping is as follows

/* 属性 */
m -> margin
w -> width
h -> height
ov-h -> overflow: hidden

/* 单位 */
p -> %
e -> em
x -> ex

@font-face

@f
@f+

The output effect

@font-face { font-family: 'FontName'; src: url('FileName.eot'); src: url('FileName.eot? #iefix') format('embedded-opentype'), url('FileName.woff') format('woff'), url('FileName.ttf') format('truetype'), url('FileName.svg#FontName') format('svg'); font-style: normal; font-weight: normal; }

Supplier prefix

trs
-super-foo
/* Browser prefix */
w -> -webkit-
m -> -moz-
s -> -ms-
o -> -o-

The output effect

-webkit-super-foo: ;
-moz-super-foo: ;
-ms-super-foo: ;
-o-super-foo: ;
super-foo: ;

The gradient

lg(left, #fff 50%, #000)

The output effect

background-image: -webkit-linear-gradient(left, #fff 50%, #000);
background-image: -o-linear-gradient(left, #fff 50%, #000);
background-image: linear-gradient(to right, #fff 50%, #000);

Generate test text

lorem10

The output effect

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente harum deleniti molestiae voluptatem placeat sequi sint saepe rem omnis dolorem amet cumque perferendis rerum possimus, autem corrupti distinctio, aut. Repellendus.