HTML5+CSS3+JavaScript
关注
分享
扫一扫
拾光未名
用代码将梦想照亮现实
展开
-
前端性能优化——个人搜集总结
供自己深思熟虑~ 1. 查询Cache：读取Cache 或者发送304请求——浏览器预处理查询DNS：减少DNS查找，DNS缓存 浏览器DNS缓存 计算机DNS缓存 服务器DNS缓存（TTL） 使用Keep-Alive特性 减少DNS查找 当客户端的DNS缓存为空时，DNS查找的数量与Web页面中唯一主机名的数量相等。减少唯一主机名的数量就可以减少DNS查找的数量。较少的域名来减少DNS查转载 2017-02-16 12:54:04 · 218 阅读 · 0 评论 -
CSS hack写法 收集版
Web前端不知何时能够抛弃IE6-IE7的兼容呢？ 做项目时遇到一些不兼容IE6/7/8/9/10的事情应该如何来解决呢？ 在网上搜索了一些css hack方法让自己熟记一下“*”，兼容IE6/IE7“+”，兼容IE7“-“，兼容IE6“important”，兼容IE6以上版本以及现代浏览器“\9”，兼容所有IE版本，不支持现代浏览器“\0”，兼容IE8,IE9,IE10版本“\9转载 2017-02-15 09:24:22 · 341 阅读 · 0 评论 -
浏览器渲染页面过程
1. 用户输入网址（假设是个 HTML 页面，第一次访问，无缓存情况），浏览器向服务器发出HTTP请求，服务器返回 HTML 文件； （善用缓存，减少HTTP请求，减轻服务器压力） 2. 浏览器载入 HTML 代码，发现 <head> 内有一个 <link> 引用外部 CSS 文件,则浏览器立即发送CSS文件请求，获取浏览器返回的CSS文件； （CSS文件合并，减少HTTP请求转载 2017-02-15 12:54:06 · 1990 阅读 · 0 评论 -
Web访问原理-从输入URL到页面加载完成的过程中都发生了什么事情？
1.浏览器查询缓存，如果缓存存在跳到第9步。2.浏览器询问操作系统服务器的IP地址。3.操作系统做DNS查询，返回IP地址给浏览器。4.浏览器打开对服务器的TCP连接（如果是HTTPS协议的话会更复杂）。5.浏览器通过TCP连接发送HTTP请求。6.浏览器接收HTTP响应并且可能关掉TCP连接，或者是重新使用连接处理新请求。7.浏览器检查HTTP响应是否为一个重定向（3xx 结果状态码 ），一个验证转载 2017-02-15 12:55:19 · 303 阅读 · 0 评论 -
页面布局对SEO的影响
SEO主要就是通过对网站的结构，标签，排版等各方面的优化，使Google等搜索引擎更容易搜索网站的内容，并且让网站的各个网页在GOOGLE等搜索引擎中获得较高的评分，从而获得较好的排名。代码精简 使用DIV+CSS布局，页面代码精简，这一点相信对XHTML有所了解的都知道。代码精简所带来的直接好处有两点：一是提高spider爬行效率，能在最短的时间内爬完整个页面，这样对收录质量有一定好处;二是由于转载 2017-02-16 11:07:16 · 372 阅读 · 0 评论 -
input标签内发生变化进行监听
onchange事件与onpropertychange事件的区别： onchange事件在内容改变（两次内容有可能相等）且失去焦点时触发；onpropertychange事件是实时触发，每增加或删除一个字符就会触发，通过js改变也会触发该事件，但是该事件是IE专有。oninput事件与onpropertychange事件的区别： oninput事件是IE之外的大多数浏览器支持的事件，在valu原创 2017-03-03 17:28:22 · 859 阅读 · 0 评论 -
SVN安装步骤
服务端安装：一直傻瓜式操作，只有一个会请选择安装到的盘符所在地址自己修改盘符后install，就安装好服务端了；客户端安装： 然后就就是普通软件安装位置了。一直安装就好了。【会需要同意协议】，软件都有的。最后当右键鼠标的时候出现一个小乌龟就安装成功啦~原创 2017-03-04 00:50:02 · 467 阅读 · 0 评论 -
Sublime Text 3 快捷键精华版
Ctrl+Shift+P：打开命令面板 Ctrl+P：搜索项目中的文件 Ctrl+G：跳转到第几行 Ctrl+W：关闭当前打开文件 Ctrl+Shift+W：关闭所有打开文件 Ctrl+Shift+V：粘贴并格式化 Ctrl+D：选择单词，重复可增加选择下一个相同的单词 Ctrl+L：选择行，重复可依次增加选择下一行 Ctrl+Shift+L：选择多行 Ctrl+Shift+Ent原创 2017-03-09 01:35:05 · 501 阅读 · 0 评论 -
雅虎十四条：网站前端网页优化的14条原则
1、减少HTTP请求次数据统计，有80%的最终用户响应时间是花在前端程序上，而其大部分时间则花在各种页面元素，如图像、样式表、脚本和Flash等的下载上，减少页面元素将会减少HTTP请求次数，这是快速显示页面的关键所在。 一种减少页面元素个数的方法是简化页面设计，但是否存在其他方式，能做到既有丰富内容，又能获得快速响应时间呢？以下是这样一些技术： Image maps组合多个图片到一张图片中，总转载 2017-03-16 13:06:32 · 794 阅读 · 0 评论 -
JS获取字符串实际长度(包含汉字)的简单方法
1:1计算document.getElementById('xx').innerHTML.lengthdocument.getElementById('xx').value.length汉字2：英文1var font_num= {};font_num.get_length = function(str) { //获得字符串实际长度，中文2，英文1 //要获得长度的字符串 var re转载 2018-02-24 14:55:18 · 14195 阅读 · 0 评论 -
设置<hr/>颜色
说到颜色变化，大家首先想到的都是color,但是color一般都是针对字体颜色的，线条需要用background-color,但是单纯的将背景色设为蓝色是不够的，线条还是灰色的，我们需要给线条一个高度，也就是我们需要的1px这样设置完后，在浏览器中可以看到线条变粗了，而且原来的灰色好像还是存在的其实，hr是有默认的border的，我们需要将它的边框去掉，设为border:none<div style原创 2017-02-22 21:57:24 · 990 阅读 · 0 评论 -
阻止浏览器默认事件，禁止鼠标默认事件
<img src="logo.gif" width=88 height=31 ondragstart="return false;" >oncontextmenu=”return false;” //禁止鼠标右键ondragstart=”return false;” //禁止鼠标拖动onselectstart=”return false;”//文字禁止鼠标选中onselect=”document.原创 2017-02-21 20:49:00 · 4350 阅读 · 0 评论 -
em的使用
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单原创 2017-02-20 17:09:58 · 361 阅读 · 0 评论 -
margin详解垂直外边距合并
Margin 的特性 margin 始终是透明的。 margin 通过使用单独的属性，可以对上、右、下、左的外边距进行设置。即：margin-top、margin-right、margin-bottom、margin-left。也可以使用简写的外边距属性同时改变所有的外边距：margin: top right bottom left;(eg:margin:10px 20px 30px 40px)原创 2017-02-16 13:03:48 · 462 阅读 · 0 评论 -
各版本浏览器_兼容性处理_01
兼容办法区别IE6与FF： background:orange;*background:blue; 区别IE6与IE7： background:green !important;background:blue; 区别IE7与FF： background:orange; *background:green; 区别FF，IE7，IE6： background:orange;*backg原创 2017-02-16 13:07:12 · 221 阅读 · 0 评论 -
IE6/7/8/CSS/BUG以及兼容问题解决方法
ie6,ie7,ie8 css bug汇总以及兼容解决方法1：li边距“无故”增加 任何事情都是有原因的，li边距也不例外。 先描述一下具体状况：有些时候li边距会突然增 加很多，值也不固定（只在IE6/IE7有这种现象），让人摸不着头脑，仔细“研究”发现是由于其低级元素ul的padding引 起，padding的上下值对li有影响，左右无影 响。所以只好笨手笨脚地把padding去掉，换成原创 2017-02-16 13:09:32 · 1621 阅读 · 0 评论 -
HTML5全局属性
1、当标签设置属性——contentEditable时，该元素就可以被修改，目前并没有相应的API支持保存之后修改后的文字2、除了contentEditable之外，元素还具有一个isContentEditable属性，当属性可编辑时，该属性值为true，当元素不可编辑时，该属性为false；3、designMode属性用来指定整个页面是否可编辑，当页面可编辑时，页面中任何支持contentEdit原创 2017-02-16 13:12:28 · 537 阅读 · 0 评论 -
HTML5表单及其他新增和改良元素
1、表单内元素的form属性 在H4中，表单的从属元素必须书写在表单的内部，而在H5中，可以把它们书写在页面的任何地方，然后为该元素指定一个form属性，属性值为该表单的id 上述代码中，input被写在form表单中，不用再为它指定form属性，textarea元素被书写在form表单之外，但它从属于form表单，所以将form表单的id指定给textarea元素的form属性。2、表单内元素原创 2017-02-16 13:16:53 · 344 阅读 · 0 评论 -
前端开发规范——个人总结版
随着前端的需求增多，前端开发者也相继的增加，码农多的是，现在很多不管是线上还是线下的培训机构都招收了大量的学员，什么热门教什么，但是出去的程序猿到公司之后表现并不是很好，并且又一些部分程序猿到了那里过了没多久就有因为很多原因而被辞。我们有的时候可以想一想，思考一下自身需要提高一些哪些技能；对于程序猿本身来说，就是想求得一份高薪的工作。当然了，应届生或者毕业不久的人来说，薪资不是特别高，需要熬一段时间原创 2017-02-16 13:27:40 · 418 阅读 · 0 评论 -
CSS3选择器/伪类的那些事~
article h2：后代选择器：选择指定祖先元素内的后代元素article > h2：子元素选择器：选择指定父元素内的直接子元素h2~p 选择器是一个普通兄弟选择器，查询h2元素后面的拥有共同父元素的兄弟元素p。因此若p元素要被选择，必须跟在h2元素后面。h2 + p 子元素选择器 选择第一个元素后紧跟的元素,两者拥有相同的父元素a[href*=”login”]表示a元素的href值为logina原创 2017-02-19 19:08:47 · 692 阅读 · 0 评论 -
HH8001: 在 Firefox 中注释内容中如果包含 '-' 字符在某些情况下会使该注释解析错误
标准参考注释元素（Comment Element）的作用是，注释一行或多行 HTML 代码，在注释标签内的文本不被显示，但对通过查看页面源码的方式还是可见的。注释标签的标准写法如下：// 单行注释<!-- this is a comment -->// 多行注释<!-- and so is this one, which occupies more than one line -->另转载 2017-02-11 10:31:02 · 270 阅读 · 0 评论 -
HR9001: 各浏览器对于字符编码别名支持的宽泛程度存在差异
标准参考根据 HTML4.01 规范中的描述，服务端应该提供给用户端文档的字符编码（character encoding）信息，最直接的方式为通过 HTTP 协议（[RFC2616], 3.4 及 14.17） "Content-Type" 头字段的 "charset" 将文档的字符编码告诉用户端。例如以下 HTTP 头声明了字符编码为 ISO-8859-1：Content-Type: text/转载 2017-02-11 10:34:11 · 491 阅读 · 0 评论 -
MarkDown语法如是
正文：1、标题的几种写法：第一种： 前面带#号，后面带文字，分别表示h1-h6,上图可以看出，只到h6，而且h1下面会有一条横线，注意，#号后面有空格第二种： 这种方式好像只能表示一级和二级标题，而且=和-的数量没有限制，只要大于一个就行第三种： 这里的标题支持h1-h6，为了减少篇幅，我就偷个懒，只写前面二个，这个比较好理解，相当于标签闭合，注意，标题与#号要有空格那既然3转载 2017-02-20 15:18:46 · 476 阅读 · 0 评论 -
IE6/7下inline-block解决方法
IE6/IE7下对display:inline-block的支持性不好。 1、inline元素的display属性设置为inline-block时，所有的浏览器都支持； 2、block元素的display属性设置为inline-block时，IE6/IE7浏览器是不支持的； 对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行，允许空格。（准确地说，应用原创 2017-02-20 16:47:22 · 708 阅读 · 0 评论 -
vue axios请求 取消上一个页面所有请求 批量取消请求
SPA时代经常会遇到当前页面未加载完毕时跳转路由或者返回操作, 但是通过network会发现, 若网络环境较差的情况下, 会一直pending, 切换路由后在network中添加新的请求但是正在pending的请求依然存在. 当我们在项目中做了一个上拉加载分页的时候会一直加载中, 用户等待不耐烦后可能会主动触发返回操作, 但是此刻即使用户触发返回操作, 加载分页的请求还是存在, 页面还是会一直提示...原创 2018-09-06 09:59:47 · 12244 阅读 · 10 评论