网页编程工具：EditPlus

字体：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>

#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