Emmet

点击阅读原文

Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具，使用前需要在编辑器中安装emmet插件

语法

说明	语法	缩写	生成代码（tab键）
后代	>	div>div>span	<div>   <div>     <span></span>       </div> </div>
兄弟	+	div+p+span	<div></div> <p></p> <span></span>
上级	^	div+div>p>span+em^strong	<div></div> <div>   <p>     <span></span>     <em></em>   <p>   <strong></strong> </div>
		div+div>p>span+em^^strong	<div></div> <div>   <p>     <span></span>     <em></em>   <p> </div> <strong></strong>
分组	()	div>(header>ul>li>a)+footer>p	<div>   <header>     <ul>       <li><a href=''></a></li>     </ul>   </header>   <footer></footer> </div>
		(div>dl>(dt+dd)*2)+footer>p	<div>   <dl>     <dt></dt>     <dd></dd>     <dt></dt>     <dd></dd>   </dl> </div> <footer>   <p></p> </footer>
乘法	*	ul>li*3	<ul>   <li></li>   <li></li>   <li></li> </ul>
自增	$	ul>li.item$*3	<ul>   <li class='item1'></li>   <li class='item2'></li>   <li class='item3'></li> </ul>
		h$[title=item$]{header$}*3	<h1 title="item1">header1</h1> <h2 title="item2">header2</h2> <h3 title="item3">header3</h3>
		ul>li.item$$$*3	<ul>   <li class="item001"></li>   <li class="item002"></li>   <li class="item003"></li> </ul>
		ul>li.item$@-*3	<ul>   <li class="item3"></li>   <li class="item2"></li>   <li class="item1"></li> </ul>
ID	#	div#header	<div id="header"></div>
类	.	div.header	<div class="header"></div>
		form#search.search	<form id="search" class="search"></form>
		p.class1.class2.class3	<p class="class1 class2 class3"></p>
自定义属性		p[title=’hello’]	<p title="hello"></p>
		td[rowspan=2 colspan=3 title]	<td rowspan="2" colspan="3" title=""></td>
文本	{}	a{文本}	<a href="">文本</a>
		p>{Click }+a{here}+{ to continue}	<p>Click <a href="">here</a> to continue</p>
隐式标签		.class	<div class="class"></div>
		ul>.class	<ul>   <li class="class"></li> </ul>
		table>.row>.col	<table>   <tr class="row">     <td class="col"></td>   </tr> </table>

html缩写

所有未知的缩写都会转换成标签，例如，foo → <foo></foo>

缩写	代码
a	<a href=""></a>
a:link	<a href="http://"></a>
a:mail	<a href="mailto:"></a>
abbr	<abbr title=""></abbr>
base	<base href="" />
bdo	<bdo dir=""></bdo>
bdo:r	<bdo dir="rtl"></bdo>
bdo:l	<bdo dir="ltr"></bdo>
link	<link rel="stylesheet" href="" />
link:css	<link rel="stylesheet" href="style.css" />
link:print	<link rel="stylesheet" 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:utf	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
meta:win	<meta http-equiv="Content-Type" content="text/html;charset=windows-1251" />
meta:vp	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
meta:compat	<meta http-equiv="X-UA-Compatible" content="IE=7" />
script:src	<script src=""></script>
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="" />
form	<form action=""></form>
form:get	<form action="" method="get"></form>
form:post	<form action="" method="post"></form>
input:hidden	<input type="hidden" name="" />
input:h	<input type="hidden" name="" />