editplus来编写html

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

本方法依托于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的更多相关文章

解决EditPlus在设置了UTF-8之后，编写的HTML页面仍出现汉字乱码问题
解决EditPlus在设置了UTF-8之后.编写的HTML页面仍出现汉字乱码问题相信有些同学在使用EditPlus编写HTML页面时发现,尽管已经设置好了UTF-8的编码格式.但却发现HTML页 ...
让editplus支持sql编辑
摘自: http://www.cnblogs.com/yeminglong/archive/2011/10/15/2212991.html 让editplus支持sql编辑时比较喜欢用editplu ...
《2---关于JDBC编程过程中驱动配置问题》
说明:我在Editplus中编写了一个简单的JDBC程序,用来测试是否和数据库连接正确.读者如有其它疑问,可以留言交流. [1]程序如下: import java.sql.*; public clas ...
JS 学习笔记--3--数据类型
1.typeof 操作符用来获取变量或者字面量的类型,也可以typeof(x);但是typeof并非内置函数,而是一个操作符变量2.JS 一共6种类型 Undefined/Null/Boolean ...
Delphi开发OCX详细步骤总结
首先要弄明白你要写的OCX是用在客户端还是用在服务器端假如用在客户端: 1.创建打开delphi 7,选择菜单"new"->"other"- ...
【转】软件开发工具介绍之 6.Web开发工具
[本文转自http://www.cnblogs.com/dusonchen/archive/2011/02/09/1739087.html ] 1.EditPlus 无论是编写xhtml页面,还是cs ...
Java体系基本概念
JVM:Java虚拟机 JRE:(Java Runtime Environment)Java程序允许,测试,传输应用程序的环境和平台包括 jvm ,java 核心类库和支持的文件,但不包含开发工具J ...
WEB入门一网页设计基础
本章简介在当今社会,网页是网络信息共享和发布的主要形式.而HTML (Hyper Text Mark-up Language),即超文本标记语言,是创建网页基础.本章将学习HTML文档的基本结构.组 ...
Java-JDK：JDK百科
ylbtech-Java-JDK:JDK百科 JDK是 Java 语言的软件开发工具包,主要用于移动设备.嵌入式设备上的java应用程序.JDK是整个java开发的核心,它包含了JAVA的运行环境(J ...

随机推荐

poj-3177（并查集+双联通分量+Tarjan算法）
题目链接:传送门思路: 题目要将使每一对草场之间都有至少两条相互分离的路径,所以转化为(一个有桥的连通图至少加几条边才能变为双联通图?) 先求出所有的桥的个数,同时将不同区块收缩成一个点(利用并查集 ...
(14)Why some people find exercise harder than others
https://www.ted.com/talks/emily_balcetis_why_some_people_find_exercise_harder_than_others/transcript ...
从模板驱动文件ins生成cls文件
在当前目录下,启动cmd程序,输入以下指令: latex acmart.ins
（转）忘记wamp-mysql数据库root用户密码重置方法
转自:http://www.jb51.net/article/28883.htm 1.打开任务管理器,结束进程 mysqld-nt.exe . 2.运行命令窗口 1)进行php服务管理器安装目录中的 ...
GIS数据下载
WorldTile.hdf wuhan.hdf ... openstreetmap GIS空间数据库分割存储. 检索效率有没有提高? 云地理服务:旅游,遥感数据处理,气温,地质,房价,人口,生活(商 ...
（动态规划）matrix -- hdu -- 5569
http://acm.hdu.edu.cn/showproblem.php?pid=5569 matrix Time Limit: 6000/3000 MS (Java/Others) Memo ...
引用数据类型（Scanner类、Random类）
Scanner类 Scanner类是引用数据类型的一种,我们可以使用该类来完成用户键盘录入,获取到录入的数据. 引用数据类型的使用与定义基本数据类型变量不同,引用数据类型的变量定义及赋值有一个相对固 ...
PAT甲级 1121. Damn Single (25)
1121. Damn Single (25) 时间限制 300 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue "Dam ...
request.getScheme() 使用方法
今天在看代码时,发现程序使用了 request.getScheme() .不明白是什么意思,查了一下.结果整理如下: 1.request.getScheme() 返回当前链接使用的协议:一般应用返回h ...
sdut 3916
这道题就是二分枚举加贪心,小蓝书上一开始就讲的,但是我给忘了,很难受 #include <iostream> #include <cstdio> #include <cs ...

editplus来编写html

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

随机推荐

热门专题