Sublimetext Emmet Plugin (Zen coding)

1. Omit Div, plugin will default element to Div

. container

<class= "container"></div>

Ambiguous tag names, such as no need to specify Li,emmet will automatically help you generate

Ul>.lis

< ul > <  class= "lis"></li></ul >

2. Chain abbreviation

①>: Adding Create child elements
Div>span

< Div >< span ></ span ></ Div >

②+: Adding create same-level elements

Div+span

< Div ></ Div > < span ></ span >

③^: Add a parent level element (you can move up multiple layers if needed)

P>a^p

< P ><  href= ""></a></p>  <P></p>

3. grouping function;
(. one>h1) + (. two>h1)

<Divclass= "One"><H1></H1></Div><Divclass= "both"><H1></H1></Div>

4. Insert the text {} and attributes [];

H1{heading}

< H1 >heading</H1>

a[href= ' # '

<href= "#"></a>

5. Add more than one class;

. one.two.three

<class= "One three"></div>

6. Add multiple elements
Ul>li*5

<ul><Li></Li><Li></Li><Li></Li><Li></Li><Li></Li></ul>

7. Automatic list Count

HTML elements are generated sequentially, using the $ notation to help generate a series of numbers, support for Class,id, attributes, content, and so on.
(Generate n-bit numbers, using N $ symbols)
Ul>li.list${number $}*5

<ul><Liclass= "List1">Number 1</Li><Liclass= "List2">Number 2</Li><Liclass= "List3">Number 3</Li><Liclass= "List4">Number 4</Li><Liclass= "List5">Number 5</Li></ul>

Ul>li$.number$$*5

<ul><Li1class= "Number01"></Li1><Li2class= "Number02"></Li2><Li3class= "Number03"></Li3><Li4class= "Number04"></Li4><li5class= "Number05"></li5></ul> 

Sublimetext Emmet Plugin (Zen coding)