自动完成代码，提高工作效率
做项目时，我们都是手写代码，但是这样效率不高，如果有自动完成代码功能是不是更好呢？
一：Editplus自动完成功能
当你要插入一个有Class的DIV时，你要输出很多代码<div class=""><div>，有没有更快的方法呢？你是否希望当你在某个编辑器里输入：divc然后空格就就出现 <div class=""><div>，而且光标就显示在“”里面，Editplus就有这样的功能，不过这种预定义功能需要自己写，一般网上可以找到，也可以自己写，在：设置-》参数-》文件-》设置&语法，然后再选择相应语言的自动完成选项，然后载入自己完成文件，前端选沟重新启动就可以使用了（先将自动完成文件放到安装目录下面）。
例如：
当你在HTML里面输入：
html5+空格
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<title>New Document</title>
</head>
<body>
输入：ltie7+空格
输出：
<!--[if lt IE 7]>
^!
<![endif]-->
输入：ul4+空格
输出：
#T=ul4
<ul>
<li>^!</li>
<li></li>
<li></li>
<li></li>
</ul>
很方便的，下面是我使用的HTML自动完成文件，你自己也可以修改。
#TITLE=HTML
; EditPlus Auto-completion file v1.0 written by Kingwell.
; This file is provided as a default auto-completion file for HTML
; Author : Kingwell
; Email : kingwell.leng#gmail.com
; Version : v1.2
; update : http://
#CASE=n
#T=ifie
<!--[if IE]>
^!
<![endif]-->
#T=ltie7
<!--[if lt IE 7]>
^!
<![endif]-->
#T=html5
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<title>New Document</title>
</head>
<body>
^!
</body>
</html>
#T=html1.0s
<!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" lang="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Document</title>
</head>
<body>
^!
</body>
</html>
#T=html1.0t
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Document</title>
</head>
<body>
^!
</body>
</html>
#T=html
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Document</title>
</head>
<body>
^!
</body>
</html>
#T=html4.01t
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>New Document</title>
</head>
<body>
^!
</body>
</html>
#T=html4.01s
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>New Document</title>
</head>
^!
<body>
</body>
</html>
#T=htmlm
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Document</title>
</head>
<body>
^!
</body>
</html>
#T=doctype
<!doctype html>
#T=doc
<!doctype html>
#T=script
<script type="text/javascript">
^!
</script>
#T=js
<script type="text/javascript">
^!
</script>
#T=script:src
<script type="text/javascript" src="^!"></script>
#T=style
<style type="text/css">
^!
</style>
#T=link
<link rel="stylesheet" type="text/css" href="^!">
#T=css
<style type="text/css">
^!
</style>
#T=zs
<!-- ^! -->
#T=zs5
<!----- ^! ----->
#T=zs10
<!---------- ^! ---------->
#T=h1
<h1>^!</h1>
#T=h1i
<h1 id="^!"></h1>
#T=h1c
<h1 class="^!"></h1>
#T=h1ic
<h1 id="^!" class=""></h1>
#T=h2
<h2>^!</h2>
#T=h2i
<h2 id="^!"></h2>
#T=h2c
<h2 class="^!"></h2>
#T=h1ic
<h2 id="^!" class=""></h2>
#T=h3
<h3>^!</h3>
#T=h3i
<h3 id="^!"></h3>
#T=h3c
<h3 class="^!"></h3>
#T=h3ic
<h3 id="^!" class=""></h3>
#T=h4
<h4>^!</h4>
#T=h4i
<h4 id="^!"></h4>
#T=h4c
<h4 class="^!"></h4>
#T=h4ic
<h4 id="^!" class=""></h4>
#T=h5
<h5>^!</h5>
#T=h5i
<h5 id="^!"></h5>
#T=h5c
<h5 class="^!"></h5>
#T=h5ic
<h5 id="^!" class=""></h5>
#T=h6
<h6>^!</h6>
#T=h6i
<h6 id="^!"></h6>
#T=h6c
<h6 class="^!"></h6>
#T=h6ic
<h6 id="^!" class=""></h6>
#T=**
/**************************************************/
^!
#T=ul
<ul>
<li>^!</li>
</ul>
#T=ul2
<ul>
<li>^!</li>
<li></li>
</ul>
#T=ul3
<ul>
<li>^!</li>
<li></li>
<li></li>
</ul>
#T=ul4
<ul>
<li>^!</li>
<li></li>
<li></li>
<li></li>
</ul>
#T=ul5
<ul>
<li>^!</li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
#T=ulia
<ul>
<li><a href="^!" title=""></a></li>
<li><a href="" title=""></a></li>
<li><a href="" title=""></a></li>
<li><a href="" title=""></a></li>
<li><a href="" title=""></a></li>
</ul>
#T=u#lia
<ul id="^!">
<li><a href="" title=""></a></li>
<li><a href="" title=""></a></li>
<li><a href="" title=""></a></li>
<li><a href="" title=""></a></li>
<li><a href="" title=""></a></li>
</ul>
#T=a
<a>^!</a>
#T=ab
<abbr>^!</abbr>
<acronym>
<address>
<applet>
<area>
<article>
<aside>
<audio>
<b>
<base>
<basefont>
<bdi>
<bdo>
<big>
<blockquote>
<body>
#T=br
<br />
^!
#T=button
<button>^!</button>
#T=canvas
<canvas id="^!"></canvas>
#T=
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<command>
<datalist>
<dd>
<del>
<details>
<dfn>
<dir>
#T=div
<div>^!</div>
#T=divi
<div id="^!"></div>
#T=divc
<div class="^!"></div>
#T=divic
<div id="^!" class=""></div>
#T=dl
<dl>
#T=dt
<dt>^!</dt>
#T=dd
<dd>^!</dd>
#T=em
<em>^!</em>
#T=embed
<embed>^!</embed>
#T=fieldset
<fieldset>
<legend>^!</legend>
</fieldset>
#T=fig
<figcaption>^!</figcaption>
#T=figcaption
<figcaption>^!</figcaption>
#=figure
<figure>
<figcaption>^!</figcaption>
</figure>
#T=font
<font>^!</font>
#T=footer
<footer>^!</footer>
#T=form
<form action="^!"></form>
#T=frame
<frame>^!</frame>
#T=frameset
<frameset>^!</frameset>
#T=head
<head>^!</head>
#T=header
<header>^!</header>
#T=hgroup
<hgroup>^!</hgroup>
#T=hr
<hr>^!</hr>
#T=i
<i>^!</i>
#T=iframe
<iframe>^!</iframe>
#T=if
<iframe>^!</iframe>
#T=img
<img src="^!" alt="" title="">
#T=image
<img src="^!" alt="" title="">
#T=input:file
<input type="file" name="^!"/>
#T=input:filec
<input type="file" class="^!" name=""/>
#T=input:filei
<input type="file" id="^!" name=""/>
#T=input:fileic
<input type="file" id="^!" class="" name=""/>
#T=input:checkbox
<input type="checkbox" name=""/>
#T=input:radio
<input type="radio" name=""/>
#T=input:text
<input type="text" name="" />
#T=input:textc
<input type="text" class="^!" />
#T=input:texti
<input type="text" id="^!" />
#T=input:textic
<input type="text" id="^!" class="" />
#T=input:submit
<input type="submit" name="^!"/>
#T=input:submitc
<input type="submit" class="^!" name=""/>
#T=input:submiti
<input type="submit" id="^!" name=""/>
#T=input:submitic
<input type="submit" id="^!" class="" name=""/>
#T=input:reset
<input type="reset" />
#T=input:password
<input type="password" name="^!" />
#T=input:passwordc
<input type="password" class="^!" name="" />
#T=input:passwordi
<input type="password" id="^!" class="" name="" />
#T=input:passwordic
<input type="password" id="^!" class="" name="" />
#T=input:button
<input type="button" name="^!"/>
#T=input:buttonc
<input type="button" class="^!" name=""/>
#T=input:buttoni
<input type="button" id="^!" name=""/>
#T=input:buttonic
<input type="button" id="^!" class="" name=""/>
#T=input:image
<input type="image" name="^!" />
#T=input:imagec
<input type="image" class="^!" name="" />
#T=input:imagei
<input type="image" id="^!" name="" />
#T=input:imageic
<input type="image" id="^!" class="" name="" />
#T=textarea
<textarea>^!</textarea>
#T=textareac
<textarea class="^!"></textarea>
#T=textareai
<textarea id="^!"></textarea>
#T=textareaic
<textarea id="^!" class=""></textarea>
#T=ins
<ins>
#T=keygen
<keygen name="^!"/>
<kbd>
#T=label
<label for="^!"></label>
#T=legend
<legend>^!</legend>
#T=li
<li>^!</li>
#T=map
<map>^!</map>
#T=mark
<mark>^!</mark>
#T=menu
<menu>^!</menu>
#T=meta
<meta ^!/>
#T=nav
<nav>^!</nav>
#T=navc
<nav class="^!"></nav>
#T=navi
<nav id="^!"></nav>
#T=navic
<nav id="^!" class=""></nav>
<noframes>
#T=noscript
<noscript>^!</noscript>
#T=object
<object>^!</object>
#T=ol
<ol>^!</ol>
#T=optgroup
<optgroup>^!</optgroup>
#T=option
<option>^!</option>
<output>
#T=p
<p>^!</p>
#T=pc
<p class="^!"></p>
#T=pi
<p id="^!"></p>
#T=pic
<p id="^!" class=""></p>
#T=parem
<param>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<s>
#T=samp
<samp>^!</samp>
<script>
#T=section
<section>^!</section>
#T=select
<select>
<option>^!</option>
</select>
#T=select2
<select>
<option>^!</option>
<option></option>
</select>
#T=select3
<select>
<option>^!</option>
<option></option>
<option></option>
</select>
#T=select4
<select>
<option>^!</option>
<option></option>
<option></option>
<option></option>
</select>
#T=select5
<select>
<option>^!</option>
<option></option>
<option></option>
<option></option>
<option></option>
</select>
#T=select10
<select>
<option>^!</option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
</select>
#T=small
<small>^!</small>
#T=source
<source>^!</source>
#T=span
<span>^!</span>
#T=spanc
<span class="^!"></span>
#T=spani
<span id="^!"></span>
#T=strike
<strike>^!</strike>
#T=strong
<strong>^!</strong>
#T=strongc
<strong class="c"></strong>
#T=strongi
<strong id="^!"></strong>
#T=sub
<sub>^!</sub>
#T=summary
<summary></summary>
#T=sup
<sup>^!</sup>
#T=table
<table>
<tr>
<td>^!</td>
</tr>
</table>
#T=tablec
<table class="^!">
<tr>
<td></td>
</tr>
</table>
#T=tablei
<table class="^!">
<tr>
<td></td>
</tr>
</table>
#T=tableic
<table id="^!" class="">
<tr>
<td></td>
</tr>
</table>
#T=tbody
<tbody>^!</tbody>
#T=td
<td>!</td>
#T=tfoot
<tfoot>^!</tfoot>
#T=th
<th>^!</th>
#T=thead
<thead>^!</thead>
#T=time
<time>^!</time>
#T=title
<title>^!</title>
#T=tr
<tr>^!</tr>
#T=u
<u>^!</u>
#T=ul
<ul>
<li>^!</li>
</ul>
#T=var
<var>^!</var>
#T=video
<video src="^!" controls="controls">
#T=wbr
<wbr>^!
#T=info
/*
-----CSS Docuemnt-----
Version: 1.0
Author: kingwell
Email: jinhua.leng@gmail.com
Date: 2012-5-16
*/
#T=reset
/* -----Copyright (c) 2012, KINGWELL Inc. All rights reserved. V1.2----- */
html,body{background:#FFF; color:#000; font: normal normal normal 12px/1 Arial, Helvetica, sans-serif; margin:0; padding:0}
a,abbr,acronym,address,applet,article,b,big,blockquote,button,canvas,caption,center,cite,code,dd,del,dfn,div,dl,dt,em,embed,fieldset,font,form,h1,h2,h3,h4,h5,h6,hr,html,nav,i,iframe,img,ins,input,kbd,label,legend,li,menu,object,ol,p,pre,q,s,samp,small,span,section,strike,strong,sub,sup,table,textarea,tbody,td,tfoot,th,thead,tr,tt,u,ul,var{margin:0;padding:0; font-size:100%}
table{border-collapse:collapse; border-spacing:0}
fieldset,img{border:none}
img{vertical-align:middle; outline:none}
q:before,q:after{content:''}p{margin:10px auto}
h1,h2,h3,h4,h5,h6{font-size:100%; font-weight:normal}
h1{font-size:18px;}h2{font-size:16px;}h3{font-size:14px;}h4{font-size:12px;}h5{font-size:10px;}
li{list-style:none}ol{padding-left:20px}ol li{list-style-type:decimal;}
sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}strong{font-weight:bold;}
input[type=submit],input[type=button],button,input[type=image]{cursor:pointer;}
input[type=text],input[type=password],textarea{border:1px solid #CCC; line-height:1}
input[type=text]:focus,input[type=password]:focus,textarea:focus,select:focus{background:#FFF9D9; border:1px solid orange; box-shadow:0 1px 2px #CCC inset}
input[type=radio],input[type=checkbox]{vertical-align:middle;}
a:link{color:#000;text-decoration:none;}
a:visited{text-decoration:none;color:#333;}
a:hover{text-decoration:underline; color:#00C;}
a:active{text-decoration:none;color:#333;}
.clear-float{clear:both;line-height:0;height:0;overflow:hidden}
.c-l{clear:left}.c-r{clear:right}
::selection{background:green; color:white;}
:after{clear:both; content:"."; display:block; visibility:hidden; height:0; line-height:0;}
/*--CSS Reset End--*/
^!
#T=de
/*--Default Style Start--*/
div.noscript{background:#FFF9D9; border:1px solid orange; box-shadow:5px 5px 5px rgba(0,0,0,0.5); position:absolute; width:500px; left:50%; margin-left:-250px; top:100px;}
.hr{border-top:1px solid #CCC; border-bottom:1px solid #FFF; margin:5px auto;}
.strong{font-weight:bold}.lighter{font-weight:lighter}
.color{color:#F00!important}
.shadow{background:white;box-shadow:0 0 2px #CCC}
.padding-10{padding:10}.margin-10{margin:10px;}
/*--Default Style End--*/
^!
#T=layout
/*--Layout Start--*/
#header{}
#header-content{}
#logo{}
#nav{}
#nav-content{}
#content{}
.left{float:left}.right{float:right;}.middle{}
#footer{}
#coypright{}
/*--Layout End--*/
#T=zs
/*-------------------- ^! --------------------*/
#T=zsb
/* ^!
--------------------------------------------------*/
二： Zen Coding
还有一自己提高写代码效率的方法就是Zen Coding
例如：
CSS缩写形式：
div#page>div.logo+ul#navigation>li*5>a
应用于网页HTML的样式：
<div id="page">
<div class="logo"></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>
相关资料可以到官方网站看看，不同编辑工具有不同代码，支持的编辑器很多，功能很强大。
