ZenCoding simple and quick HTML compiling _ HTML/Xhtml _ webpage Creation

ZenCoding is a text editor plug-in. In the ZenCoding text editor, you can use short code to write regular HTML code. This tool greatly simplifies HTML writing. Zen Coding is a text editor plug-in. In the text editor using Zen Coding, you can use short code to write regular HTML code. This tool greatly simplifies HTML writing.

For example, the following HTML code:

The Code is as follows:

With Zen Coding, a row can be:

The Code is as follows:

Html: xt> p # header> p # logo + ul # nav> li. item-$ * 5>

This is an Online DEMO (the shortcut key does not work. Check for possible shortcut key conflicts. For example, sogou's input method occupies "Ctrl + ,")

The abbreviation rules of Zen Coding are somewhat similar to CSS selectors:

• Id and class: for example, p # main. list. item indicates

• Other attributes can be as follows: p [title], a [title = "Hello world" rel], td [colspan = 2]
• Repeated element: li * 3 Outputs three
• Repeated element number: li. list-$ * 2 will be extended
. When multiple $ is put together, the previous $ is used as 0 to fill the number of digits.
• P # page> (p # header> ul # nav> li * 4> a) + (p # page> (h1> span) + p * 2) + p # footer
• Filters is supported. Different parameters are used to obtain different results.

Other main functions

By default, in addition to the abbreviations of HTML, XML, XSL, CSS, and HAML, Zen Coding provides other functions to facilitate code writing.

Wrap with Abbreviation ).

Enter the abbreviated code to get the desired final code based on the cursor position or text selection.

The Code is as follows:

You walk into the room
With your pencel in your hand
You see somebody naked
And you say, Who is that man?
You try so hard
But you don't understand
Just what you'll say
When you get home
Because something is happening here
But you don't know what it is
Do you, Mister Jones?

The following code is obtained after the preceding text is wrapped with "ul> li *> span:

The Code is as follows:

• You walk into the room


• With your pencel in your hand


• You see somebody naked


• And you say, Who is that man?


• You try so hard


• But you don't understand


• Just what you'll say


• When you get home


• Because something is happening here


• But you don't know what it is


• Do you, Mister Jones?

Balance Tag)

ZC (Zen Coding) provides a quick way to select all content in the element.

Edit Point)

The Code expanded by ZC has no content. This function allows you to quickly locate the content editing point.

Last

Common ides such as javaslse/Aptana, Notepad ++, TextMage, Dreamweaver, UltraEdit, and Visual Studio are supported by official or third-party plug-ins. In fact, because the core code of Zen Coding includes Javascript and Python versions, after the corresponding JS file is introduced, Zen Coding can be used in the text editing area of the browser.