1. Expand the abbreviation. You can use html and css to generate the corresponding code by using the css selector. It is easy to understand css. Below are some shi'l
1.1 E element name (div, p );
1
<Div> </div>
2
<P> </p>
1.2 E # id: id element (div # content, p # intro, span # error );
1
<Div id = "content"> </div>
2
<P id = "intro"> </p>
3
<Span id = "error"> </span>
1.3 E. class uses the class Element (div. header, p. error. critial). You can also use the class and id together, such as div # content. column. width;
1
<Div class = "header"> </div>
2
<P class = "error critia"> </p>
3
<Div id = "content" class = "column widt"> </div>
1.4 E> N child element (div> p, div # footer> p> span );
1
<Div>
2
<P> </p>
3
</Div>
4
<Div id = "footer">
5
<P> <span> </p>
6
</Div>
1.5 E + N sibling elements (h1 + p, div # header + div # content + div # footer );
1
<P> </p>
2
<Div id = "header"> </div>
3
<Div id = "content"> </div>
4
<Div id = "footer"> </div>
1.6 E * N element doubling (ul # nav> li * 5> );
1
<Ul id = "nav">
2
<Li> <a href = ""> </a> </li>
3
<Li> <a href = ""> </a> </li>
4
<Li> <a href = ""> </a> </li>
5
<Li> <a href = ""> </a> </li>
6
<Li> <a href = ""> </a> </li>
7
</Ul>
1.7 E $ * N entry number (ul # nav> li. item-$ * 5 );
1
<Ul id = "nav">
2
<Li class = "item-1"> </li>
3
<Li class = "item-2"> </li>
4
<Li class = "item-3"> </li>
5
<Li class = "item-4"> </li>
6
<Li class = "item-5"> </li>
7
</Ul>
For html expansion abbreviations, see here: http://code.google.com/p/zen-coding/wiki/ZenHTMLSelectorsEn
For the abbreviation of css, see: http://code.google.com/p/zen-coding/wiki/ZenCSSPropertiesEn
Additional examples:
Abbreviation: html: 5> div # page> div # header> ul. navigation> li * 4> a (you can generate a complete html page)
01
<! Doctype html>
02
<Html lang = "en-US">
03
<Head>
04
<Meta charset = "UTF-8">
05
<Title> </title>
06
</Head>
07
<Body>
08
<Div id = "page">
09
<Div id = "header">
10
<Ul class = "navigation">
11
<Li> <a href = ""> </a> </li>
12
<Li> <a href = ""> </a> </li>
13
<Li> <a href = ""> </a> </li>
14
<Li> <a href = ""> </a> </li>
15
</Ul>
16
</Div>
17
</Div>
18
</Body>
19
</Html>
2. Filter (Filters)
The main function is to change the original output. For details, see the example:
Abbreviation: div # content> p. title
1
<Div id = "content">
2
<P class = "title"> </p>
3
</Div>
If the abbreviation | e is added, for example, div # content> p. title | e, the extension result is as follows: (convert insecure characters for xml to entity characters)
1
& Lt; div id = "content" & gt;
2
& Lt; p class = "title" & gt; & lt;/p & gt;
3
& Lt;/div & gt;
If it is changed to div # content> p. title | e, the result is as follows: (double quotation marks and escape are used this time .)
1
& Amp; lt; div id = "content" & amp; gt;
2
& Amp; lt; p class = "title" & amp; gt; & amp; lt;/p & amp; gt;
3
& Amp; lt;/div & amp; gt;
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
