字体：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[ ]+[0-9a-zA-Z_]+[ ]*([ ]*) -----这样就可以使用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:UserscyxAppDataRoamingEditPlus 3htmlbar.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