Zen Coding Simple and fast HTML writing_HTML/Xhtml_Web page production

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

For example, the following HTML code:

Copy the code

The code is as follows:

< ;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">


< ;meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

• < ;/li>
  




• 
  

By Zen Coding , one line is enough:

Copy the code

The code is as follows:

html:xt> div#header>div#logo ul#nav>li.item-$*5>a

Here is the Online DEMO (Shortcut keys do not work, please check possible shortcut key conflicts. For example, input in Sogou The puja occupies "Ctrl,")

Zen Coding’s abbreviation rules are somewhat similar to CSS selectors:

• id and class: For example, div#main.list.item represents
• Other attributes can be like this: div[title], a[title="Hello world" rel], td[colspan=2]
• Duplicate elements: li*3 will output 3
• Duplicate element number: li.list-$$*2 will be expanded to
• < ;/li> . When multiple $ are put together, the preceding $ will be used as 0 to fill the digits.
• You can use brackets to group: div#page>(div#header>ul#nav>li*4>a) (div#page>(h1>span) p*2) div#footer
• Filters support, using different parameters will get completely different results

Other main features

Default except HTML/XML/XSL/CSS/HAML abbreviation, Zen Coding also provides some other functions that facilitate code writing.

Abbreviation Wrap(Wrap with Abbreviation).

According to the cursor position or text selection, enter the code abbreviation to get the desired final code.

Copy code

The code is as follows:

You walk into the room
With your pencil 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?

Use "ul> li*>span" will get the following code after wrapping:

Copy the code

The code is as follows:

• You walk into the room


• With your pencil 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)提供了一个快速选择元素内所有内容的方法

编辑点(Edit Point)

由ZC扩展出来的代码是没有内容的，此功能则可以快速的定位到内容编辑点处

最后

常见的IDE如Ecliplse/Aptana,Notepad ,TextMage,Dreamweaver,UltraEdit,Visual Studio等，都已经有官方或者第三方的插件支持。实际上由于Zen Coding的核心代码有Javascript和Python两种语言版本，在引入了相应的JS文件后，浏览器中的文本编辑区域都可以使用Zen Coding了。