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.