- 博客(98)
- 资源 (2)
- 收藏
- 关注
RSS订阅转载 HTTP协议
原文链接：http://caibaojian.com/http.htmlvia超文本传输协议（HTTP，HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议。所有的WWW文件都必须遵守这个标准。设计HTTP最初的目的是为了提供一种发布和接收html页面的方法。1960年美国人Ted Nelson构思了一种通过计算机处理文本信息的方法，并称之为超文
2016-12-09 17:23:25
373
原创 git命令提示簿
1、 git与svnSVN或者CVS是集中式的版本控制系统，各终端通过网络从中央服务器下载并将内容更新回中央服务器；Git是分布式版本控制系统，各终端均存放最新版本的，通过中间电脑建立共享。2、 安装git不同的操作系统有不同的安装包，Windows下，为了绕开复杂的环境配置，直接安装msysgit，只需要下载一个单独的exe安装程序，安装完成后，在开始菜单里找到“Git”->“G
2016-10-14 20:13:47
352
转载 网页设计中对于图片格式与设计关系的详解
为什么想整理这方面的类容，我觉得就像油画家要了解他的颜料和画布、雕塑家要了解他的石材一样，作为网页设计师也应该对图片格式的特性有一定了解，这样才能更好的表达你的创意和想法。 除此之外，我们在平时工作中也会遇到许多与图片格式相关的问题。比如设计师会奇怪为什么有些页面的产出物总是没法达到设计稿那样的品质和效果，什么样的设计才更适合Web页面;页面重构师和前端工程师则想知道在切图的时候应采用什么图
2016-10-12 11:19:51
1355
原创 为什么移动端更需要前端优化
根据移动网络数据传输的特点：在移动设备取得加载网站所需的资源之前，设备必须同网络建立无线通道。换言之，在设备同无线基站（包括信号塔等）通讯，询问何时能传输数据后，网络运营商首先要将数据从无线基站传输到自己的内部网络，然后再传递到公网。这个过程会消耗数秒时间，严重拖慢页面加载速度。延迟和带宽是影响速度的主要因素，延迟是指数据从A传输到B的耗时，带宽是指通信通道的最大吞吐量。此外，移动设备在连接w
2016-10-08 16:31:05
343
原创 浏览器渲染流程
服务器向浏览器发送回文件之后，浏览器逐行下载、解析并行进行，遇到内联资源时，判断是否是阻塞资源，阻塞资源需要停止一切，等待解析完阻塞资源后接着逐行解析源文件，非阻塞资源可以并行进行。css资源下载完成后和前面下载的css资源一起，重新定义一遍页面的样式，所以css文件一般写在最前面。
2016-10-08 16:06:17
247
原创 js中正则表达式的应用
str = ' [李白 2016-01-20,5:30-20:30] [王白 2016-01-20,5:30-20:31] [金白 2016-01-20,5:30-20:32] [王白 2016-01-20,5:30-20:33] [李白 2016-01-20,5:30-20:34] [金白 2016-01-20,5:30-20:35] [金白 2016-01-20,5:30-20:36] [赵白
2016-09-23 17:47:56
316
原创 用js处理打卡记录excel表
首张图片是待处理的excel表，文章最后是处理结果，如果您是要这种效果，中间内容不妨看一下。不需要数据库，不需要服务，只要一个excel一个谷歌浏览器，搞定这些。因为js没有上传excel表的功能，我们简单处理下excel表，把内容粘贴出来，把一切作为字符串来处理。首先，处理下excel表中的数据，每一行行首和行尾，用英文中括号‘[]’括起来，如下，很简单，加两列，用公式计算一下第一行
2016-09-23 17:05:41
1407
转载 JS中给正则表达式加变量
JS中给正则表达式加变量前不久同事询问我js里面怎么给正则中添加变量的问题，遂写篇博客记录下。 一、字面量其实当我们定义一个字符串，一个数组，一个对象等等的时候，我们习惯用字面量来定义，例如:var s = "string";var a = [1,2];var o = {}; 如果需要加入变量，那也是十分简单的事情，比如:
2016-09-21 13:54:39
720
转载 前端优化:DNS预解析提升页面速度
在网页体验中我们常会遇到这种情况，即在调用百度联盟、谷歌联盟以及当前网页所在域名外的域名文件时会遇到请求延时非常严重的情况。那么有没有方法去解决这种请求严重延时的现象呢？一般来说这种延时的原因不会是对方网站带宽或者负载的原因，那么到底是什么导致了这种情况呢。湛蓝试着进行推测，假设是DNS的问题，因为DNS解析速度很可能是造成资源延时的最大原因。于是湛蓝在页面header中添加了以下代码（用
2016-07-25 16:16:05
965
原创 事件
事件：文档或浏览器窗口中发生的一些特定交互瞬间，IE9、Firefox、Opera、Safari和Chrome全都已经实现了“dom2级事件”核心模块的支持，ie8是最后一个使用其专有事件系统的主要浏览器，此外BOM也支持一些事件。事件流：单击某个元素的同时，也单击了它的容器元素，也单击了整个页面，事件流描述从页面中接受事件的顺序，“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于
2016-07-18 20:14:29
315
转载 Firebug 和 Chrome 自带的开发人员工具相比起来有哪些优缺点?
作者：依云链接：http://www.zhihu.com/question/19601006/answer/18713336来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。我发现 Firefox 上能做到但是 Chrome 不知道要怎么实现的功能：1. CSS / XPath 匹配测试（FireFinder 插件）；2. 显示实际连接的 I
2016-07-12 13:17:17
5288
原创 JS对象
理解对象一、定义对象定义对象有两种方法，一种是new关键字后跟Object构造函数：var person = new Object();person.name = "LiLei";person.age = 20; 另一种是对象字面量表示法：var person = { name: "LiLei", age:20
2016-06-20 19:38:12
260
转载 幽灵空格
以下内容来自：http://www.jb51.net/css/100638.html试过1和3，ok解决方案1: font-size:0; 最好的方法是在外层元素上设置font-size:0;同时在内层元素上指定字体具体的大小。 复制代码代码如下:ul.inline-block-list { /* 比如 ul 或者 ol元素 */ font-si
2016-06-02 20:54:11
394
原创 Request和Response
Request 对象 - request对象表示 HTTP 请求，包含了请求查询字符串，参数，内容，HTTP头部等属性。常见属性有：1. req.app：当callback为外部文件时，用req.app访问express的实例2. req.baseUrl：获取路由当前安装的URL路径3. req.body /req.cookies：获得「请求主
2016-06-02 20:44:16
291
原创 npm命令总结
npm help：查看所有命令；npm help ：查看某条命令的详细帮助，el：npm help install；在package.json所在目录下npm install . -g：先在本地安装当前命令行程序，可用于发布前的本地测试；npm update ：把当前目录下node_modules子目录里边的对应模块更新至最新版本；npm update -g：可
2016-06-02 20:42:32
436
原创 Ajax
Ajax的优势与不足优点：1、 不需要插件的支持，浏览器允许js就能使用jquery2、 优秀的用户体验：能在不刷新整个页面的前提下更新数据3、 提高web的性能：传统模是中，数据提交通过Form表单，数据获取通过页面刷新，Ajax模式通过XMLHttpRequest对象向服务器端提交希望提交的数据，按需发送4、 减轻服务器和带宽的负担：Ajax的工作原理是在服务器和用
2016-05-02 15:01:18
262
原创 动画
4.1 show()和hide()从上到下增加（减少）高度，从左到右增加（减少）宽度，不透明度逐渐增加（减少）元素hide()之前会记住原先display属性值，当调用show()方法时，会根据原先的display属性值来显示。show(毫秒数**)：以**毫秒显示show(slow)=show(600),show(normal)=show(400),show(fast)=s
2016-05-02 15:00:44
234
原创 事件
3.1 加载DOM1、 加载时机Window.onload：网页中所有元素（包括元素的所有关联文件）完全加载到浏览器后才能执行；$(document).ready()：DOM完全就绪后就可调用；Jquery的加载方式会更快的初始化页面上更多的元素，但是不等所有文件都加载完就执行$(document).ready()方法可能会导致页面的错乱，这时改用$(***).load(f
2016-05-02 15:00:12
254
原创 选择器
选择器cssjquery解释基本选择器*通配选择器*{}$("*")所有元素E元素选择器p{}$("p")所有p标签#idID选择器#hd{}$("#hd")
2016-05-02 14:59:28
239
原创 DOM
1.1 查找节点1、 查找元素节点就是应用各种选择器抓取节点2、 查找属性节点使用上一步抓取到的元素的attr(‘属性名’)方法，获取节点的属性值。很多时候，在标签中加一个data-**的属性，用jquery获取属性时就可以直接用.data抓取，如下：div class="abc"data-class="abc"data-id="qq"id="qq">div>
2016-05-02 14:58:57
216
原创 选择器
使用选择器的原则，一定要准，要精确，尽量不用别的，都用classname。像 .bd .slider这种，要直接写成.slider 选择器cssjquery解释基本选择器ie基本只支持这些*通配选择器*{}$("*")所有元素E
2016-05-02 14:57:34
261
原创 动画
1、基本实现关键帧：定义关键帧要用@keyframes声明，并自定义一个动画的名称。@keyframeschange_bgpic{ 0%{ background-color:red;
2016-05-02 14:57:00
214
原创 过渡
CSS 过渡（transition）是通过定义元素从 起点的状态 和 结束点的状态 ，在一定的时间区间内实现元素平滑地过渡或变化 的一种补间动画机制。你可以让属性的改变过程持续一段时间，而不是立即生效。通过transition你可以决定哪个属性发生动画效果 (可以通过明确地列出这些属性)，何时开始动画 (通过设置delay), 动画持续多久 (通过设置duration), 以及如何动画 (通过
2016-05-02 14:56:32
246
原创 变形
1、基本属性transform:none| *例如：旋转180度，放大1.5倍，倾斜120度，移动10，矩阵变换transform:rotate(180deg) scale(1.5) skew(120deg) matrix(1,0,0,1,50,50);以上四个函数任选。2、transform-origin属性transform-origin属性值可以是百分比、em、p
2016-05-02 14:55:57
387
原创 渐变
1、基本定义因为不兼容性，没有深入学习，本节引自博客：runoob.com/css3/css3-gradients.htmlCSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gr
2016-05-02 14:55:26
274
原创 盒模型
1、基本模型2、控制布局不乱，在每一个部分都加上如下几句：-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;内外边距固定，宽度不定（如百分比）时常常用此方法。3、伸缩盒布局：由于许多浏览器还不支持该属性，以后再做介绍。
2016-05-02 14:54:41
269
原创 颜色
最保险的是用#...，ie7、8不支持透明属性，用滤镜实现透明效果1、透明属性opacity：0：完全透明1：完全不透明0到1之间的任意浮点数表示透明度：2、RGBA颜色模式：background:rgba(红色值、绿色值、蓝色值、透明值)ie9之上才有效3、HSLA颜色模式：更容易取得一个色系的颜色hsla(length,percentage,percen
2016-05-02 14:54:10
220
原创 文本
1、简单字体：不在css中设置时也可显示，如下均能显示：（1） font: 13px;（2） font: "微软雅黑";用font设置字体，浏览器的兼容性不太好2、基本字体：font-family: "微软雅黑";//字体一般pc端使用宋体，wap使用微软雅黑禁止用中文属性值font-size: 15px;//大小font-style:i
2016-05-02 14:53:34
296
原创 背景
1、简单背景：（1） 图片：background: url(img/back.jpg) 20px 20px;（2） 颜色：background: #ffff；2、基本背景:background-color:bisque;background-image: url(img/back.jpg); /*repeat-x、repeat-y、rep
2016-05-02 14:53:04
306
原创 边框
1、基本属性：border：border-width border-style border-colorborder-width（默认3px，单位px）border-style（必写，none：无边框，solid:实线，dotted：点状边框,dashed:虚线边框， double：双线，groove：3d凹槽……）border-color（默认黑色）2、基本属性细化：
2016-05-02 14:52:32
315
原创 HTML标签使用原则
1、能写在css里的属性，不要写在html中；2、h1~h6、strong、header、footer等语义标签，需要在css中重新定义一遍样式，使其适应多个浏览器；3、h1、header、footer在一个页面中有且仅有一个，以便引擎搜索；4、对h5新标签和高版本浏览器弃用的标签，慎用，具体参看w3c；5、写一个页面的范例： //包含所有标签的元素
2016-05-02 14:51:15
352
原创 HTML5新增结构标签
4.1 新增的主体结构元素 H5相对于H4的一个重大修改在于增加了很多新的结构元素，使文档更加清晰、容易阅读。4.1.1 article元素此元素一般写文本时才用，值得注意的是，同于h标签，header、footer标签每个页面上有且只有一个。article元素表示文档、页面、应用程序或站点中的自包含成分所构成的一个页面的一部分，并且这部分专门用于独立的分类
2016-05-02 14:50:20
423
原创 HTML标签
标签的定义Html语言，它的全名应该是：超文本标记语言 (Hyper Text Markup Language)。 如同它的名字所描述的，Html并不是一种编程语言，而是一种标记语言 (markup language)。一般来说，标记语言通常可以分成三类：标识性的、过程性的及描述性的。Html是目前相对来说使用率极高的一种描述性标记语言，描述性标记语言，它的标签本身作用就是向解释器
2016-05-02 14:49:32
426
原创 元素分类
在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。常用的块状元素有：、、...、、、、、、、常用的内联元素有：、、、、、、、、、、常用的内联块状元素有：、2.1 块状元素block在html中、 、、、 和 就是块级元素。设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换
2016-05-02 14:48:03
245
原创 水平和垂直居中
1.7.1 高度小于1ex的图标的垂直居中：“x”：x的底部是css中的基线；x-height：小写x的高度；1ex：一个小写x的高度。原理：1ex相当于字母x，所以图片与文字TianJin的对齐，相当于文字x与文字TianJin的对齐，font-size都继承了父元素，自然能对齐。divid="down-weather">aclass="weather-w
2016-05-02 14:46:37
259
原创 css中的盒子模型
/*消除浏览器自带的偏移*/*{margin: 0;padding: 0;}/*margin-left: auto;margin-right: auto;保证居中*/.wrapper{width: 960px;margin-left: auto;margin-right: auto;color: black;background: #000000;
2016-03-29 15:42:10
224
原创 css中的边框border
/**//**/.bor1{margin-left: auto;margin-right: auto;width: 80%;height: 200px;border: 3px brown solid;}/*border-top-colors……同于border-top-style一系列，可以分别设计四个面*/.bor2{width: 300px;he
2016-03-29 15:26:34
555
原创 css中颜色的设置
/*HSL色彩模式：hsl(length,percentage,percentage)：色调、饱和度、明亮度*//*HSL的优势：可以在同一色系中选择颜色，使得搭配不会太离谱*/.hs1{height: 20px;border: 1px solid #f00;padding: :10px;height: 170px;;background-color: hsl(0,0%
2016-03-28 17:04:10
709
原创 css中字体的设置
/*font-family:文本字体名称font-style:文本样式font-variant:文本是否为小型大写字母大小写font-weight：设置文本的粗细font-stretch:文本是否横向的拉伸变形font-size:文本字号大小写src:自定义字体的相对路径或绝对路径，此属性只能在@font-face中使用*/p[lang="a"]{font-fami
2016-03-28 15:26:19
406
原创 css中的溢出文本和文本对齐
/*溢出文本处理：text-overflow*//*text-overflow：clip|ellipsis|ellipsis-word：直接裁切|用。。。代替最后一个字符|用。。。代替左后一个词*/li{line-height: 30px;font-size: 20px;border-bottom: 1px solid #ccc;width: 600px; /*设置宽度
2016-03-28 15:00:20
1130
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人