Read this article and read the Web article carefully. The implementation of Zen coding fast Coding HTML/CSS Code
Copy Code code as follows:
E
Element name (Div, p);
E#id
Use the elements of the ID (div#content, P#intro, Span#error);
E.class
Use the elements of the class (Div.header, P.error.critial). You can also use class and idid:div#content.column.width together;
E>n
Descendant elements (Div>p, Div#footer>p>span);
E+n
Sibling elements (h1+p, div#header+div#content+div#footer);
E*n
Element multiplication (ul#nav>li*5>a);
E$*n
Entry number (UL#NAV>LI.ITEM-$*5);
Zen coding replace Show ' API '.
Zen Coding is a Russian editor (support most popular editor) Plug-ins, its installation is very simple, as long as the installation of Plug-ins, and then copy the JS file in the project can be. When the project is published, you can delete the JS file. Its main task is to html,css the front-end engineers from the cumbersome structure of the code to liberate, but the inside need to replace the memory is very much, the spirit of the eye 10 times than the principle of manual, can only edge with the note.
The CSS replacement function is also very good. But there are also a lot of redundant replacements, and I'm using one side to revise the original author's definition of unreasonable substitution in actual production.
The zen_settings file will be sent up later with a simple explanation of the replacement code.
It must have been a little strange at first, and the structure had to be written while thinking. But after the habit, the feeling is very convenient, can use "fast" two words to summarize the mood when writing.
As for the other experience, I will slowly send out after use for reference.
The Zen feature is a deep imitation of the CSS selector. The jquery selector is also learned with CSS selectors, so people who are familiar with both techniques will soon get started. Other details focus on the source site.
where the HTML tag replacement learning-The source code in its package zen-settings.js, I list most are commonly used, there are not commonly used not listed, refer to the source file, the previous line is manual input, the next line is pressing the shortcut key (alt+e) after the Zen output, the environment for Aptana 2.0.2:
No longer exists, the file is not available for download.
This document was last updated in 2009 and the main contents of this update are:
1. Add unit after width equivalent.
2. Make common abbreviations more humane.
3. There are several new abbreviations added.
The two days of the CSS replacement function did a crazy experiment and improve, to its use of excessive frequency of replacement do a simplification, difficult to remember, with the accent, this time, the changes will be extended shortcut keys to alt+s, because I normally QQ message is the two keys, more accustomed to, CTLR + ENTER, Left Hand Ctrl right hand enter too troublesome, right hand CTRL + ENTER completion time is too long, left hand finished. Share the experience as follows, the single letter starts as the original element, the next behavior zen the extended output element, and so on:
In the original Zen CSS property and attribute value is to take the first letter colon and then the property value, I have simplified the wording. The commonly used properties are abbreviated. Like what
Copy Code code as follows:
The original p is padding, the original Zen for Pos feel too troublesome, so reduced to PP, and then its property value.
Ppa
Position:absolute;
Ppr
position:relative;
There are similar:
Fl
Float:left;
Fr
Float:right;
Cb
Clear:both;
Db
Display:block;
Di
Display:inline;
Dib
Display:inline-block;
Oh
Overflow:hidden;
Other CSS classes:
Copy Code code as follows:
M
margin:;
Mt
Margin-top:;
Mr
Margin-right:;
ml
Margin-left:;
Mb
Margin-bottom:;
padding:;
PT,PR,PB,PL and margin
Bg
Background:url () 0 0 no-repeat;
Bg:n
Background:none;
Bg:x
Background:url () 0 0 repeat-x;
Bg:y
Background:url () 0 0 repeat-y;
Bg:ie
Filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src= ' x.png ');
border:1px solid #000;
Bd:n
Border:none;
Bdc
Border-color: #000;
C
Color: #000;
D
Display:block;
F
font-size:12px;
H:;
Height:;
W
Width:;
D:i
Display:inline;
D:b
Display:block;
Fl
Float:left;
Fr
Float:right;
Cl
Clear:both;
C:l
Clear:left;
C:r
Clear:right;
C:n
Clear:none;
T
Top:;
Bt
Bottom:;
R
Right:;
L
Left:;
R
Right:;
Z
Z-index:;
V
Visibility:hidden;
O:h
Overflow:hidden;
Zoo
Zoom:1;
M:a
margin:0 Auto;
Ol
Outline:;
Q
Quotes:;
Tc
Text-align:center;
Tl
Text-align:left;
Tr
Text-align:right;
Td
Text-decoration:none;
Te
Text-emphasis:;
To:n
Text-outline:none;
Whs:n
White-space:normal;
Whs:nw
White-space:nowrap;
Wob:k
Word-break:keep-all;
Fz
font-size:12px;
Fw
Font-weight:bold;
Ff
Font-family:;
Op
Opacity:;
C:p
Cursor:pointer;
HTML class:
General Category: Div#a+div#b+div.c-$*5+li*10
Copy Code code as follows:
<div id= "a" ></div>
<div id= "B" ></div>
<div class= "c-11" ></div>
<div class= "C-22" ></div>
<div class= "C-33" ></div>
<div class= "c-44" ></div>
<div class= "c-55" ></div>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
Div#width>p#a>p#a>p*10>p#a
Copy Code code as follows:
<div id= "width" >
<p id= "a" >
<p id= "a" >
<p>
<p id= "a" ></p>
</p>
<p>
<p id= "a" ></p>
</p>
</p>
</p>
</div>
Ul#a>li.c-$*5+li.0>a.title
Copy Code code as follows:
<ul id= "a" >
<li class= "C-1" ></li>
<li class= "C-2" ></li>
<li class= "C-3" ></li>
<li class= "C-4" ></li>
<li class= "C-5" ></li>
<li class= "0" ><a href= "" class= "title" ></a></li>
</ul>
Html:xt
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title></title>
<meta http-equiv= "Content-type" content= "Text/html;charset=utf-8"/>
<body>
Aaa
</body>
More of
Copy Code code as follows:
Cc:ie6
<!--[If LTE IE 6]>
Aa
<! [endif]-->
Cc:ie
<!--[If ie]>
<! [endif]-->
Cc:noie
<!--[if! ie]><!-->
Aa
<!--<! [endif]-->
Link:css
<link rel= "stylesheet" type= "Text/css" href= "Style.css" media= "All"/>
A:mail
<a href= "mailto:jikeytang@163.com" ></a>
Meta:utf
<meta http-equiv= "Content-type" content= "Text/html;charset=utf-8"/>
Link
<link rel= "stylesheet" href= ""/>
Style
<style type= "Text/css" >body{}</style>
Script
<script type= "Text/javascript" >//some coding</script>
Script:src
<script type= "Text/javascript" src= "/scripts/zen_settings.js" ></script>
Img
Iframe
<iframe src= "/12.html" frameborder= "0" ></iframe>
Embed
<embed src= "" type= ""/>
Object
<object data= "type=" "></object>
Param
<param name= "" value= ""/>
Map
<map name= "" ></map>
Area
<area shape= "coords=" "href=" "alt=" "/>"
Form
<form action= "" ></form>
Form:get
<form action= "" method= "get" ></form>
Form:post
<form action= "" method= "POST" ></form>
Label
<label for= "" ></label>
Input
<input type= ""/>
Input:hidden
<input type= "hidden" name= ""/>
Input:h
<input type= "hidden" name= ""/>
Input:text
<input type= "text" name= "id=" "/>
Input:t
<input type= "text" name= "id=" "/>
Input:search
<input type= "Search" name= "id=" "/>
Input:email
<input type= "Email" name= "id=" "/>
Input:url
<input type= "url" name= "id=" "/>
Input:p
<input type= "Password" name= "id=" "/>"
Input:date
<input type= "Date" name= "id=" "/>
Input:datetime
<input type= "datetime" Name= "id=" "/>
Input:month
<input type= "Month" name= "id=" "/>"
Input:week
<input type= "Week" name= "id=" "/>"
Input:time
<input type= "Time" name= "id=" "/>
Input:number
<input type= "number" name= "id=" "/>
Input:color
<input type= "Color" name= "id=" "/>
Input:checkbox
<input type= "checkbox" Name= "id=" "/>
Input:c
<input type= "checkbox" Name= "id=" "/>
Input:radio
<input type= "Radio" name= "id=" "/>"
Input:r
<input type= "Radio" name= "id=" "/>"
Input:f
<input type= "File" name= "id=" "/>
Input:s
<input type= "Submit" value= ""/>
Input:i
<input type= "image" src= "alt=" "/>
Input:reset
<input type= "reset" value= ""/>
Input:button
<input type= "button" value= ""/>
Input:b
<input type= "button" value= ""/>
Select
<select name= "id=" "></select>
Option
<option value= "" ></option>
TextArea
<textarea name= "id=" "cols=" rows= "ten" ></textarea>
Menu:c
<menu type= "Context" ></menu>
Bq
<blockquote></blockquote>
Caps
<caption></caption>
Optg
<optgroup></optgroup>
Opt
<option></option>
Fst
<fieldset></fieldset>
Leg
<legend></legend>
Sect
<section></section>
Tarea
<textarea></textarea>
Hdr
<!--expands-->
ol+
<ol>
<li></li>
</ol>
ul+
<ul>
<li></li>
</ul>
dl+
<dl>
<dt></dt>
<dd></dd>
</dl>
map+
<map name= "" ><area shape= "coords=" "href=" "alt=" "/></map>"
Table+
<table>
<tr>
<td></td>
</tr>
</table>
tr+
<tr>
<td></td>
</tr>
Select
<select name= "id=" "></select>
optgroup+
<optgroup><option value= "" ></option></optgroup>
optg+
<optgroup><option value= "" ></option></optgroup>
Empty
<empty></empty>
The common shortcut keys are modified to:
Wrap with Abbreviation:alt+x
Toggle comment:alt+1
Match Pair:alt+d
Go to Matching Pair:alt+s
Another reason for recommending Aptana Tools is as follows:
1. Shortcut key support is perfect.
For example, the more commonly used delete line: Ctrl + D;
Formatting: Ctrl + SHIFT + F;
Copy single-line: Ctrl + ALT + PageUp
Move Single-line: ALT + PageUp
2. JS hint is in the foreground can accept the tool inside is relatively strong, there is another feature, that is, with Firefox firebug combination, breakpoint tracking program execution process, real-time view variable value, is very good.
3. The most powerful reason to recommend now is to combine with Zen coding to make your work fast and swift.
It's bad:
1. Because of the strong tool, the need for a large amount of memory consumption, but at the price of hardware now, 2G of memory is basically acceptable.
2. Although the latest version of the 2.0.2 is a pure green version, but the installation must be installed before the Sun jdk, this thing more headaches, more configuration. The front desk staff must have looked at the foggy.
3. Built-in browsing is relatively slow, pure static page, why so complex, direct local browsing on OK.
Pay attention to copyright, reprint please indicate the source http://www.cnblogs.com/jikey/archive/2009/12/19/1628002.html.
