網頁編程工具：EditPlus

時間 2019-12-09

標籤網頁編程工具 editplus 欄目 HTML 简体版

原文原文鏈接

字體：Consolasjavascript

EditPlus，很土很簡單很強大的網頁編程工具css

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

http://www.cnblogs.com/pingjiang/archive/2012/05/17/efficient-code-editor-editplus.html 　　輕量級代碼編輯器Editplusvue

Zen Coding

Zen Coding是一個快速HTML/XML/XSL/CSS快速編碼的編輯器插件。經過一系列的縮寫和規範來快速的建立代碼。java

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

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

按Ctrl+E展開angularjs

自定義設置（自用）

文本——背景色：RGB：218,233,250　　#dae9fa編程

當前行——背景色：RGB：166，202，240　　#a6caf0bootstrap

行號——背景色：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

模板（自用）

一、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>