New methods for writing HTML and CSS

Zen CodingAn editor that simplifies the compilation of HTML, XML, XSL (or other such formats ). It mainly uses an abbreviated syntax to write a large number of repeated and tasteless HTML, much like CSS syntax. The following is an example:

div#page>div.logo+ul#navigation>li*5>a

After expansion, it will look like the following:

<div id="page">        <div></div>        <ul id="navigation">                <li><a href=""></a></li>                <li><a href=""></a></li>                <li><a href=""></a></li>                <li><a href=""></a></li>                <li><a href=""></a></li>        </ul></div>

It can be seen that # represents ID,> represents the next layer. If you write:

select>option#item-$*3

Then you will get:

<select><option id="item-1"></option><option id="item-2"></option><option id="item-3"></option></select>

It looks good. Currently, it supports the following Editor:

• AptanaHowToEn
• TextMate(Mac). Available in two flavors: basic snippets (Zen HTML and Zen CSS) and full-featured plugin (ZenCoding for TextMate). Bundles> Zen Coding menu item
• Coda(Mac)-external download, via TEA for Coda. Plug-ins> TEA for Coda> Zen Coding menu item
• Espresso(Mac)-external download, via TEA for Espresso. Zen Coding is bundled with Espresso by default, but you shoshould upgrade ZC to latest version. Actions> HTML menu item
• Komodo Edit/IDE(Crossplatform)-external download. Tools> Zen Coding menu item
• Notepad ++(Windows). Zen Coding menu item
• PS3(Windows). Scripts> Zen Coding menu item
• <Textarea>(Browser-based). See online demo.
• EditArea(Browser-based). See online demo.

The following third-party plug-ins are also available:

• Dreamweaver(Windows, Mac)
• Sublime Text(Windows)
• UltraEdit(Windows)
• TopStyle(Windows)
• GEdit(Crossplatform)-Franck Marcia's plugin, Mike Crittenden's plugin
• BBEdit/TextWrangler(Mac)-external download
• Visual Studio(Windows)-external download