Zen Coding使用及常用简写

使用方法:写好简写,按下tab键,自动补全,比如写下html再按tab键,将会出现"<html></html>"

html

<html></html>

html:xml

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru"></html>

html:4t

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ru">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<body>

</body>
</html>

html:4s

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ru">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<body>

</body>
</html>

html:xt

<!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="ru">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
</head>
<body>

</body>
</html>

html:xs

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
</head>
<body>

</body>
</html>

html:xxs

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
</head>
<body>

</body>
</html>

html:5

<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
<title></title>
<meta charset="UTF-8">
</head>
<body>

</body>
</html>

Document Metadata

head

<head></head>

title

<title></title>

base

<base href="">

link

<link>

link:css

<link rel="stylesheet" type="text/css" href="style.css" media="all">

link:print

<link rel="stylesheet" type="text/css" href="print.css" media="print">

link:favicon

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">

link:touch

<link rel="apple-touch-icon" href="favicon.png">

link:rss

<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml">

link:atom

<link rel="alternate" type="application/atom+xml" title="Atom" href="atom.xml">

meta

<meta>

meta:utf

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

meta:win

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

meta:compat

<meta http-equiv="X-UA-Compatible" content="IE=7">

style

<style type="text/css"></style>

Scripting

script

<script type="text/javascript"></script>

script:src

<script type="text/javascript" src=""></script>

noscript

<noscript></noscript>

Sections

body

<body></body>

section, sect

<section></section>

nav

<nav></nav>

article, art

<article></article>

aside

<aside></aside>

h1

<h1></h1>

h2

<h2></h2>

h3

<h3></h3>

h4

<h4></h4>

h5

<h5></h5>

h6

<h6></h6>

hgroup, hgr

<hgroup></hgroup>

header, hdr

<header></header>

footer, ftr

<footer></footer>

address, adr

<address></address>

div

<div></div>

Grouping Content

p

<p></p>

hr

<hr>

br

<br>

pre

<pre></pre>

dialog, dlg

<dialog></dialog>

blockquote, bq

<blockquote></blockquote>

ol

<ol></ol>

ol+

<ol>
<li></li>
</ol>

ul

<ul></ul>

ul+

<ul>
<li></li>
</ul>

li

<li></li>

dl

<dl></dl>

dl+

<dl>
<dt></dt>
<dd></dd>
</dl>

dt

<dt></dt>

dd

<dd></dd>

Text-level Semantics

a

<a href=""></a>

a:link

<a href="http://"></a>

a:mail

<a href="mailto:"></a>

q

<q></q>

cite

<cite></cite>

em

<em></em>

strong, str

<strong></strong>

small

<small></small>

mark

<mark></mark>

dfn

<dfn></dfn>

abbr

<abbr title=""></abbr>

acronym, acr

<acronym title=""></acronym>

time

<time></time>

progress, prog

<progress></progress>

meter

<meter></meter>

code

<code></code>

var

<var></var>

samp

<samp></samp>

kbd

<kbd></kbd>

sub

<sub></sub>

sup

<sup></sup>

span

<span></span>

i

<i></i>

b

<b></b>

bdo

<bdo dir=""></bdo>

bdo:r

<bdo dir="rtl"></bdo>

bdo:l

<bdo dir="ltr"></bdo>

ruby

<ruby></ruby>

rt

<rt></rt>

rp

<rp></rp>

Edits

ins

<ins></ins>

del

<del></del>

Embedded Content

figure, fig

<figure></figure>

img

<img src="" alt="">

iframe, ifr

<iframe src="" frameborder="0"></iframe>

embed, emb

<embed src="" type="">

object, obj

<object data="" type=""></object>

param

<param name="" value="">

video

<video src=""></video>

audio

<audio src=""></audio>

source, src

<source>

canvas

<canvas></canvas>

map

<map name=""></map>

map+

<map name="">
<area shape="" coords="" href="" alt="">
</map>

area

<area shape="" coords="" href="" alt="">

area:d

<area shape="default" href="" alt="">

area:c

<area shape="circle" coords="" href="" alt="">

area:r

<area shape="rect" coords="" href="" alt="">

area:p

<area shape="poly" coords="" href="" alt="">

Tabular Data

table

<table></table>

table+

<table>
<tr>
<td></td>
</tr>
</table>

caption, cap

<caption></caption>

colgroup, colg

<colgroup></colgroup>

colgroup+, colg+

<colgroup>
<col>
</colgroup>

col

<col>

tbody

<tbody></tbody>

thead

<thead></thead>

tfoot

<tfoot></tfoot>

tr

<tr></tr>

tr+

<tr>
<td></td>
</tr>

th

<th></th>

td

<td></td>

Forms

form

<form action=""></form>

form:get

<form action="" method="get"></form>

form:post

<form action="" method="post"></form>

fieldset, fset

<fieldset></fieldset>

legend, leg

<legend></legend>

label

<label for=""></label>

input

<input type="">

input:hidden, input:h

<input type="hidden" value="">

input:text, input:t

<input type="text" value="" id="">

input:search

<input type="search" value="" id="">

input:email

<input type="email" value="" id="">

input:url

<input type="url" value="" id="">

input:password, input:p

<input type="password" value="" id="">

input:datetime

<input type="datetime" value="" id="">

input:datetime-local

<input type="datetime-local" value="" id="">

input:date

<input type="date" value="" id="">

input:month

<input type="month" value="" id="">

input:week

<input type="week" value="" id="">

input:time

<input type="time" value="" id="">

input:number

<input type="number" value="" id="">

input:range

<input type="range" value="" id="">

input:color

<input type="color" value="" id="">

input:checkbox, input:c

<input type="checkbox" id="">

input:radio, input:r

<input type="radio" id="">

input:file, input:f

<input type="file" id="">

input:submit, input:s

<input type="submit" value="">

input:image, input:i

<input type="image" src="" alt="">

input:reset

<input type="reset" value="">

input:button, input:b

<input type="button" value="">

button, btn

<button></button>

select

<select id=""></select>

select+

<select id="">
<option value=""></option>
</select>

optgroup, optg

<optgroup></optgroup>

optgroup+, optg+

<optgroup>
<option></option>
</optgroup>

option, opt

<option></option>

Interactive Elements

datagrid, datag

<datagrid></datagrid>

datalist, datal

<datalist></datalist>

textarea, tarea

<textarea id="" cols="30" rows="10"></textarea>

keygen, kg

<keygen>

output, out

<output></output>

details, det

<details></details>

command, cmd

<command>

bb

<bb></bb>

menu

<menu></menu>

menu:context, menu:c

<menu type="context"></menu>

menu:toolbar, menu:t

<menu type="toolbar"></menu>

Conditional Comments

cc:ie

<!--[if IE]><![endif]-->

cc:noie

<!--[if !IE]><!--><!--<![endif]-->
以下为css

Special Rules

@import url(); @i
@media print { @m

}
@font-face { @f
font-family:;
src:url();
}
!important !
expression() exp

Properties Groups

Sorting Methods

  • Positioning
  • Box behavior and properties
  • Sizing
  • Color appearance
  • Special content types
  • Text
  • Visual properties
  • Print

Positioning

position:; pos
position:static; pos:s
position:absolute; pos:a
position:relative; pos:r
position:fixed; pos:f
top:; t
top:auto; t:a
right:; r
right:auto; r:a
bottom:; b
bottom:auto; b:a
left:; l
left:auto; l:a
z-index:; z
z-index:auto; z:a

Box behavior and properties

float:; fl
float:none; fl:n
float:left; fl:l
float:right; fl:r
clear:; cl
clear:none; cl:n
clear:left; cl:l
clear:right; cl:r
clear:both; cl:b
display:; d
display:none; d:n
display:block; d:b
display:inline; d:i
display:inline-block; d:ib
display:-moz-inline-box; d:mib
display:-moz-inline-stack; d:mis
display:list-item; d:li
display:run-in; d:ri
display:compact; d:cp
display:table; d:tb
display:inline-table; d:itb
display:table-caption; d:tbcp
display:table-column; d:tbcl
display:table-column-group; d:tbclg
display:table-header-group; d:tbhg
display:table-footer-group; d:tbfg
display:table-row; d:tbr
display:table-row-group; d:tbrg
display:table-cell; d:tbc
visibility:; v
visibility:visible; v:v
visibility:hidden; v:h
visibility:collapse; v:c
overflow:; ov
overflow:visible; ov:v
overflow:hidden; ov:h
overflow:scroll; ov:s
overflow:auto; ov:a
overflow-x:; ovx
overflow-x:visible; ovx:v
overflow-x:hidden; ovx:h
overflow-x:scroll; ovx:s
overflow-x:auto; ovx:a
overflow-y:; ovy
overflow-y:visible; ovy:v
overflow-y:hidden; ovy:h
overflow-y:scroll; ovy:s
overflow-y:auto; ovy:a
overflow-style:; ovs
overflow-style:auto; ovs:a
overflow-style:scrollbar; ovs:s
overflow-style:panner; ovs:p
overflow-style:move; ovs:m
overflow-style:marquee; ovs:mq
zoom:1; zoo
clip:; cp
clip:auto; cp:a
clip:rect(0 0 0 0); cp:r
box-sizing:; bxz
box-sizing:content-box; bxz:cb
box-sizing:border-box; bxz:bb
box-shadow:; bxsh
box-shadow:none; bxsh:n
box-shadow:0 0 0 #000; bxsh+
-webkit-box-shadow:; bxsh:w
-webkit-box-shadow:0 0 0 #000; bxsh:w+
-moz-box-shadow:; bxsh:m
-moz-box-shadow:0 0 0 0 #000; bxsh:m+

Sizing

margin:; m
margin:auto; m:a
margin:0; m:0
margin:0 0; m:2
margin:0 0 0; m:3
margin:0 0 0 0; m:4
margin-top:; mt
margin-top:auto; mt:a
margin-right:; mr
margin-right:auto; mr:a
margin-bottom:; mb
margin-bottom:auto; mb:a
margin-left:; ml
margin-left:auto; ml:a
padding:; p
padding:0; p:0
padding:0 0; p:2
padding:0 0 0; p:3
padding:0 0 0 0; p:4
padding-top:; pt
padding-right:; pr
padding-bottom:; pb
padding-left:; pl
width:; w
width:auto; w:a
height:; h
height:auto; h:a
max-width:; maw
max-width:none; maw:n
max-height:; mah
max-height:none; mah:n
min-width:; miw
min-height:; mih

Color appearance

outline:; o
outline:none; o:n
outline:1px solid #000; o+
outline-offset:; oo
outline-width:; ow
outline-style:; os
outline-color:#000; oc
outline-color:invert; oc:i
border:; bd
border:none; bd:n
border:1px solid #000; bd+
border-break:; bdbk
border-break:close; bdbk:c
border-collapse:; bdcl
border-collapse:collapse; bdcl:c
border-collapse:separate; bdcl:s
border-color:#000; bdc
border-image:; bdi
border-image:none; bdi:n
border-image:url() 0 repeat; bdi:+
-webkit-border-image:; bdi:w
-webkit-border-image:url() 0 repeat; bdi:w+
-moz-border-image:; bdi:m
-moz-border-image:url() 0 repeat; bdi:m+
border-top-image:; bdti
border-top-image:none; bdti:n
border-right-image:; bdri
border-right-image:none; bdri:n
border-bottom-image:; bdbi
border-bottom-image:none; bdbi:n
border-left-image:; bdli
border-left-image:none; bdli:n
border-corner-image:; bdci
border-corner-image:none; bdci:n
border-corner-image:continue; bdci:c
border-top-left-image:; bdtli
border-top-left-image:none; bdtli:n
border-top-left-image:continue; bdtli:c
border-top-right-image:; bdtri
border-top-right-image:none; bdtri:n
border-top-right-image:continue; bdtri:c
border-bottom-right-image:; bdbri
border-bottom-right-image:none; bdbri:n
border-bottom-right-image:continue; bdbri:c
border-bottom-left-image:; bdbli
border-bottom-left-image:none; bdbli:n
border-bottom-left-image:continue; bdbli:c
border-fit:; bdf
border-fit:clip; bdf:c
border-fit:repeat; bdf:r
border-fit:scale; bdf:sc
border-fit:stretch; bdf:st
border-fit:overwrite; bdf:ow
border-fit:overflow; bdf:of
border-fit:space; bdf:sp
border-length:; bdlt
border-length:auto; bdlt:a
border-spacing:; bdsp
border-style:; bds
border-style:none; bds:n
border-style:hidden; bds:h
border-style:dotted; bds:dt
border-style:dashed; bds:ds
border-style:solid; bds:s
border-style:double; bds:db
border-style:dot-dash; bds:dtds
border-style:dot-dot-dash; bds:dtdtds
border-style:wave; bds:w
border-style:groove; bds:g
border-style:ridge; bds:r
border-style:inset; bds:i
border-style:outset; bds:o
border-width:; bdw
border-top:; bdt
border-top:none; bdt:n
border-top:1px solid #000; bdt+
border-top-width:; bdtw
border-top-style:; bdts
border-top-style:none; bdts:n
border-top-color:#000; bdtc
border-right:; bdr
border-right:none; bdr:n
border-right:1px solid #000; bdr+
border-right-width:; bdrw
border-right-style:; bdrs
border-right-style:none; bdrs:n
border-right-color:#000; bdrc
border-bottom:; bdb
border-bottom:none; bdb:n
border-bottom:1px solid #000; bdb+
border-bottom-width:; bdbw
border-bottom-style:; bdbs
border-bottom-style:none; bdbs:n
border-bottom-color:#000; bdbc
border-left:; bdl
border-left:none; bdl:n
border-left:1px solid #000; bdl+
border-left-width:; bdlw
border-left-style:; bdls
border-left-style:none; bdls:n
border-left-color:#000; bdlc
border-radius:; bdrs
-webkit-border-radius:; bdrs:w
-moz-border-radius:; bdrs:m
border-top-right-radius:; bdtrrs
border-top-left-radius:; bdtlrs
border-bottom-right-radius:; bdbrrs
border-bottom-left-radius:; bdblrs
background:; bg
background:none; bg:n
background:#FFF url() 0 0 no-repeat; bg+
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘‘,sizingMethod=‘crop‘);bg:ie
background-color:#FFF; bgc
background-color:transparent; bgc:t
background-image:url(); bgi
background-image:none; bgi:n
background-repeat:; bgr
background-repeat:repeat; bgr:r
background-repeat:repeat-x; bgr:x
background-repeat:repeat-y; bgr:y
background-repeat:no-repeat; bgr:n
background-attachment:; bga
background-attachment:fixed; bga:f
background-attachment:scroll; bga:s
background-position:0 0; bgp
background-position-x:; bgpx
background-position-y:; bgpy
background-break:; bgbk
background-break:bounding-box; bgbk:bb
background-break:each-box; bgbk:eb
background-break:continuous; bgbk:c
background-clip:; bgcp
background-clip:border-box; bgcp:bb
background-clip:padding-box; bgcp:pb
background-clip:content-box; bgcp:cb
background-clip:no-clip; bgcp:nc
background-origin:; bgo
background-origin:padding-box; bgo:pb
background-origin:border-box; bgo:bb
background-origin:content-box; bgo:cb
background-size:; bgz
background-size:auto; bgz:a
background-size:contain; bgz:ct
background-size:cover; bgz:cv
color:#000; c

Special content types

table-layout:; tbl
table-layout:auto; tbl:a
table-layout:fixed; tbl:f
caption-side:; cps
caption-side:top; cps:t
caption-side:bottom; cps:b
empty-cells:; ec
empty-cells:show; ec:s
empty-cells:hide; ec:h
list-style:; lis
list-style:none; lis:n
list-style-position:; lisp
list-style-position:inside; lisp:i
list-style-position:outside; lisp:o
list-style-type:; list
list-style-type:none; list:n
list-style-type:disc; list:d
list-style-type:circle; list:c
list-style-type:square; list:s
list-style-type:decimal; list:dc
list-style-type:decimal-leading-zero; list:dclz
list-style-type:lower-roman; list:lr
list-style-type:upper-roman; list:ur
list-style-image:; lisi
list-style-image:none; lisi:n
quotes:; q
quotes:none; q:n
quotes:‘\00AB‘ ‘\00BB‘ ‘\201E‘ ‘\201C‘; q:ru
quotes:‘\201C‘ ‘\201D‘ ‘\2018‘ ‘\2019‘; q:en
content:; ct
content:normal; ct:n
content:open-quote; ct:oq
content:no-open-quote; ct:noq
content:close-quote; ct:cq
content:no-close-quote; ct:ncq
content:attr(); ct:a
content:counter(); ct:c
content:counters(); ct:cs
counter-increment:; coi
counter-reset:; cor

Text

vertical-align:; va
vertical-align:super; va:sup
vertical-align:top; va:t
vertical-align:text-top; va:tt
vertical-align:middle; va:m
vertical-align:baseline; va:bl
vertical-align:bottom; va:b
vertical-align:text-bottom; va:tb
vertical-align:sub; va:sub
text-align:; ta
text-align:left; ta:l
text-align:center; ta:c
text-align:right; ta:r
text-align:justify; ta:j
text-align-last:; tal
text-align-last:auto; tal:a
text-align-last:left; tal:l
text-align-last:center; tal:c
text-align-last:right; tal:r
text-decoration:; td
text-decoration:none; td:n
text-decoration:overline; td:o
text-decoration:line-through; td:l
text-decoration:underline; td:u
text-emphasis:; te
text-emphasis:none; te:n
text-emphasis:accent; te:ac
text-emphasis:dot; te:dt
text-emphasis:circle; te:c
text-emphasis:disc; te:ds
text-emphasis:before; te:b
text-emphasis:after; te:a
text-height:; th
text-height:auto; th:a
text-height:font-size; th:f
text-height:text-size; th:t
text-height:max-size; th:m
text-indent:; ti
text-indent:-9999px; ti:-
text-justify:; tj
text-justify:auto; tj:a
text-justify:inter-word; tj:iw
text-justify:inter-ideograph; tj:ii
text-justify:inter-cluster; tj:ic
text-justify:distribute; tj:d
text-justify:kashida; tj:k
text-justify:tibetan; tj:t
text-outline:; to
text-outline:none; to:n
text-outline:0 0 #000; to+
text-replace:; tr
text-replace:none; tr:n
text-transform:; tt
text-transform:none; tt:n
text-transform:uppercase; tt:u
text-transform:capitalize; tt:c
text-transform:lowercase; tt:l
text-wrap:; tw
text-wrap:normal; tw:n
text-wrap:none; tw:no
text-wrap:unrestricted; tw:u
text-wrap:suppress; tw:s
text-shadow:; tsh
text-shadow:none; tsh:n
text-shadow:0 0 0 #000; tsh+
line-height:; lh
white-space:; whs
white-space:normal; whs:n
white-space:pre; whs:p
white-space:nowrap; whs:nw
white-space:pre-wrap; whs:pw
white-space:pre-line; whs:pl
white-space-collapse:; whsc
white-space-collapse:normal; whsc:n
white-space-collapse:keep-all; whsc:k
white-space-collapse:loose; whsc:l
white-space-collapse:break-strict; whsc:bs
white-space-collapse:break-all; whsc:ba
word-break:; wob
word-break:normal; wob:n
word-break:keep-all; wob:k
word-break:loose; wob:l
word-break:break-strict; wob:bs
word-break:break-all; wob:ba
word-spacing:; wos
word-wrap:; wow
word-wrap:normal; wow:n
word-wrap:none; wow:no
word-wrap:unrestricted; wow:u
word-wrap:suppress; wow:s
letter-spacing:; lts
font:; f
font:1em Arial,sans-serif; f+
font-weight:; fw
font-weight:normal; fw:n
font-weight:bold; fw:b
font-weight:bolder; fw:br
font-weight:lighter; fw:lr
font-style:; fs
font-style:normal; fs:n
font-style:italic; fs:i
font-style:oblique; fs:o
font-variant:; fv
font-variant:normal; fv:n
font-variant:small-caps; fv:sc
font-size:; fz
font-size-adjust:; fza
font-size-adjust:none; fza:n
font-family:; ff
font-family:Georgia,‘Times New Roman‘,serif; ff:s
font-family:Helvetica,Arial,sans-serif; ff:ss
font-family:‘Monotype Corsiva‘,‘Comic Sans MS‘,cursive; ff:c
font-family:Capitals,Impact,fantasy; ff:f
font-family:Monaco,‘Courier New‘,monospace; ff:m
font-effect:; fef
font-effect:none; fef:n
font-effect:engrave; fef:eg
font-effect:emboss; fef:eb
font-effect:outline; fef:o
font-emphasize:; fem
font-emphasize-position:; femp
font-emphasize-position:before; femp:b
font-emphasize-position:after; femp:a
font-emphasize-style:; fems
font-emphasize-style:none; fems:n
font-emphasize-style:accent; fems:ac
font-emphasize-style:dot; fems:dt
font-emphasize-style:circle; fems:c
font-emphasize-style:disc; fems:ds
font-smooth:; fsm
font-smooth:auto; fsm:a
font-smooth:never; fsm:n
font-smooth:always; fsm:aw
font-stretch:; fst
font-stretch:normal; fst:n
font-stretch:ultra-condensed; fst:uc
font-stretch:extra-condensed; fst:ec
font-stretch:condensed; fst:c
font-stretch:semi-condensed; fst:sc
font-stretch:semi-expanded; fst:se
font-stretch:expanded; fst:e
font-stretch:extra-expanded; fst:ee
font-stretch:ultra-expanded; fst:ue

Visual properties

opacity:; op
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); op:ie
-ms-filter:‘progid:DXImageTransform.Microsoft.Alpha(Opacity=100)‘; op:ms
resize:; rz
resize:none; rz:n
resize:both; rz:b
resize:horizontal; rz:h
resize:vertical; rz:v
cursor:; cur
cursor:auto; cur:a
cursor:default; cur:d
cursor:crosshair; cur:c
cursor:hand; cur:ha
cursor:help; cur:he
cursor:move; cur:m
cursor:pointer; cur:p
cursor:text; cur:t

Print

page-break-before:; pgbb
page-break-before:auto; pgbb:a
page-break-before:always; pgbb:aw
page-break-before:left; pgbb:l
page-break-before:right; pgbb:r
page-break-inside:; pgbi
page-break-inside:auto; pgbi:a
page-break-inside:avoid; pgbi:av
page-break-after:; pgba
page-break-after:auto; pgba:a
page-break-after:always; pgba:aw
page-break-after:left; pgba:l
page-break-after:right; pgba:r
orphans:; orp
widows:; wid
时间: 2024-10-11 23:51:59

Zen Coding使用及常用简写的相关文章

Web前端快速编写代码神器HTML/CSS/JavaScript Emment(原名Zen coding)

Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,比如下面的演示: 去年年底,该插件已经改名为Emmet.但Emmet不只改名,还带来了一些新特性.本文就来直观地演示给你. 一.快速编写HTML代码 1.  初始化 HTML文档需要包含一些固定的标签,比如<html>.<head>.<body>等,现在你只需要1秒钟就可以输入这些标签.比如

结合Zen Coding快速编写HTML代码(sublime text2篇)

首先说下,如何在sublime text2加上zen coding插件 按 Ctrl+`(就是~这个键) 复制下面的代码 确认 重新启动sublime text2 import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp

zen coding和emmet的关系,zen coding 改名为了emmet

1.  如果你从事前端开发或者web开发的话,一定听说过Zen coding - 一种快速编写HTML/CSS代码的方法.它使用仿CSS选择器的语法来快速开发HTML和CSS - 由Sergey Chikuyonok开发. 现在它改名为了Emmet,并且搭建了一个新的网站:docs.emmet.io. 2. emacs中如何安装emmet呢? 跟安装php-mode一模一样. 去gitHub,直接下载emmet-mode.el文件就可以了,且安装方法里面都有的.

Zen Coding: 一种快速编写HTML/CSS代码的方法[Emmet]

译自:[Smashing Magazine](http://www.smashingmagazine.com/2009/11/21/zen-coding-a-new-way-to-write-html-code/)中文:[Zen Coding: 一种快速编写HTML/CSS代码的方法](http://www.qianduan.net/zen-coding-a-new-way-to-write-html-code.html) 请尊重版权,转载请注明来源! - - - - - - 在本文中我们将展示

Emmet/Zen Coding 快速入门说明

快速参考 以下是支持的特性: ele creates an HTML element tag 展开一个HTML元素标签 # creates an id attribute 作用于元素标签,展开一个id属性 . creates a class attribute 作用于元素标签,展开一个类属性,一个标签可以跟多个类属性,最终展开会一起呗加入class属性中 [] creates a custom attribute 作用于元素标签,展开一个HTML元素标签的属性,可以是任意非标准属性名称,写法同C

Zen Coding;sublime 3;html

1.了解Zen Coding: https://www.baidu.com/link?url=c9YyfvWOfn0EtUrhKlZQ26ANUOD_CSqjgqqsb3lq6LQ05oy2MQs4hWEYLVTlFgHhZKLmtMPTq1xsk6MyyKQKGYoxVE8pudSPKorJacGzTJy&wd=&eqid=ed8e37ab0006abb800000002593bf5c2 http://www.cnblogs.com/EnSnail/p/6294897.html 2.官方

TextMate中zen coding(emmet)的安装

很郁闷的是最近几年没怎么写过前端啊!公司给配置了iMAC 用不了我最爱的notepad++ 于是找到传说中的神器TM下载下来.纠结死人的zen coding却装不好.我这个愚蠢的人类 仍旧通过不懈的反复重试 多方查看,找到了正确安装方法. 我下载的是TM官网展示的最新版.默认的 包的 内容就这些玩意儿  ?? 下载好的emmet文件需要正确的放到如下目录里: 没有的文件夹都自己建立. ??  终于完成了. 自打潜心研究UI与插画后,前端东东都丢的不行不行了. 第一回用TM,还没汉语版本,捉急呀.

使用Emmet(前身Zen Coding)加速Web前端开发

这篇文章对Emmet使用说明比较详细,于是就收了~~~ 转载:Web前端开发-Web前端工程师 » 使用Emmet(前身Zen Coding)加速Web前端开发 Emmet插件以前被称作为Zen Coding,是一个文本编辑器的插件,它可以帮助您快速编写HTML和CSS代码,从而加速Web前端开发.早在2009年,Sergey Chikuyonok写过一篇文章,提出编写HTML和CSS的新方法.这一革命性的插件指的就是Zen Coding,经过很多开发者多年来的努力与帮助,现在已达到了一个新的水

Sublime Text2 安装 Emmet (Zen Coding)

一.添加所有插件之前先下载安装 “Package Control” 1.在线安装:Ctrl+`(Mac为Command+`)复制下面的代码--确认--重新启动Sublime Text 2 1 import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; url