vim自动补全符号配置详解
编辑 .vimrc文件
vim ~/.vimrc添加以下代码：
| 代码如下 | 复制代码 |
| function CompleteSymbol() inoremap ( ()<ESC>i inoremap [ []<ESC>i inoremap { {}<ESC>i inoremap < <><ESC>i inoremap " ""<ESC>i inoremap ' ''<ESC>i |
|
endfunction在函数下方调用：
| 代码如下 | 复制代码 |
| call CompleteSymbol() | |
补全符号后，光标在符号内。
PS：调用一定要在函数下方。
若复制的字符里也有以上符号，则会在复制后自动补全，这个是比较?宓模?挥屑觳馐欠褚丫?谷?耍?灰?龅椒?诺目?迹?突峤?胁谷??/p>
在网页制作中HTML中的使用图像是一个非常见的问题了，我们看到很多漂亮的图文结合的页面都是由html广西与图片组成的。
HTML文档中插入图像是web前端开发中常见，也是必要的应用方式。通过在页面中插入相应的图像，可以给浏览者带来良好的体验，也能够使页面内容更直观，更具有说服力。
本节主要讲述如何在HTML文档中使用img标签，并结合各种属性设置图片在HTML文档中的展现形式，以确保图像能够更好的服务于HTML页面。
HTML中使用图像的方法
HTML中需要插入图像的话，需要通过<img>标签进行定义。在<img>标签中通过设置src属性来指定该img标签需要加载图像的url地址。图像的url地址可以是绝对地址，也可以是相对地址。
注意img标签只能够添加属性，没有闭合标签。例如常见的img标签为：<img src=”xxx.jpg”/>
图像还可以通过css样式，以背景的形式加载到页面中。本节暂时不讲述如何通过css的背景调用显示图片，该内容将会在以后的css课程中进行讲解。
<img>标签的属性
alt属性 | alt属性可以在浏览器显示或无法载入图像时，显示一段预先设置好的文本来告诉浏览者，该图像原本显示的大致内容。这样可以在某些无法加载图片的情况下帮助用户了解原本这个图片的大致内容。例如现在常见的手机浏览器在3G模式下都会屏蔽网页图片，因此书写alt文本是非常必要的。alt标签内容还会影响seo搜索引擎对图片的识别，所以在书写alt时请填入与图片更相关的文字描述。
例子：<img alt=”这是一个对atl无法显示图像时的预留文本” />
显示结果：
height属性、width属性 | 可以强制定义图像的高度与宽度，并且图像会失去自身原有的高度与宽度，而通过拉伸的形式按照设定的高度与宽度进行显示。默认情况下，浏览器会自动获取图像文件原有的高宽。但是某些情况下，不指定图像的高度与宽度会影响浏览器的显示效率，因此最好为图像设定正确的高度值。
例子：<img alt=”1539455109-0″ src=”/wp-content/uploads/2013/09/1539455109-0.jpg” width=”100″ height=”100″ />
显示：
为图像设置链接
通过为图像设定链接，可以使整个图像成为锚点。在前端开发中，可以让用户更容易关注，并点击超链接。常见的应用为某些图形按钮，可以直接通过点击图像区域来进行页面跳转。
为图像设置连接的方法为，在<img>标签的外面套用一层<a>标签，a标签的锚点会被设置到图像上。
例子：<a title=”《前端开发从零学起》从基础到深入实战教程” href=”/front_tutorial”><img src=”/upload/news/201609/20131125065005394.jpg” width=”100″ height=”100″ /></a>
显示：
图像热区
HTML中可以为单个图像设定不同的热区，每个热区都可以指向不同的url地址。单独的热区可以通过坐标的或属性的形式设定热区的形状，用户在热区的范围内通过鼠标点击可以触发对应的跳转事件。
例如下面引用一个实例，热区设定到了对应的星球部分，通过点击不同的星球，会跳转到相应的星球大图页面中：
为图像设定热区的步骤为：
1.通过在<img>标签中设置usemap属性，并设定一个值，该值是用于热区编码识别是哪一个图片应用热区。例如：usemap=”#planetmap”
2.在页面中使用<map>标签定义热区编码，标签以<map>开始</map>结束。需要为map标签指定<img>的图片名称，例如：<map name=”planetmap” id=”planetmap”> 这样就与上面图片的id关联起来了。
3.使用<area>标签设定热区的形状shape、位置坐标coords、超链接href、超链接的打开方式target。由于定义热区的坐标比较复杂，而且在浏览器中反复测试坐标比较麻烦，建议使用dreameweaver的设计视图中的图像热区功能。
例：在dreameweave的设计视图中，点击页面中的图像，属性面板就会激活热区功能。
如图：
结语：HTML中使用图像是贯彻整个前端开发的核心应用。通过在HTML中设置不同的图像，来控制页面的UI显示，优化用户体验。通过对图像添加锚点，也可以更方便的引导用户来关注你站点的主要内容。
HTTP状态码是由web服务器返回回来的，下面小编来给大家收集了一些常用的HTTP状态码，如果你想了解可进入参考参考。
HTTP状态码，我都是现查现用。 我以前记得几个常用的状态码，比如200，302，304，404， 503。 一般来说我也只需要了解这些常用的状态码就可以了。 如果是做AJAX，REST,网络爬虫，机器人等程序。还是需要了解其他状态码。 本文我花了一个多月的时间把所有的状态码都总结了下，内容太多，看的时候麻烦耐心点了。
HTTP状态码的学习资料到处都有，但是都是理论上讲解。 本文介绍HTTP协议中的HTTP状态码（HTTP Status Code）， 会对大部分的状态码都进行了详细的实例讲解。
要了解状态码，应该在实例中去理解状态码的意义，否则看了也会忘记的。
http状态返回代码 代码 说明
100 （继续） 请求者应当继续提出请求。 服务器返回此代码表示已收到请求的第一部分，正在等待其余部分。
101 （切换协议） 请求者已要求服务器切换协议，服务器已确认并准备切换。
http状态返回代码 2xx （成功）
表示成功处理了请求的状态代码。
http状态返回代码 代码 说明
200 （成功） 服务器已成功处理了请求。 通常，这表示服务器提供了请求的网页。
201 （已创建） 请求成功并且服务器创建了新的资源。
202 （已接受） 服务器已接受请求，但尚未处理。
203 （非授权信息） 服务器已成功处理了请求，但返回的信息可能来自另一来源。
204 （无内容） 服务器成功处理了请求，但没有返回任何内容。
205 （重置内容） 服务器成功处理了请求，但没有返回任何内容。
206 （部分内容） 服务器成功处理了部分 GET 请求。
http状态返回代码 3xx （重定向）
表示要完成请求，需要进一步操作。 通常，这些状态代码用来重定向。
http状态返回代码 代码 说明
300 （多种选择） 针对请求，服务器可执行多种操作。 服务器可根据请求者 (user agent) 选择一项操作，或提供操作列表供请求者选择。
301 （永久移动） 请求的网页已永久移动到新位置。 服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。
302 （临时移动） 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。
303 （查看其他位置） 请求者应当对不同的位置使用单独的 GET 请求来检索响应时，服务器返回此代码。
304 （未修改） 自从上次请求后，请求的网页未修改过。 服务器返回此响应时，不会返回网页内容。
305 （使用代理） 请求者只能使用代理访问请求的网页。 如果服务器返回此响应，还表示请求者应使用代理。
307 （临时重定向） 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。
http状态返回代码 4xx（请求错误）
这些状态代码表示请求可能出错，妨碍了服务器的处理。
http状态返回代码 代码 说明
400 （错误请求） 服务器不理解请求的语法。
401 （未授权） 请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应。
403 （禁止） 服务器拒绝请求。
404 （未找到） 服务器找不到请求的网页。
405 （方法禁用） 禁用请求中指定的方法。
406 （不接受） 无法使用请求的内容特性响应请求的网页。
407 （需要代理授权） 此状态代码与 401（未授权）类似，但指定请求者应当授权使用代理。
408 （请求超时） 服务器等候请求时发生超时。
409 （冲突） 服务器在完成请求时发生冲突。 服务器必须在响应中包含有关冲突的信息。
410 （已删除） 如果请求的资源已永久删除，服务器就会返回此响应。
411 （需要有效长度） 服务器不接受不含有效内容长度标头字段的请求。
412 （未满足前提条件） 服务器未满足请求者在请求中设置的其中一个前提条件。
413 （请求实体过大） 服务器无法处理请求，因为请求实体过大，超出服务器的处理能力。
414 （请求的 URI 过长） 请求的 URI（通常为网址）过长，服务器无法处理。
415 （不支持的媒体类型） 请求的格式不受请求页面的支持。
416 （请求范围不符合要求） 如果页面无法提供请求的范围，则服务器会返回此状态代码。
417 （未满足期望值） 服务器未满足"期望"请求标头字段的要求。
http状态返回代码 5xx（服务器错误）
这些状态代码表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误，而不是请求出错。
http状态返回代码 代码 说明
500 （服务器内部错误） 服务器遇到错误，无法完成请求。
501 （尚未实施） 服务器不具备完成请求的功能。 例如，服务器无法识别请求方法时可能会返回此代码。
502 （错误网关） 服务器作为网关或代理，从上游服务器收到无效响应。
503 （服务不可用） 服务器目前无法使用（由于超载或停机维护）。 通常，这只是暂时状态。
504 （网关超时） 服务器作为网关或代理，但是没有及时从上游服务器收到请求。
505 （HTTP 版本不受支持） 服务器不支持请求中所用的 HTTP 协议版本。
一些常见的http状态返回代码为：
200 - 服务器成功返回网页
404 - 请求的网页不存在
503 - 服务不可用
因为要做一个带有会员系统功能，本人需要设置的是用户注册如果忘记密码就需要重设置密码了，那么要如何设计密码重设功能？怎么做才合理呢，下面我们一起来看看。
用户流程:
1.用户忘记密码，来到密码重设界面
2.用户输入Email地址，点击重设密码按钮
3.用户收到一封密码重设邮件，里面有重设密码的链接，此链接有过期时间
4.用户点击链接，来到密码重设页面，输入新密码，完成
这个流程并没有什么创新，很多网站都是用这套流程
后端实现方式:
1.当用户输入Email地址后，验证这个Email，如果存在于数据库，那么取得用户的user_id
2.将user_id和当前时间戳编码成HASH，需要提前准备好一个KEY，并且这个KEY只存在服务器上。 HASH = md5 ( user_id + timestamp + KEY )
3.生成一个URL，并且附带刚刚生成的HASH和用户id以及timestamp，比如 http://domain.com/reset-password.php?hash=HASH&user_id=123×tamp=1392121211
4.当用户访问这个URL, 检查HASH是否合法: HASH == MD5 ( user_id + timestamp + KEY)
5.检查 timestamp 是不是过期了
6.如果所有检查通过，那么显示一个新密码表单给用户
这种方式的好处:
1.不需要额外的数据表
2.不用担心参数被用户恶意修改，因为要检查hash是不是等于那几个参数的md5
3.密码重设URL自带时间戳
4.只要KEY设置的足够长足够复杂，那么可以认为HASH是绝对安全的
例
send-reset-email.php:
| 代码如下 | 复制代码 |
|
|
|
reset-password-form.php:
| 代码如下 | 复制代码 |
|
if ($hash == md5( $user_id . $timestamp . $KEY )) //validation passed if ($_POST['new_password']) <input type="submit" value="submit"> |
|
我现在在几个小项目中一直在使用Node.js。在Node系统中有一些很强大的工具。我最喜欢的一个例子就是Grunt。
Grunt是一种工具，允许您定义任务，然后通过命令运行他们，在命令行中运行：
| 代码如下 | 复制代码 |
| grunt watch |
|
这将启动一个watch任务，用来监控文件，我已经指定和运行指定的任务，只要这些文件变化了，就能监控到。在我的例子中，我已经在Grunt设置了只要当.js文件改变了就能检测JavaScript语法和压缩JavaScript和当.scss文件改变就能将Sass文件编译成CSS的任务。
这里介绍了如何设置。
安装Grunt
首先你需要先安装Grunt CLI，这是Grunt命令的接口。这将可以在命令行中使用Grunt命令：
| 代码如下 | 复制代码 |
| $ npm install -g grunt-cli |
|
注意：由于我们使用Grunt CLI，Grunt必须安装在每个项目的基础上。这允许您在不同的项目是运行不同版本的Grunt。如果您之前全局安装了Grunt，那么你应该先卸载它：
| 代码如下 | 复制代码 |
| $ npm uninstall -g grunt |
|
安装需要的依赖关系
接下来，您需要设置运行Grunt需要的所有依赖项。在这个例子中你需要grunt，grunt-contrib-jshint(检测js文件)，grunt-contrib-uglify（压缩js文件），grunt-contrib-sass(编译你的Sass)。安装这些依赖项目，你需要在你的项目中的根目录下设置一个package.json文件：
| 代码如下 | 复制代码 |
| { "name":"Grunt-Example", "description": "Example project to demonstrate Grunt.", "version":"0.1.0", "private": true, "author": { "name": "Blake Haswell", "email": "blake.haswell@simpleweb.com.au" }, "devDependencies": { "grunt": "~0.4.0", "grunt-contrib-sass": "*", "grunt-contrib-jshint": "*", "grunt-contrib-uglify": "*", "grunt-contrib-watch": "*" } } |
|
一旦你创建好了这个文件，你可以在你的项目目录下运行npm install命令安装所需要的依赖项：
| 代码如下 | 复制代码 |
| $ npm install |
|
设置Gruntfile.js
现在你需要创建一个"Gruntfile"。在这你可以定义你的任务。
首先在你的项目根目录下创建一个Gruntfile.js文件。创建Gruntfile真的很简单，我们只需要定义一个CommonJS模块。当需要改变我们的Grunt配置时，我们只需要修改这个模块。
| 代码如下 | 复制代码 |
| module.exports = function(grunt){ //Grunt配置写在这里 } |
|
接下来，设置你的第一个任务：JSHint。在Grunt中设置任务，需要运行grunt.initConfig()方法，并通过每个对象设置你的任务。例如，这里介绍了如何设置JSHint:
| 代码如下 | 复制代码 |
|
module.exports = function(grunt){ grunt.initConfig({ //JSHint (http://www.jshint.com/docs)
}); grunt.loadNpmTasks('grunt-contrib-jshint'); |
|
正如你看到的，你一个对象中包含了JSHint任务。JSHint是一个多任务，所以这意味着你可以定义多个JSHint任务。在这种情况下JSHint只有一个任务：all。JSHint的all任务指定文件被linted，以及这个选项也适用于lint。
还有，你有没有注意到在底部通过grunt.loadNpmTasks('grunt-contrib-jshint')调用任务。该方法可以从node_modules/中加载grunt-contrib-jshint任务，让它可以使用你的配置。
现在你可以很容易的lint你的JavaScript文件：
$ grunt jshint
很酷，不是吗？你甚至可以创建watch任务，监测JavaScript文件和自动lints文件——当文件失败后会提配你。
| 代码如下 | 复制代码 |
|
module.exports = function(grunt){ grunt.initConfig({ //JSHint (http://www.jshint.com/docs) //watch }); grunt.loadNpmTasks('grunt-contrib-jshint'); |
|
现在你执行grunt watch和开始修改你的JavaScript。你保存了你的文件并且lint失败后，将会通知你。在一个跨团队的开发执行编码的标准是一个伟大的方式，它节省时间捕捉觉错误。
Grunt不只是可以用于lint你的代码，你可快速设置任务压缩你的JavaScript：
| 代码如下 | 复制代码 |
|
module.exports = function(grunt){ grunt.initConfig({ //JSHint (http://www.jshint.com/docs) //Uglify //watch }); grunt.loadNpmTasks('grunt-contrib-jshint'); |
|
可以编译你的Sass:
| 代码如下 | 复制代码 |
|
module.exports = function(grunt){ grunt.initConfig({ //JSHint (http://www.jshint.com/docs) //Uglify //Sass //watch }); grunt.loadNpmTasks('grunt-contrib-jshint'); |
|
然后，你可以将任务添加到你的watch任务，将可以自动执行这些任务：
| 代码如下 | 复制代码 |
|
module.exports = function(grunt){ grunt.initConfig({ //JSHint (http://www.jshint.com/docs) //Uglify //Sass //watch }); grunt.loadNpmTasks('grunt-contrib-jshint'); |
|
现在，每次Sass文件修改保存后将会重新编译成CSS，每次JavaScript文件修保存后将会自动lint和压缩。
这样编码很爽吧，很开心吧！
相关文章
IntelliJ IDEA2021.1 配置大全(超详细教程)
这篇文章主要介绍了IntelliJ IDEA2021.1 配置大全(超详细教程),需要的朋友可以参考下...2021-04-18- VPN可以虚拟出一个专用网络，让远处的计算机和你相当于处在同一个局域网中，而中间的数据也可以实现加密传输，用处很大，特别是在一些大公司，分公司处在不同的区域。...2016-01-27
- 这篇文章主要介绍了Tomcat配置及如何在Eclipse中启动,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-02-04
- 如果我们需要安培Laravel4的话最php最低要求要在php5.3.7版本并且我们需要把mcrypt与openss这两个扩展开启才可以，具体步骤我们参考下文。 前面我们介绍我了 com...2016-11-25
- 这篇文章主要介绍了C# 中 “$” 符号的作用以及用法，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-06-25
详解Maven profile配置管理及激活profile的几种方式
这篇文章主要介绍了详解Maven profile配置管理及激活profile的几种方式,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-01-26- 这篇文章主要介绍了IDEA如何添加配置文件到classpath中,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-09-19
- 通常php.ini的位置在：复制代码 代码如下:/etc目录下或/usr/local/lib目录下。如果你还是找不到php.ini或者找到了php.ini修改后不生效(其实是没找对)，请使用如下办法：1.新建php文件，写入如下代码复制代码 代码如下:<?phpe...2014-05-31
- 以下就是部署PHP时的4个配置修改说明，大家一个一个进行学习研究。1、short_open_tag 是什么呢？ 决定是否允许使用代码开始标志的缩写形式（<? ?> ）。如果要和 XML 结合使用PHP，可以禁用此选项以便于嵌入使用<?x...2015-10-21
华为畅享20Pro配置怎么样?华为畅享20Pro参数配置分析
华为畅享20Pro配置怎么样?对于即将上市的华为畅享20 Pro手机，很多的网友们也是相当关注的，大家都想要知道这款华为畅享20 Pro手机的配置到底怎么样，赶紧看看吧...2020-06-29- 在使用vue-router的项目中,实例化VueRouter是其配置选项routes该选项指定路由与视图的组件的关系或者路由与其他路由的关系，Router配置选项中是其中最重要的配置。本文就详细的介绍一下...2021-10-25
详解element-ui 表单校验 Rules 配置 常用黑科技
这篇文章主要介绍了element-ui 表单校验 Rules 配置 常用黑科技，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-07-11tomcat9 下载安装和配置+整合到eclipse的教程详解
这篇文章主要介绍了tomcat9 下载安装和配置+整合到eclipse,本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-07-28- 这篇文章主要介绍了pytest配置文件pytest.ini的详细使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-04-17
- 今天研究了个开源项目，数据库是mysql的，其中的脚本数据需要备份，由于本人的机器时mac pro，而且mac下的数据库连接工具都不怎么好用，就想着如何利用windows下的数据库连接工具使用，并做相关备份，另外windows系统下的sqlyo...2015-10-21
- vue项目中有一些方法需要在多个页面调用,但为了避免在每个页面都import进来,可以把方法加到原型上去,这样在每个组件中都能使用了,下面这篇文章主要给大家介绍了关于配置vue全局方法的两种方式,需要的朋友可以参考下...2021-09-13
error LNK2019: 无法解析的外部符号 问题的解决办法
error LNK2019: 无法解析的外部符号 问题的解决办法，需要的朋友可以参考一下...2020-04-25- 这篇文章主要介绍了vue配置多代理服务接口地址操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-08
mysql(master/slave)主从复制原理及配置图文详解
这篇文章主要介绍了mysql(masterslave)主从复制原理及配置图文详解,以前脚本之家小编发过相关的内容，但这么好的非常少见特分享一下,需要的朋友可以参考下...2016-06-12- 这篇文章主要介绍了springboot中nacos动态路由的配置方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教...2021-09-11