When we do projects, we all write code, but the efficiency is not high. Is it better if the code function is automatically completed?
I. The Editplus function is automatically completed.
When you want to insert a DIV with a Class, you need to output a lot of code <div class = ""> <div>. Is there a faster way? Do you want to enter divc in an editor and the space will show <div class = ""> <div>, and the cursor will be displayed in, editplus has this function, but this predefined function needs to be written by yourself. It can be found on the Internet or by yourself. In: set-> parameters-> files-> Settings & syntax, select the auto-completion option for the corresponding language, and load the self-completed file, you can use the front-end selection folder after it is restarted (put the automatically completed file under the installation directory first ).
For example:
When you enter:
Html5 + Space
<! Doctype html>
<Html lang = "">
<Head>
<Meta charset = "UTF-8">
<Title> New Document </title>
</Head>
<Body>
Input: ltie7 + Space
Output:
<! -- [If lt IE 7]>
^!
<! [Endif] -->
Input: ul4 + Space
Output:
# T = ul4
<Ul>
<Li> ^! </Li>
<Li> </li>
<Li> </li>
<Li> </li>
</Ul>
It is very convenient. Here is the HTML that I use to automatically complete the file. You can also modify it yourself.
#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>#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/* ^!--------------------------------------------------*/
Ii. Zen Coding
Another way to improve code writing efficiency isZen Coding
For example:
CSS Abbreviations:
Div # page> div. logo + ul # navigation> li * 5>
HTML style applied to webpages:
<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>
For more information, visit the official website. Different editing tools have different codes and support many editors with powerful functions.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
