字体:Consolas

EditPlus,很土很简单很强大的网页编程工具

http://www.editplus.com/download.html   下载

http://www.cnblogs.com/pingjiang/archive/2012/05/17/efficient-code-editor-editplus.html   轻量级代码编辑器Editplus

Zen Coding

Zen Coding是一个快速HTML/XML/XSL/CSS快速编码的编辑器插件。通过一系列的缩写和规范来快速的创建代码。

http://www.cnblogs.com/pingjiang/archive/2012/05/17/editplus-zen-coding-tutorial.html   Editplus中Zen Coding手册  

div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer

按Ctrl+E展开

自定义设置(自用)

文本——背景色:RGB:218,233,250  #dae9fa

当前行——背景色:RGB:166,202,240  #a6caf0

行号——背景色:RGB:192,220,192    行号——文本颜色:RGB:0,128,0

标尺——背景色:RGB:192,220,192    标尺——文本颜色:RGB:0,0,128

文件——在保存文件时创建备份(此项取消)

Tools -> Preferences -> File -> Create backup file when saving (把此选项取消,就不会创建.bak文件了)

Tools -> Preferences -> (选html)Func Pattern里填写:  function[ \t]+[0-9a-zA-Z_]+[ \t]*\([ \t]*\)  -----这样就可以使用Ctrl+F11查看函数列表了。

Tools -> Preferences -> Tab/Indent 将Tab和Intent都改为4,勾选“Insert spaces instead of tab”(使用空格代替tab)----(这个我不用)

参考阅读:

http://www.pythoner.com/182.html   配置EditPlus支持Shell语法高亮和自动补全

http://zhidao.baidu.com/link?url=cq1ICBg8B-qtlIskr6KHKlQ3HcR-Hcl2w9Wkg5Vv_mcp8cuVfeKoIBocs438mdzv29hSSw_CIReTC3SrcTHzYK   EditPlus 编辑器如何自动补全

EditPlus颜色设置:

背景色:218,233,250            #dae9fa
当前行(ACTIVE):166,202,240       #a6caf0
行号:(背景色)192,220,192  #c0dcc0    (字的颜色)0,128,0  #008000
标尺:(背景色)192,220,192  #c0dcc0    (字的颜色)0,0,128  #000080

模板(自用)

1、template.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<link href="css.css" type="text/css" rel="stylesheet" />
<script src="http://cdn.bootcss.com/jquery/1.12.1/jquery.min.js"></script>
<link href="css.css" type="text/css" rel="stylesheet" />
<script src="http://cdn.bootcss.com/jquery/1.12.1/jquery.min.js"></script>
<!-- <script src="http://cdn.bootcss.com/jquery/jquery-2.2.1.min.js"></script> -->
<!-- <script src="http://cdn.bootcss.com/jquery/jquery-1.7.2.min.js"></script> -->
<!-- <script src="http://cdn.bootcss.com/jquery/jquery-1.8.3.min.js"></script> --> <!-- angular -->
<!-- <script src="http://code.angularjs.org/angular-1.1.0.min.js"></script> --> <!-- bootstrap -->
<!--
<link href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
-->
<script type="text/javascript">
$(function(){
$("input[type=button]").click(function(){ });
});
</script>
<style type="text/css"> </style>
^! </body>
</html>

自动补齐设置(自用):      C:\Users\cyx\AppData\Roaming\EditPlus 3\htmlbar.acp   2016-6-28

自动补齐的意思,就是按 <style ,再按空格,自动补齐代码:

<style type="text/css">

</style>

#TITLE=HTML
#CASE=n #T=<B
<strong>^!</strong>
#T=<em
<em>^!</em>
#T=<U
<u>^!</u>
#T=<H1
<h1>^!</h1>
#T=<H2
<h2>^!</h2>
#T=<H3
<h3>^!</h3>
#T=<H4
<h4>^!</h4>
#T=<H5
<h5>^!</h5>
#T=<H6
<h6>^!</h6>
#T=<P
<p>^!</p> #T=<A
<a href="">^!</a>
#T=<IMG
<img src="^!">
#T=<DIV
<div class="">
^!
</div>
#T=<SPAN
<span class="">^!</span>
#T=<PRE
<pre>^!</pre>
#T=<!
<!-- ^! -->
#T=<UL
<ul>
<li>^!</li>
<li></li>
</ul>
#T=<OL
<ol>
<li>^!</li>
<li></li>
</ol>
#T=<DL
<dl>
<dt></dt>
<dd>^!</dd>
</dl>
#T=<TABLE
<table>
<tr>
<td>^!</td>
<td></td>
</tr>
</table> #T=<FORM
<form method="post" action="">
^!
</form>
#T=<iframe
<iframe id="" width='100%' height='100%' frameborder='no' scrolling='auto' src='^!'></iframe>
#T=<SCRIPT
<script type="text/javascript">
<!--
^!
//-->
</script>
#T=<STYLE
<style type="text/css">
^!
</style> #T=<input
<input type="text" name="^!" value="">
#T=RADIO
<input type="radio" name="^!">
#T=CHECKBOX
<input type="checkbox" name="^!">
#T=TEXTAREA
<textarea name="80" rows="12" cols="">^!</textarea>
#T=RESET
<input type="reset">
#T=SUBMIT
<input type="submit">
#T=PASSWORD
<input type="password" name="^!">
#T=HIDDEN
<input type="hidden" name="^!">
#T=BUTTON
<input type="button" value="^!" onclick="">
#T=<SELECT
<select name="">
<option value="" selected>^!
<option value="">
</select> #T=OBJECT
<object id="%s" width="^!" height="" classid="clsid:%s">
</object> #T=<html
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="pragma" content="no-cache" />
<title></title>
<style type="text/css">
</style>
<!-- jquery库 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- bootstrap库 -->
<link href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function(){
$("#div1").click(function(){ });
});
</script>
</head>
<body> </body>
</html> #T=<vue
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="pragma" content="no-cache" />
<title></title>
<style type="text/css">
</style>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
<script language="JavaScript">
var vm = new Vue({
el:"#app1",
data:{
message:''
},
methods:{
},
watch:{
},
filter:{},
mounted:function(){
},
computed: {
},
components:{
}
});
</script>
</head>
<body> </body>
</html>

快捷键

以浏览器模式预览文件 Ctrl + B

开始编辑“以浏览器模式预览的文件” Ctrl + E

新建html文件 Ctrl+Shift+N

新建浏览器窗口 Ctrl+Shift+B

选中的字母切换为小写 Ctrl+L

选中的字母切换为大写 Ctrl+U

选中的词组首字母大写 Ctrl+Shift+U

复制选定文本并追加到剪贴板中 Ctrl+Shift+C

剪切选定文本并追加到剪贴板中 Ctrl+Shift+X

创建当前行的副本 Ctrl+J

复制上一行的一个字符到当前行 Ctrl+-

剪切选定文本并追加到剪贴板中 Ctrl+Shift+X

合并选定行 Ctrl+Shift+J  

反转选定文本的大小写 Ctrl+K

开始/结束选择区域 Alt+Shift+B

选择当前行 Ctrl+R

全屏模式开/关 Ctrl+K

显示或隐藏标尺 Alt+Shift+R

显示或隐藏制表符与空格 Alt+Shift+I

显示函数列表 Ctrl+F11

转到当前文档的指定行 Ctrl + G

设置或清除当前行的标记 F9

转到下一个标记位置 F4

转到上一个标记位置 Shift+F4

清除当前文档中的所有标记 Ctrl+Shift+F9

搜索一对匹配的括号 Ctrl+]  

搜索一对匹配的括号并选择该文本 Ctrl+Shift+]

切换当前文档的自动换行功能 Ctrl+Shift+W

编辑当前 HTML 页面的源文件 Ctrl+E

删除到当前行结束 Ctrl+Shift+Delete  

删除当前单词 Alt+Delete  

移除选中文本的HTML标签 Ctrl+Shift+P

启用或禁用代码折叠 Ctrl+Shift+F

调转光标两侧字符的位置 Ctrl+T

网页编程工具:EditPlus的更多相关文章

  1. 网页编程技术与实例 PDF扫描版

    本书主要包括:Web的概念,使用网页编辑工具制作网页,HTML语言的基本结构,JavaScrip和VBScript脚本语言的编程方法,ASP的概念,ASP对象的属性.方法和事件,SQL语言,数据库建议 ...

  2. 【转】高效Java编程工具集锦

    原文地址:http://geek.csdn.net/news/detail/57469 Java 开发者常常都会想办法如何更快地编写 Java 代码,让编程变得更加轻松.目前,市面上涌现出越来越多的高 ...

  3. FROONT – 超棒的可视化响应式网页设计工具

    FROONT 是一个基于 Web 的设计工具,在浏览器中运行,使得各类可视化设计的人员都能进行响应式的网页设计,即使是那些没有任何编码技能的设计师.FROONT 使得响应式网页设计能够可视化操作,能够 ...

  4. node.js基础模块http、网页分析工具cherrio实现爬虫

    node.js基础模块http.网页分析工具cherrio实现爬虫 一.前言      说是爬虫初探,其实并没有用到爬虫相关第三方类库,主要用了node.js基础模块http.网页分析工具cherri ...

  5. Brackets 1.8 开源+免费的Web前端网页文本编辑工具

    Brackets 1.8 开源+免费的Web网页文本编辑工具   -------------->> ---------------------- A modern, open source ...

  6. ROS(indigo) 用于机器人控制的图形化编程工具--code_it robot_blockly

    0 简介: 编程语言有汇编,高级语言,解释语言等,现在图形化编程也越来越流行.图形化编程简单易学.8年前,微软推出了VPL用于机器人程序设计,如Python和JavaScript都可以用图形化框图实现 ...

  7. 多功能网页刷新工具,刷pv工具

    多功能网页刷新工具,刷pv工具,在线刷流量,刷PV,刷UV小牛刷新助手功能介绍:1.设置多个刷新网页地址.2.设置刷新时间3.开始工作4.其他操作:老板键:打开时自动刷新:置系统托盘5.可手动输入地址 ...

  8. php语言基础语法与编程工具推荐

    php脚本语言,需要在服务器端执行,用浏览器返回HTML结果.在PHP中所有的语法都是如此,用户端是无法修改的,只有浏览权限. 一.php基础语法之输出方法 1.PHP中所有的脚本,可以放在文件中的任 ...

  9. Python编程工具pycharm的使用

    简介 俗话说工欲善其事必先利其器,所以对于程序员来说,使用python编程必须有一个强大的Python编程工具,这款工具就是pycharm. PyCharm是一种Python IDE,带有一整套可以帮 ...

随机推荐

  1. touchend偶尔不触发(待解决)

    新闻流,实现tab横向切换效果,出现偶尔切到一半,手指移开后,没有跳转到上一个或下一个tab,而是持续在当前切了一半的位置. 找到原因: 没有切换的时候,touchend都没有触发. 网上找到的解决办 ...

  2. SignalTap导致PCIe Read/Write卡死

    /********************************************************************** * SignalTap导致PCIe Read/Write ...

  3. ArcSDE账户频繁被锁定(Oracle显示12560协议适配器错误)

    最近遇到了一个比较奇葩的问题,启动系统的时候无法显示地图服务,查找原因时发现无法连接Oracle.出现以下错误: 之前遇到这种问题,通常是由于同时安装了64位和32位Oracle客户端,且二者的环境变 ...

  4. react hooks 笔记

    1. 建议安装以上版本: "dependencies": { "react": "^16.7.0-alpha.2", "react ...

  5. MySQL--Profiling和Trace使用

    使用MySQL Profiling ##=====================================## ## 查看PROFILING是否开启 SELECT @@profiling ## ...

  6. 依据Axis2官网的高速入门英文文档总结

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/ksdb0468473/article/details/29918027 首先在Eclipse中创建一 ...

  7. shell(3)拼写检查与词典操作

    1:Linux下,在/usr/share/dict下包含了词典文件,检查一个单词是否在词典里: #!/bin/bash #文件名:checkout.sh #检查给定的单词是否为词典中的单词 word= ...

  8. UBUNTU中使用pip安装,提示cannt import main问题

    在pip==8.1.1版本中,使用pip install Django==1.8.16时,提示 Traceback (most recent call last):  File "/usr/ ...

  9. PhpAdmin支持登录远程数据库服务器

    转载:http://www.cnblogs.com/andydao/p/4227312.html 该数据,百度搜不到,Google1分钟搞定 一.如何设置phpMyAdmin自动登录? 首先在根目录找 ...

  10. nginx配置http强制跳转https

    nginx配置http强制跳转https 网站添加了https证书后,当http方式访问网站时就会报404错误,所以需要做http到https的强制跳转设置. 一.采用nginx的rewrite方法 ...