Emmet plug-ins are commonly used in writing and emmet plug-ins

Emmet plug-ins are commonly used in writing and emmet plug-ins

I read some documents about the Emmet plug-in writing. How can I write it so long. Actually, I know a few rough points, and I can write my work in combination with my practice.

Miscellaneous

In my previous article [Discovering the New World Today: haml and Emmet], I wrote my first thoughts to myself.

Some people read my blog and comments. Although there are not many, they are flattered by the scum I just got started. I often say "four" or "four" by male tickets ...... Else (⊙ ω ⊙ RMB)

Well, it's off. In short, whether it is for yourself or for others to write things in the future. Write carefully in the spirit of sharing (~ Q ~)

 

About Emmet

The predecessor of the Emmet plug-in is Zen coding, a tool that can greatly improve the efficiency of front-end development. It is also said that like jade (a high-performance template engine, it is heavily affected by Haml, it is implemented in JavaScript and can be used by Node ). I will not go into details about the Official Languages. Baidu can find them directly.

 

Editor supported by Emmet:

• Sublime Text 2
• TextMate 1.x
• Eclipse/Aptana
• Coda 1.6 and 2.x
• Espresso
• Chocolat (add in the "Install Mixin" dialog box)
• Komodo Edit/IDE (via Tools → Add-ons menu)
• Notepad ++
• PS3
• <Textarea>
• CodeMirror2/3
• Brackets

 

 

Third-party plug-in support

The following editor plug-ins are provided by third-party developers, so they may not support all Emmet functions and features.

• SynWrite
• WebStorm
• PhpStorm
• Vim
• HTML-Kit
• HippoEDIT
• CodeLobster PHP Edition
• TinyMCE

 

Emmet installation method (Sublime text 3 install emmet plug-in method: http://blog.csdn.net/mengke1124/article/details/41696779)

Because I use Sublime text 3, other editor installation methods may need to be searched online according to their own needs.

 

Common Emmet plug-ins

Http://www.w3cplus.com/tools/emmet-cheat-sheet.html)

This document is clearly written, and there are also ways to install plug-ins. However, there are too many methods to be introduced, which is a bit lengthy. I have summarized some of the methods that I personally think are useful and commonly used.

Slightly written version:

Div> (header> ul> li * 2> a) + footer> p (+ connects to the next sibling element)
(Div> dl> (dt + dd) * 3) + footer> p (A group in parentheses)
Ul> li $ [title = item $] {hhh $} * 5 (li $, indicating li auto-increment + 1)
H. item $ {hhh $} * 5 (the displayed text is in brackets)
Ul> li. item $ * 5 ($ is auto-incrementing, and three $ is a three-digit number)
Ul> li. item $ @ 3*5 (@ auto-increment from 3 + 1)
Ul> li. item $ @-* 5 (@-, auto-subtraction)
Ul> li. item $@-3*5 (@-3, the minimum number for auto-Subtraction is 3)
Form # search. wide (# is id,. Is class)
P [title = 'Hello word'] (custom attribute)

(Implicit tag)

. Class
Em>. class
Ul>. class
Table>. row>. col
! (Abbreviated html start code)
(Abbreviation)
A
A: link
Hr
Link
Link.css
Meta: utf
Script: src
Img

 

Detailed version:

Div + div> p> span + em ^ bq (^ is a superior element)

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

Div + div> p> span + em ^ bq

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

 

Ul> li * 5 (> refers to the abbreviation of descendant, * Indicates several)

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

Div> (header> ul> li * 2> a) + footer> p (+ connects to the next sibling element)

<div>    

(Div> dl> (dt + dd) * 3) + footer> p (A group in parentheses)
<div>    <dl>        <dt></dt>        <dd></dd>        <dt></dt>        <dd></dd>        <dt></dt>        <dd></dd>    </dl></div><footer>    <p></p></footer>


Ul> li $ [title = item $] {hhh $} * 5 (li $, indicating li auto-increment + 1)
<ul>    <li1 title="item1">hhh 1</li1>    <li2 title="item2">hhh 2</li2>    <li3 title="item3">hhh 3</li3>    <li4 title="item4">hhh 4</li4>    <li5 title="item5">hhh 5</li5></ul>


H. item $ {hhh $} * 5 (the displayed text is in brackets)


Ul> li. item $ * 5 ($ is auto-incrementing, and three $ is a three-digit number)
<ul>    <li class="item001"></li>    <li class="item002"></li>    <li class="item003"></li>    <li class="item004"></li>    <li class="item005"></li></ul>

Ul> li. item $ @ 3*5 (@ auto-increment from 3 + 1)
<ul>    <li class="item3"></li>    <li class="item4"></li>    <li class="item5"></li>    <li class="item6"></li>    <li class="item7"></li></ul>

Ul> li. item $ @-* 5 (@-, auto-subtraction)
<ul>    <li class="item5"></li>    <li class="item4"></li>    <li class="item3"></li>    <li class="item2"></li>    <li class="item1"></li></ul>

Ul> li. item $@-3*5 (@-3, the minimum number for auto-Subtraction is 3)
<ul>    <li class="item7"></li>    <li class="item6"></li>    <li class="item5"></li>    <li class="item4"></li>    <li class="item3"></li></ul>


Form # search. wide (# is id,. Is class)
<form action="" id="search" class="wide"></form>

P [title = 'Hello word'] (custom attribute)
<p title="hello word"></p>


(Implicit tag)
. Class
<div class="class"></div>

Em>. class
<em><span class="class"></span></em>

Ul>. class
<ul>    <li class="class"></li></ul>

Table>. row>. col
<table>    <tr class="row">        <td class="col"></td>    </tr></table>

! (Abbreviated html start code)
<!doctype html>


(Abbreviation)
A
<a href=""></a>

A: link
<a href="http://"></a>

Hr

Link
<link rel="stylesheet" href="">

Link.css
<link rel="stylesheet" href="" class="css">

Meta: utf
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

Script: src
<script src=""></script>

Img

 
Official api:Http://docs.emmet.io/cheat-sheet/
Api table:Http://www.w3cplus.com/sites/default/files/baiyaimages/CheatSheet.jpg
 
(●-●) I really hate text format and feel like a waste of time ......