Introduction and use of Emmet (formerly Zen coding)

Zen coding-a quick way to write HTML/CSS code. It uses the syntax similar to the CSS selector to quickly develop HTML and CSS-developed by Sergey chikuyonok.

Now it has changed its name to Emmet and set up a new website: Docs. Emmet. Io.

Unlike the concept of "code snippets" used in General Editors, Emmet uses dynamic syntax to generate code, which means you do not need to edit and create fixed code snippets by yourself. It greatly improves the code writing effect, which is similar to the popular Zen coding.

For example, enter the following content:

ul#nav>li.item$*4>a{Item $} 

Emmet will help you generate the following code snippets:

<Ul id = "nav"> <li class = "Item1"> <a href = ""> Item 1 </a> </LI> <li class = "item2"> <a href = ""> Item 2 </a> </LI> <li class = "item3"> <a href = ""> Item 3 </a> </LI> <li class = "item4"> <a href = ""> Item 4 </a> </LI> </ul>

An article:
Zen coding: A quick way to write HTML/CSS code

In this article, we will show a new method to quickly develop HTML and CSS by using the syntax similar to the CSS selector. Developed by Sergey chikuyonok.

How long have you spent writing HTML code (including all tags, attributes, references, braces, and so on? If your editor has the code prompt function, it will be easier for you to write, but even so, you still need to manually enter a lot of code.

 

In JavaScript, when we want to obtain a specific element on a page, we will encounter the same problem. We have to write a lot of code, which makes it difficult to maintain and reuse. The javascript framework came into being. They also introduced the CSS selector engine. Now, you can use a simple CSS expression to retrieve DOM elements, which is cool.

However, what if you can not only use CSS selector to layout and locate elements, but also generate code? For example, if you write:

div#content>h1+p

... Then we can see the output as follows:

<div id="content">

Are you confused? Today, I will introduce you to Zen coding, a set of tools for quick HTML and CSS coding. Initially proposed by Vadim makeev in April 2009 (the article is in Russian), developed by the monks (that is, me) for several months and eventually reached a relatively mature state. Zen coding consists of two core components: an extended abbreviation (CSS-like selector) and context-independent HTML Tag pair. Take a look at this demo video to see what they can do for you.

Expand abbreviation

Expand the abbreviation function to convert a CSS-like selector to XHTML code. The term "abbreviation" may be a bit difficult to understand. Why not simply call it a "CSS selector? Well, the first reason is semantics: "selector" meansSelectSomething, but here we are actuallyGenerateSomething is a short alternative to writing long code. Secondly, it only uses a small subset of the real CSS selector syntax and adds some new operators.

Here is a list of supported attributes and operators:

• E
  Element name (DIV, P );
• E # ID
  Use the ID element (div # Content, P # intro, span # error );
• E. Class
  Use the class Element (Div. header, P. Error. critial). You can also use the class and Idid: div # content. Column. width;
• E> N
  Child element (div> P, div # footer> P> span );
• E + n
  Sibling element (H1 + P, div # header + Div # content + Div # footer );
• E * n
  Element doubling (UL # nav> li * 5> );
• E $ * n
  Entry number (UL # nav> Li. item-$ * 5 );

As you can see, you already know how to use ZEN coding: Just a simple imitation CSS selector (ER, "abbreviation" sorry), just like this...

div#header>img.logo+ul#nav>li*4>a

... Then, call the "Expand abbreviation" action.

There are two new operators: Element multiplication and entry number. For example, if you want to generate five <li> elements, you can simply write li * 5. It will also overwrite all child elements. If you want to write four <li> elements, each of which has a <A> label, you can simply write it as li * 4>, the following HTML code is generated:

1234	<li><a href=""></a></li><li><a href=""></a></li><li><a href=""></a></li><li><a href=""></a></li>

The last entry number is used when you want to mark repeated elements with indexes. Suppose you want to generate three <div> elements whose class is Item1, item2, and item3. You can write this abbreviation, Div. Item $ * 3:

 

More:

Http://www.qianduan.net/zen-coding-a-new-way-to-write-html-code.html

Http://www.cnblogs.com/cobby/archive/2012/05/09/2492473.html