本来写这篇文章,我可以有很多废话,但是很多都过去了,言而总之下:我暂且给这个方法起个名字,叫做“为之法”,因为有了这篇文章,很多人的想法会豁然开朗,那样有了个名字交流传阅起来就方便多了。

本方法依托于editplus的自动完成,相信有一部分人还是玩过这个编辑器的,也知道里面有个叫做自动完成的东西,也许还正在使用呢,但是也有不知道的,可大家都是知道代码片段的,这个东西很好,ctrl+c,ctrl+v就可以了,很方便。现在有了这个editplus的自动完成,那个ctrl+c和ctrl+v应该是可以退休了。

好了,我们先说下用editplus来编写html。

大概在一年半前吧,突然在一个外国的网站上发现了zen coding这个好东西,那个时候支持的编辑器还不是很全,而这个notepad++轻量级的编辑器刚好支持,于是大漠写了notepad++结合Zen Coding快速编写HTML代码,而现在最新版的editplus已经内置了zen coding,也就是说如果你仅仅是notepad++用来编写html,那么可以考虑用editplus来替换了notedpad++了,因为editplus还能给你更大的功能-自动完成。(ps:notepad++在编写utf-8文件的时候会自动加上签名文档,也就是说它的utf-8的模式其实是utf-8 +BOM,这会引起问题的,不知道现在的最新版有没有去掉。),如果你需要经常编写html,到现在还不知道zen coding的话,那么可以先补习补习了。

好了,我们正式开始简单说下editplus里面自动完成的一些规则。

打开editplus的安装文件,会找到类似以acp结尾的文件,它就是传说中的自动完成文件,它让editplus可以扩展你自己的配置的自动完成文件。acp文件有四个规则,一个是以#TITLE开头的表示声明,如#TITLE=CSS就表示是css的自动完成文件,同理也可以定义html等文件的自动完成;第二个是以#T开头的表示简写,后面紧跟所表示的全部代码;第三个就是分号;代表注释;第四个是^!表示指针位置。下面以一小段html5的自动完成示例

#TITLE=HTML
; EditPlus HTML Auto-Complete File V1.0 - July 2012.
; Written By marvin, http://www.w3cplus.com
#T=#html
<!DOCTYPE html>
<html lang="en"> <head>
<title>^!</title>
<meta charset="UTF-8" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
</head> <body>
</body> </html>
# ; Head Elements. #T=#js
<script src="^!"></script>
#T=#css
<link rel="stylesheet" href="^!" />
#

上面就是从html5.acp中截取的一部分,上面说的四个规则在这里对应上。如果按照这个自动完成,我们如果需要输出<script src="^!"></script>那么只需要输入#js加上空格,就会出来这行,且光标在src的引号里面。当然这些简单的zen coding也许比这个更方便,我们可以用zen coding来完成啊,editplus的zen coding命令和notepad++一样,所以完全可以参考上面那篇notepad++结合zen coding。

现在才是我们editplus的王道,你可以利用自己以前归纳总结的知识来自定义你自己的自动完成,这才能体现自动完成的价值。下面我先从几个方面说下我最近悟出来的一点经验以供参考。

第一个应用是文档申明的时候区分浏览器,使用的是html4,对于不支持的css3的ie6-8都加上了no-css3这个class,对于ie6-7有了lte7,对于小于等于ie6的有lte6,且对每个版本有一个自己的class,以后再引入一个ie.css再根据各个浏览器来使用渐进增强。

#T=#html2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--[if !IE]><!--><html xmlns="http://www.w3.org/1999/xhtml"><!--<![endif]-->
<!--[if gte IE 9]><html class="ie9" xmlns="http://www.w3.org/1999/xhtml"><![endif]-->
<!--[if IE 8]><html class="ie8 no-css3" xmlns="http://www.w3.org/1999/xhtml"><![endif]-->
<!--[if IE 7]><html class="ie7 lte7 no-css3" xmlns="http://www.w3.org/1999/xhtml"><![endif]-->
<!--[if lte IE 6]><html class="ie6 lte6 no-css3" xmlns="http://www.w3.org/1999/xhtml"><![endif]-->

这样我html文件中直接输入#html2加空格就会出现我得这个文档申明,不用去ctrl+c,ctrl+v,也不用去到处找在哪里用过这个东西。

第二个是布局方面的应用,布局分为有无边栏,左边栏还是右边栏,下面以有左右边栏为例,layout表示布局,l表示左边栏,r表示右边栏

#T=#layoutlr
<div class="page aside-two">
<div class="wrap-header">
<div id="header" class="clearfix">
<div class="inner"></div>
</div>
</div><!--wrap-header-->
<div class="wrap-container">
<div id="container" class="clearfix">
<div id="aside_left" class="aside">
<div class="inner"></div>
</div><!--aside_left--> <div id="main">
<div class="inner"></div>
</div><!--main--> <div id="aside_right" class="aside">
<div class="inner"></div>
</div><!--aside_right-->
</div>
</div><!--wrap-container-->
<div class="wrap-footer">
<div id="footer" class="clearfix">
<div class="inner"></div>
</div>
</div><!--wrap-footer-->
</div>

同理我在html文件中输入#layoutlr加空格就会出现我需要的这个左右边栏的布局,无需寻拷贝复制

第三个是一些基本的结构方面的应用,如分页,选项卡,区块,新闻列表,图片列表,图文混排等,以用户头像列表为例

#T=#avatar
<ul class="clearfix inline-style user-avatar">
<li>
<a href="#">
<img alt="username" src="data:images/img50.jpg">
<strong></strong>
</a>
</li>
</ul>

既然是自定义的,肯定里面含有一些你经常用的东西,如这里的ul的class就是按照我的规则来定义的,图片的大小也是我自己的方式img50表示图片大小为50px*50px,strong里面放的是用户名,之所以只有一个li,是因为可以按照需求修改,以后的可以按照第一个拷贝。这里在html文件输入#avatar加空格就会得到下面这些代码片段。

第四个是对于form的表单元素的应用,曾经写过一个css解决方案,然后里面有个关于form表单元素的总结,于是在一段时间内我只是拷贝复制里面的需要的东西,然后有一天顿悟,拷贝复制都太浪费时间了,于是有了这个突破。下面以一个登录表单及一个input:text为例

#T=#flogin
<form method="post" action="#" class="form-horizontal" id="login_form">
<div class="form-item">
<label for="username">用户名:</label>
<div class="form-field"><input type="text" class="form-text" id="username" name="username"></div>
</div>
<div class="form-item">
<label for="pwd">密码:</label>
<div class="form-field"><input type="password" class="form-text" id="pwd" name="pwd"></div>
</div>
<div class="form-item item-no-label form-radio-checkbox-wrap">
<div class="form-field">
<label><input type="checkbox" name="" class="form-checkbox" value="1" checked="checked"><span>下次自动登录</span></label><a class="forget-pwd" href="#">忘记密码?</a> </div>
</div>
<div class="form-action">
<span class="submit-wrap greybtn"><input type="submit" class="submit-btn" value="提交"></span>
</div>
</form>
#T=#ftext
<div class="form-item">
<label for="username">用户名:</label>
<div class="form-field"><input type="text" class="form-text" id="username" name="username"></div>
</div>

第五个方面的应用是替换文字及图片方面的应用,以一段placeholder文字及图片为例(文字来自《劝学》),以p开头,sp表示短文本,生成图片的那个地址只需修改后面的两个数字(第一个为宽,第二个为高,400表示宽,200表示高)就可以得到你需要尺寸的图片,所以以后如果需要一些替换的图片,根本不需要你从psd里面去整一个下来,直接在这里输入地址就得到一个了

#T=#psp
<p>故不积跬步无以至千里</p>
^!
#T=#pimg
<img src="http://lorempixel.com/400/200/" alt="" />

当然还有一些其他零散的应用,你也可以挖掘出更多属于你自己的自动完成。html自动完成部分献丑到此,css部分继续

css方面第一个自动完成,那非基本属性莫属了,反正css基本属性就那么多。以一小部分属性为例

#T=bc
border:1px solid #ccc;^!
#T=fl
float:left;^!
#T=pre
position:relative;^!
#T=bg
background:url('../images/^!') no-repeat;

其实很长时间,我对editplus的自动完成理解仅限于此,就是这些简单的基本属性,是故我用editplus差不多两年,其中有大概一年多就是会使用这些简单的属性自动完成,更谈不上上面那些html的一些了,所以以前用editplus仅仅是用来写css的,所幸在我最苦闷无解的时候神给我开启了那扇虚掩的门,于是有了下面这些css扩展方面的自动完成及上面的html方面的自动完成。

第二个方面当然非兼容莫属了,以简单常用的几个为例

#T=frd
float:right;
display:inline;^!
#T=minh
min-height:^!px;
height:auto !important;
height:^!px;
#T=dib
display:inline-block;*display:inline;*zoom:1;^!

在css文件中输入frd就会出现兼容ie6双倍margin的display:inline,还有最小高度及inline-block等

第三个方面那就是我们伟大的css3了,这么轰轰烈烈的css3最令人愤怒的莫过于对于各个浏览器的前缀问题了。以transition及transform为例

#T=transition
-webkit-transition:^!;
-moz-transition:^!
-ms-transition:^!
-o-transition:^!
transition:^!
#T=transform
-webkit-transform:^!;
-moz-transform:^!
-ms-transform:^!
-o-transform:^!
transform:^!
#T=scale
-webkit-transform:scale(^!);
-moz-transform:
-ms-transform:
-o-transform:
transform:
#T=rotate
-webkit-transform:rotate(^!);
-moz-transform:^!
-ms-transform:^!
-o-transform:^!
transform:^!

这样各个浏览器的兼容都有了吧,放心大胆的使用吧,还不用担心少了某个浏览器

第四个方面的应用就轮到我们的代码片段了,如我们常用的reset,我们可以定义下来,然后直接输入reset加空格就可以搞定了,无需找寻拷贝,就这么简单。除了reset我们还可以根据前面html东西,先预定义css,如分页,选项卡,按钮,form,图文混排等等,以前面html的用户列表为例

#T=avatar
/* user img list user'avatar */
.user-avatar img{
width:50px;
height:50px;
padding:2px;
background-color:#fff;
border:1px solid #ccc;
vertical-align:middle;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
}
.user-avatar li{
width:56px;
}
.user-avatar a{
display:block;
float:left;
width:56px;
}
.user-avatar a strong{
display:block;
width:56px;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
height: 20px;
line-height:20px;
font-weight:normal;
}

第五个方面的应用可以定义我们的学习参考资料,以r开头表示reference,以本站的css3学习资料为例

#T=rcss3
http://www.w3cplus.com/resources/css3-tutorial-and-case

至此,html&css两个自动完成相互辉映,浑然一体,大功告成。

当然既然是自定义的自动完成,对于每个人来说,都有自己的使用习惯及一些代码结构,所以绝不仅限于此,小弟在此抛砖引玉,希望有更多高含金量的可以建议分享下。

ps:建议初学者及功力不足者勿用,一定的量变才能完成质变。不然根正不足,易走火入魔。

editplus来编写html的更多相关文章

  1. 解决EditPlus在设置了UTF-8之后,编写的HTML页面仍出现汉字乱码问题

    解决EditPlus在设置了UTF-8之后.编写的HTML页面仍出现汉字乱码问题   相信有些同学在使用EditPlus编写HTML页面时发现,尽管已经设置好了UTF-8的编码格式.但却发现HTML页 ...

  2. 让editplus支持sql编辑

    摘自: http://www.cnblogs.com/yeminglong/archive/2011/10/15/2212991.html 让editplus支持sql编辑 时比较喜欢用editplu ...

  3. 《2---关于JDBC编程过程中驱动配置问题》

    说明:我在Editplus中编写了一个简单的JDBC程序,用来测试是否和数据库连接正确.读者如有其它疑问,可以留言交流. [1]程序如下: import java.sql.*; public clas ...

  4. JS 学习笔记--3--数据类型

    1.typeof 操作符 用来获取变量或者字面量的类型,也可以typeof(x);但是typeof并非内置函 数,而是一个操作符变量2.JS 一共6种类型 Undefined/Null/Boolean ...

  5. Delphi开发OCX详细步骤总结

     首先要弄明白你要写的OCX是用在客户端还是用在服务器端    假如用在客户端: 1.创建  打开delphi 7,选择菜单"new"->"other"- ...

  6. 【转】软件开发工具介绍之 6.Web开发工具

    [本文转自http://www.cnblogs.com/dusonchen/archive/2011/02/09/1739087.html ] 1.EditPlus 无论是编写xhtml页面,还是cs ...

  7. Java体系基本概念

    JVM:Java虚拟机 JRE:(Java Runtime Environment)Java程序允许,测试,传输应用程序的环境和平台 包括 jvm ,java 核心类库和支持的文件,但不包含开发工具J ...

  8. WEB入门一 网页设计基础

    本章简介 在当今社会,网页是网络信息共享和发布的主要形式.而HTML (Hyper Text Mark-up Language),即超文本标记语言,是创建网页基础.本章将学习HTML文档的基本结构.组 ...

  9. Java-JDK:JDK百科

    ylbtech-Java-JDK:JDK百科 JDK是 Java 语言的软件开发工具包,主要用于移动设备.嵌入式设备上的java应用程序.JDK是整个java开发的核心,它包含了JAVA的运行环境(J ...

随机推荐

  1. Tomcat架构解析(四)-----Coyote、HTTP、AJP、HTTP2等协议

    Connector是Tomcat中非常重要的一个组成部分,说白了,就是如何从客户端获取到相应的请求信息.这部分主要包括的难点有这样几个部分: 1.客户端与服务端的协议 客户端与服务端的协议是多种多样的 ...

  2. sizeof新用法(c++11)

    1.概念 1)sizeof是关键字,也是运算符,用来求对象占用空间的大小,返回字节数 2)c++11允许使用作用域运算符(::)来获取类中成员的大小,以前只允许先创建一个类的对象,通过类对象访问成员得 ...

  3. XMind使用教程

    使用XMind,可以轻松创建.管理及控制思维导图.1. 启动XMind,选择一个空白模板或模板创建:2. 单击中心主题,输入文字即可对中心主题重命名:3. 使用键盘Enter键创建主要/同级主题,使用 ...

  4. MongoDB-增删改

    MongoDB的shell使用了Js引擎,因此能运行任意的Js程序. MongoDB中常用基本数据类型: null:空值或者不存在的字段Boolean:true,false数值型:{"x&q ...

  5. 开发.Net Script 模板-MyGeneration (翻译)

    原文信息 原文地址 原文作者信息 Justin Greenwood MyGeneration Software http://www.mygenerationsoftware.com/ October ...

  6. kepware http接口 nodejs开发

    读取某变量的值(native var http = require("http"); var options = { "method": "GET&q ...

  7. [转]Windows中使用命令行方式编译打包Android项目

    http://my.oschina.net/liux/blog/37875 网上很多用Ant来编译打包Android应用的文章,毕竟Ant是纯Java语言编写的,具有很好的跨平台性.今天想写个纯win ...

  8. ace富文本编辑器

    在线文本编辑器(ACE Editor) ACE是一个实现了语法着色功能的基于Web的代码编辑器,具有良好的代码提示功能和大量的主题. 一.资源获取 官方网址:https://ace.c9.io/ Gi ...

  9. kafka eagel的使用

    sql语句eq: select * from "ke_test_topic" where "partition" in (0,1,2) limit 100 官网 ...

  10. iOS 项目国际化(多语言支持)

    按下图步骤创建好后使用如下代码即可实现国际化:self.infoLB.text = NSLocalizedString("key", comment: "") ...