Emmet shortcuts - Quick encoding tools necessary front-end - Code World

Emmet (formerly known as Zen Coding) is a front-end development can greatly improve the efficiency of a tool. Emmet fragment to improve this concept to a new level: You can set the CSS forms can be resolved dynamic expression, and then get the appropriate content based on the abbreviation you entered. Emmet is very mature and is ideal for front-end developers to write HTML / XML and CSS code, but can also be used in programming languages.

Examples

Emmet

download

Official website address: http: //emmet.io/

Plug Download: http: //emmet.io/download/

The editor supports the following

Emmet

Later there are shortcuts Download address

use

In an editor html:5presses the tab key

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

1, a new label

In an editor divpresses the tab key

<div></div>

2, with a new class (named c1) and id (named ID1) Tags

In an editor div#id1.c1presses the tab key

<div id="id1" class="c1"></div>

3, nested label

ul>li

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

4, create multiple labels

ul>li*5

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

5, create multiple labels and add the class

ul>li.l$*5

<ul>
    <li class="l1"></li>
    <li class="l2"></li>
    <li class="l3"></li>
    <li class="l4"></li>
    <li class="l5"></li>
</ul>

6. Creates a peer-label

div.div1+ul>li*2

<div class="div1"></div>
<ul>
    <li></li>
    <li></li>
</ul>

More use can be found

Emmet shortcuts map

Picture Download

Links: http://pan.baidu.com/s/1jIjSQ7W Password: 27mx

by Weber.pub

This article addresses: http://weber.pub/emmet shortcuts - Quick encoding tools necessary front-end /179.html

Emmet shortcuts - Quick encoding tools necessary front-end