Install and use the Zencoding Plugin in Sublime text 2 and WIN7

Http://www.yzswyl.cn/blread-1616.html

What is Zendcoding?

It is a Zencoding project written by Sergey Chikuyonok, a Russian young man. It mainly imitates the CSS selector syntax to quickly code HTML code. How fast can it be? Tell you now.

Take a look at the following picture:

 

Note that the "Enter Koan" section in the figure outputs so many html code with just a few characters. How can this problem be solved? Good time? Next we will see how to install.

First, we need to install a plug-in Installation Platform.

A: press the shortcut key Ctrl + '(note that this character is the one on the left of number 1) to bring up the console;

B: paste the following code and press Enter. A plug-in named "Package Control" is installed, which can be considered as the Installation Platform for other plug-ins. Other plug-ins can be installed through it;

 

import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())

 

Install and restart Sublime.

C: press the shortcut key Ctrl + Shift + p to bring up the command line selector. Then, enter install to bring up the Package Control. Find Zencoding at the bottom, click it, install it, and restart it.

D: Use Sublime to open index.html.

E: the key point is: in windows, the shortcut to enable Zencoding is Ctrl + Alt + Enter!

For example:

 

Next we will learn how to use it.

 

(1) Search for zencoding in github, as shown in.

Search Results:

From the search results, we can see that zencoding has multiple language extensions and IDE extensions, so it can not only write HTML and CSS, but also write Ruby and PHP, for details, see "more>" on the image ".

 

(2) Click sergeche/zen-coding in the middle to go to the project page.Then, you can see the following instructions:

 

Current features of abbreviation engine:A.ID and CLASS attributes: div#page.section.main.B.Custom attributes: div[title], a[title="Hello world" rel], td[colspan=2].C.Element multiplication: li*5 will output tag five times.D.Item numbering with $ character: li.item$*3 will output tag three times, replacing $ character with item number.E.Multiple ‘$’ characters in a row are used as zero padding, i.e.: li.item$$$ → li.item001F.Abbreviation groups with unlimited nesting: div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer. You can literally write a full document markup with just a single line.G.Filters supportH.div tag name can be omitted when writing element starting from ID or CLASS: #content>.section is the same as div#content>div.section.

Explanation:

1) "#" Table id, "." Table class, and "+" table

 

After writing the code after Enter Koan, the HTML structure is displayed above. In this example, the general zencoding format is "HTML Tag # xxx" or "HTML Tag. yyy", while # xxx indicates that the id is xxx,. yyy indicates that the class is yyy. "+" Indicates the combination of tags.

 

Exercise 1:

<div id="header"></div><div class="content"></div><div class="sidebar"></div><div id="footer"></div>

 

Exercise 2:

<div id="header"></div><div id="content" class="aticle posts"></div><div id="sidebar" class="ad"></div><div id="footer"></div>

 

 

2) ">" refers to sub-content

It is easy to understand. For example, if you write the Koan "div> p> span> a", this HTML structure is available:

<div>    <p><span><a href=""></a></span></p></div>

The property href in tag a is added intelligently by zencoding. In short, ">" produces a tag level, and zencoding will be automatically indented. Let's continue to practice.

 

Exercise 3:

Exercise 4:
3) "()" indicates the same level
I believe you will understand the answer by referring to Exercise 4.
4) "[]" table attributes
To write 

Exercise 5:
<div id="content">    <div class="aticle">        

5) # And.
In Koan: div. OK is equivalent to. OK, and div # no is equivalent to # no. Therefore, when you directly write. Or #, the default Div label is also.
Exercise 6:Rewrite exercise 5 in short.
6) "*" Table label clone
If you write ul> li * 5 in Koan, the following HTML structure is generated:
<ul><li></li><li></li><li></li><li></li><li></li></ul>
What if <a> and <span> still exist in each li element?

OK. You must have understood the usage of the "*" number. Continue to the exercise.
7) "{}" Table label content
In Koan, enter div> span> h1 {This is the title}. Let's see what will happen.
8) "$" continuous table count

Therefore, no matter in attributes such as li. li-$ or the content in the id or {}, $ indicates the sequence starting from 1, and writes a 1 in one cell with the Excel table. The drop-down box is changed to 2, 3, 4, 5, 6 means the same.
Exercise 7:
<Div class = "header"> <ul class = "nav"> <li> <a href = "" sytle = "block"> <span> xuejie house </span> </a> </li> <a href = "" sytle = "block"> <span> xuejie house </span> </a> </li> <li> <a href = "" sytle = "block"> <span> xuejie house </span> </a> </li> <a href =" "sytle =" block "> <span> xuejie house </span> </a> </li> <a href =" "sytle =" block "> <span> xuejie house </span> </a> </li> <a href = "" sytle = "block"> <span> xuejie house </span> </a> </li> </ul> </div>
Exercise 8:
<table>    <thead>        <td class="col1"></td>        <td class="col2"></td>        <td class="col3"></td>        <td class="col4"></td>    </thead>    <tbody>        <tr class="row01">            <td class="col1"></td>            <td class="col2"></td>            <td class="col3"></td>            <td class="col4"></td>        </tr>        <tr class="row02">            <td class="col1"></td>            <td class="col2"></td>            <td class="col3"></td>            <td class="col4"></td>        </tr>        <tr class="row03">            <td class="col1"></td>            <td class="col2"></td>            <td class="col3"></td>            <td class="col4"></td>        </tr>    </tbody>    <tfoot>        <td></td>        <td></td>        <td></td>        <td></td>    </tfoot></table>
 
Exercise answer:
 
Exercise 1: div # header + div. content + div. sidebar + div # footer
 
Exercise 2: div # header + div # content. aticle. posts + div # sidebar. ad + div # footer
 
Exercise 3: html> head + body> div. header + div. content + div. footer
 
Exercise 4: html> (head> title + style + script) + body> (div. content> div. nav + div. sidebar + div. main) + div. footer
 
Exercise 5: div # content> div. aticle> h1. OK [title = papername sytle = color: #000;] + h3 [title = subname] [sytle = color: # fff;]. no + p. words
 
(Note: 1. Does the id or class have nothing to do with the order of attributes ?; 2. Is it flexible to write parallel attributes? 3. Why is this example not used (), but must be used in the previous example ?)
 
Exercise 6: # content>. aticle> h1. OK [title = papername sytle = color: #000;] + h3 [title = subname] [sytle = color: # fff;]. no + p. words
 
Exercise 7: div. header> ul. nav> li * 6> a [sytle = block]> span {xuejie house}
 
Exercise 8: table> (thead> td. col $ * 4) + (tbody> tr. row $ * 3> td. col $ * 4) + tfoot> td * 4