Zen Coding Easy and fast HTML writing

Zen Coding Easy and fast HTML writing

Zen Coding It is a text editor plugin. In a text editor using Zen Coding, you can use short codes to write regular HTML codes. This tool greatly simplifies HTML writing.

For example, the following HTML code:

Copy 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">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
</head>
<body>
<div id="header">
<div id="logo"></div>
<ul id="nav">
<li class="item-1"><a href=""></a></li>
<li class="item-2"><a href=""></a></li>
<li class="item-3"><a href=""></a></li>
<li class="item-4"><a href=""></a></li>
<li class="item-5"><a href=""></a></li>
</ul>
</div>
</body>
</html>

With Zen Coding, it’s just one line:

Copy code
The code is as follows:

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

Here is the online DEMO (If the shortcut keys do not work, please check for possible shortcut key conflicts. For example, Sogou input method will occupy "Ctrl+,")

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

  • id and class: For example, div#main.list.item means <div id="main" class="list item"></div>
  • Other attributes can be: div[title], a[title="Hello world" rel], td[colspan=2]
  • Repeating elements: li*3 will output 3 <li></li>
  • Repeating element numeric sequence: li.list-$$*2 will be expanded to <li class="list-01"></li><li class="list-02"></li>. When multiple $ are put together, the leading $ 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 In addition to the HAML abbreviation, Zen Coding also provides some other functions that facilitate code writing. .

Abbreviated Package (Wrap with Abbreviation).

Depending on 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?

The above text is wrapped with "ul>li*>span" to get the following code:

Copy code
The code is as follows:

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

Tag Matching (Balance Tag)

ZC (Zen Coding) provides a quick way to select all the contents within an element

Edit Points (Edit Point)

The code extended by ZC has no content. This function can quickly locate the content editing point.

edit points

at last

Common IDEs such as Eclipse/Aptana, Notepad++, TextMage, Dreamweaver, UltraEdit, Visual Studio, etc. already have official or third-party plug-in support. In fact, since the core code of Zen Coding has two language versions, Javascript and Python, after introducing the corresponding JS file, Zen Coding can be used in the text editing area of ​​the browser.

<<:  SVG+CSS3 to achieve a dynamic wave effect

>>:  JavaScript to achieve JD.com flash sale effect

Recommend

Docker Swarm from deployment to basic operations

About Docker Swarm Docker Swarm consists of two p...

Dynamic starry sky background implemented with CSS3

Result:Implementation Code html <link href=...

Let's deeply understand the event object in js

We know that the commonly used events in JS are: ...

Tutorial on setting up scheduled tasks to backup the Oracle database under Linux

1. Check the character set of the database The ch...

How to use the MySQL authorization command grant

The examples in this article run on MySQL 5.0 and...

Vue storage contains a solution for Boolean values

Vue stores storage with Boolean values I encounte...

Differences between FLOW CHART and UI FLOW

Many concepts in UI design may seem similar in wo...

Detailed analysis of MySQL optimization of like and = performance

introduction Most people who have used databases ...

Detailed explanation of the four transaction isolation levels in MySQL

The test environment of this experiment: Windows ...

A brief discussion on VUE uni-app custom components

1. Parent components can pass data to child compo...

MySql import CSV file or tab-delimited file

Sometimes we need to import some data from anothe...

Optimization of data tables in MySQL database, analysis of foreign keys and usage of three paradigms

This article uses examples to illustrate the opti...

Customize the style of the <input type="file"> element used when uploading files in HTML

In a web page, the <input type="file"...

Detailed explanation of writing and using Makefile under Linux

Table of contents Makefile Makefile naming and ru...

Detailed explanation of the alternative implementation code of CSS vertical centering (unconventional)

Preface As we all know, "How to vertically c...