gigi就是我-CSDN博客

原创正则表达式必知必会（三）

使用子表达式在这一部分将要学习如何运用子表达式的概念对表达式进行分组和归类。什么是子表达式之前学习的用来表明重复次数的元字符（如？或*或{2}等），都是只作用于紧挨着它的前一个字符。举个例子，在HTML中会使用来表示空格，如果我们想匹配一个HTML文档中的连续两个以上的空格，我们会写出如下表达式： {2,}但是我们发现不会得到预期的结果，原因是{2,}只会作用于紧挨着它的前一个

2017-01-11 22:01:43 516

原创正则表达式必知必会（二）

重复匹配匹配多个字符匹配一个或多个字符要想匹配同一个字符（或字符集合）的多次重复，只要简单地给这个字符（或字符集合）加上一个+字符作为后缀就行了。 +匹配一个或多个字符（至少一个，不匹配零个字符的情况）。比如，a+将匹配一个或多个连续出现的a。[0-9]+匹配一个或多个连续的数字。在给一个字符集合加上+后缀的时候，必须把+放在这个字符集合的外面。比如说，[0-9]+是正确的，[0-9

2017-01-11 17:08:06 753

原创正则表达式必知必会（一）

正则表达式是被用来匹配字符串中的字符组合的模式。匹配单个字符匹配纯文本正则表达式可以包含纯文本，并且可以只包含纯文本。 Ben就是一个简单的纯文本正则表达式。它将匹配文本中的Ben。有多个匹配结果绝大多数正则表达式引擎的默认行为是只返回第一个匹配结果。而若想得到所有匹配结果，就需要做一些配置。在JavaScript中就是指定g标志，表示将返回一个包含所有匹配的结果数组。大小写问题正则表达式

2017-01-10 22:20:15 751

原创 js学习笔记：MV*模式

MVCMVC模式的意思是，软件可以分成三个部分：视图（View）：用户界面。控制器（Controller）：业务逻辑模型（Model）：数据保存各部分之间的通信方式如下：View 传送指令到 ControllerController 完成业务逻辑后，要求 Model 改变状态Model 将新的数据发送到 View，用户得到反馈所有通信都是单向的。ModelModel管理应用程序的数据

2017-01-10 16:13:41 1402

原创 js学习笔记：this

this是Javascript语言的一个关键字，它代表函数运行时自动生成的一个内部对象，只能在函数内部使用。随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是： this指的是，调用函数的那个对象！ this指的是，调用函数的那个对象！ this指的是，调用函数的那个对象！所以首先必须要搞清楚在JS里面有几种函数的调用方式：普通函数调用作为对象方法来调用作为构造函

2017-01-08 12:08:54 540

原创 HTTP学习笔记：HTTP首部字段（1）

HTTP报文首部HTTP协议的请求和响应报文中必定包含HTTP首部。首部内容为客户端和服务器分别处理请求和响应提供所需要的信息。报文由几个字段构成。HTTP请求报文在请求中，HTTP报文首部由以下几部分构成：请求行：方法、URI、HTTP版本HTTP首部字段：请求首部字段通用首部字段实体首部字段HTTP响应报文在响应中，HTTP报文首部由以下几个部分构成：

2017-01-07 20:11:54 620

原创 HTTP学习笔记：网关、代理、隧道、缓存

HTTP通信时，除客户端和服务器以外，还有一些用于通信数据转发的应用程序，如代理、网关和隧道。他们可以配合服务器工作。这些应用程序和服务器可以将请求转发给通信线路上的下一站服务器，并且能接受从那台服务器发送的响应再转发给客户端。代理代理是一种带有转发功能的应用程序，它扮演了位于服务器和客户端中间人的角色，接受由客户端发送的请求并转发给服务器，同时也接收服务器返回的响应并转发给客户端。代理不改

2017-01-07 18:38:54 1490

原创 HTTP学习笔记：状态码

状态码用于描述响应状态。借助状态码，用户可以知道服务器端是正常处理了请求还是出现了错误。状态码由三位数字和原因短语组成。数字中的第一位指定了响应类别，响应类别有5种：1XX Informational 信息性接受的请求正在处理2XX Success 成功请求正常处理完毕3XX Redirection 重定向需要进行附加操作以完成请求4XX Client Error 客户端错误

2017-01-05 22:12:10 301

原创 HTTP学习笔记：HTTP协议基础

无状态协议HTTP是一种不保存状态，即无状态协议。 HTTP协议自身不对请求和响应之间的通信状态进行保存。也就是说在HTTP这个级别，协议对于发送过的请求或响应都不做持久化处理。HTTP方法GET：获取资源GET方法用于请求访问已被URI识别的资源。指定的资源经服务器端解析后返回响应内容。POST：传输实体主体POST方法用来传输实体的主体虽然用GET方法也能传输实体的主体，但一般使用POST

2017-01-05 20:58:19 742

原创 HTTP学习笔记：Web与网络基础

TCP/IP协议族计算机与网络设备要相互通信就必须基于各种协议，与互联网相关联的协议集合就为TCP/IP协议族。分层TCP/IP分为以下4层：应用层：决定了向用户提供应用服务时通信的活动。 TCP/IP协议族内预存了各类通用的应用服务。比如FTP、DNS，以及HTTP传输层：提供处于网络连接中的两台计算机之间的数据传输。在传输层有两个性质不同的协议：TCP和UDP网络层：用于处理在网络上

2017-01-04 22:13:29 341

原创 CSS学习笔记：columns

概述太长的文本行十分不容易阅读，CSS多列布局就是允许简单地定义多列文本。使用多列布局列计数器和宽度有两个CSS属性控制是否实现多列布局和显示多少列： column-count 和column-width。这两个属性可以同时使用，也可以只使用其中一个。column-count 设置特定数量的列数，宽度会自动计算。column-width 设置期望的最小列宽。如果 column-count 没

2017-01-02 21:41:37 395

原创 CSS知识点：媒体查询

概述媒体查询可以根据用户所使用的的设备或显示器特性来自定义样式，从而实现适配不同终端的网页效果。下面是一个例子：@media screen and (max-width: 600px) { .facet_sidebar { display: none; }}语法媒体查询包含：媒体类型 all：适用于所有设备，默认值print：打印screen：显示器speech：语音合

2017-01-02 21:08:37 502

原创 CSS学习笔记：@font-face

概述@font-face规则允许开发者为网页指定在线字体。@font-face是连接服务器上的字体的一种方式，浏览器会根据这条指令把对应的字体文件下载到本地缓存，使用它去显示文本。通过这种方式可以消除对用户电脑字体的依赖。@font-face 不仅可以放在在CSS的最顶层, 也可以放在 @规则的条件规则组中。语法@font-face的取值有以下几个：font-family：设置文本的字体名称

2017-01-01 22:54:01 1622

原创 CSS学习笔记：border-image

border-image 属性能给元素的边框添加背景图片。使用 border-image 时，其将会替换掉 border-style 属性所设置的边框样式。语法border-image其实是一个简写属性，由以下属性集合而成：border-image-sourceborder-image: none | url("/images/border.png")指定边框图片的地址。 none 表示bord

2017-01-01 21:16:19 423

原创 CSS学习笔记：text-shadow

概述text-shadow 为文字添加阴影。可以为文字与 text-decorations 添加多个阴影，阴影值之间用逗号隔开。要为每个阴影指定相对文字的偏移量，可选的颜色及模糊半径。多个阴影从前往后叠加，第一个阴影在最前面。可以应用在::first-line和::first-letter伪元素上语法text-shadow:offset-x | offset-y | blur-radi

2016-12-28 22:02:56 670

在CSS3中，box-shadow属性实现盒容器的阴影效果，几乎可以用到任何元素上。如果元素同时设置了border-radius，阴影也会有圆角效果。在该属性中，要设置阴影相对于盒容器水平及垂直方向上的偏移值、阴影的颜色、还可以选择性地设置模糊半径和扩展半径。语法box-shadow：none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <

2016-12-28 21:39:49 395

原创 CSS学习笔记：渐变

CSS 渐变是在 CSS3 Image Module 中新增加的 <image> 类型. 使用 CSS 渐变可以在两种颜色间制造出平滑的渐变效果. 用它代替图片，可以加快页面的载入时间、减小带宽占用。同时，因为渐变是由浏览器直接生成的，它在页面缩放时的效果比图片更好，因此可以更加灵活、便捷的调整页面布局。浏览器支持两种类型的渐变：线性渐变 (linear)，通过 linear-gradi

2016-12-28 20:44:35 687

原创 CSS学习笔记：RGBA与HSLA

在CSS3中可以使用RGBA和HSLA两种色彩模式，二者均可以用来在设置颜色的同时也指定其透明度。RGBA指的是“红色、绿色、蓝色、Alpha透明度（Red-Green-Blue-Alpha）” 前三个值取值从0~255或0%~100%HSLA指的是“色调、饱和度、亮度、Alpha透明度” 色调取值0~360，饱和度和亮度取值0%~100%其中，Alpha的取值从0~1 , 0代表完全透明

2016-12-26 22:21:17 2449

原创 CSS学习笔记：border-radius

概念border-radius 用来设置边框圆角。当使用一个半径时确定一个圆形；当使用两个半径时确定一个椭圆这个(椭)圆与边框的交集形成圆角效果。即使元素没有边框，圆角也可以用到 background 上面，具体效果受 background-clip 影响。这是一个简写属性，用来设置：border-top-left-radiusborder-top-right-radiusborder-

2016-12-26 21:28:47 1186

原创 CSS学习笔记：overflow-wrap（word-wrap）

概念CSS 属性 overflow-wrap 是用来说明当一个不能被分开的字符串太长时，为防止其溢出，浏览器是否允许这样的单词中断换行。注：word-wrap 属性原本属于微软的一个私有属性，在 CSS3 现在的文本规范草案中已经被重名为 overflow-wrap 。 word-wrap 现在被当作 overflow-wrap 的 “别名”。稳定的谷歌 Chrome 和 Opera 浏览器

2016-12-26 17:39:58 2350

原创知识点：BFC、IFC

引子定位方案控制元素的布局，在 CSS 2.1 中，有三种定位方案——普通流 (Normal Flow) 、浮动 (Floats) 和绝对定位 (Absolute Positioning) 。普通流在普通流中，元素按照其在 HTML 中的先后位置至上而下布局。行内元素水平排列，直到当行被占满然后换行块级元素则会被渲染为完整的一个新行除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流

2016-12-26 15:14:09 511

原创知识点：float、position与display关系

问： position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？float、position 和 display 之间的关系：如果display的值为none，那么后两者就不会产生作用，也不会有任何的盒子产生；除此之外，如果元素为absolute或者fixed定位，那么float的属性值相当于‘none’，display的属

2016-12-25 22:03:10 2023

原创一些CSS的奇淫技巧

用纯CSS创建一个三角形当一个盒容器的两条边框在边角处相交时，浏览器就会在交点处按某个角度绘制接合线。如果将这个盒容器的width和height设置为0，并为每条边框设置一个较粗的width值和彼此不同的颜色，最终会得到四个被拼接到一起的三角形，它们分别指向不同的方向：<div id="demo"></div>#demo { width: 0; height: 0; border-w

2016-12-25 20:15:54 1855

原创 CSS3新特性概览

CSS3 是层叠样式表语言的最新进展，目的在于扩展 CSS2.1。它为我们带来了许多期待已久的新特性，例如圆角，阴影，gradients(渐变)，transitions(过渡) 或 animations(动画) ，当然还有新的布局如 multi-columns ， flexible box 或 grid layouts。这些实验性的内容带有 vendor-prefixed(提供商前缀

2016-12-23 16:56:59 577

原创知识点：居中大盘点

居中大盘点行内元素<div> <span>element</span></div>基础样式：div{ width:300px; height:200px; background-color:#777;}水平居中text-align<div> <span>element</span></div>div{ text-align:center;}垂直居中line-hei

2016-12-23 15:39:11 396

原创知识点：几个标签的区别

title与h1title元素表示页面标题，显示在浏览器的标题栏或标签页上。h1则是文档内容中的一级标题，对页面信息的抓取也有很大的影响；b、strongstrong表示文本十分重要，一般用粗体显示b没有特殊含义，仅表示加粗i、em二者语义不同。 - em：标记出需要用户着重阅读的内容，表示强调，表示为斜体 - i：用于表现因某些原因需要区分于普通文本的一系列文本。例如技术术语

2016-12-20 22:26:47 783

原创知识点：page visibility （页面可见性）

page visibility API 可以获取到一个网页是否可见的状态，并能获取可见性变化的事件。属性document.hidden（只读）：页面处于隐藏状态时返回true，否则返回false。document.visibilityState（只读）：用来展示文档可见性状态的字符串。可能的值： visible：页面可见hidden：页面不可见。页面可能被最小化、或是一个后台标签。pre

2016-12-20 21:40:13 907

原创知识点：label

问： Label的作用是什么？是怎么用的？答： HTML <label> 元素表示一个表单元素的标题。通常关联一个表单控件，起到一个控制的作用。 label通过for属性关联一个表单控件，或将一个表单控件包含在其内部。 label还能起到一个扩大焦点范围的作用。点击label就相当于点击了对应的表单控件。<label>Click me <input type="

2016-12-20 21:15:04 387

原创知识点：cookie、localStorage、sessionStorage

问：请描述一下 cookies，sessionStorage 和 localStorage 的区别？答： cookie最初是客户端用来存储会话信息的。在客户端每次向服务器发送请求的时候，都会在请求中带上cookie信息，服务器响应也是。服务器端也可以设置cookie的各项属性。 localStorage和sessionStorage都是存储在客户端本地的，不

2016-12-20 20:57:44 327

原创知识点：HTML5

问： html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？有关HTML5的新特性详细信息可以参考：什么是HTML5（一）：语义什么是HTML5（二）：通信、离线&存储、多媒体什么是HTML5（三）：性能&集成、设备访问HTML5的新特性语义化增加了许多语义化的元素，如article、section、nav、h

2016-12-19 22:59:27 462

原创知识点：浏览器内核

问：常见的浏览器内核有哪些？浏览器内核其实是指layout engine/rendering engine，即图形引擎/渲染引擎，它负责解析HTML和CSS，渲染网页。Trident是ie的浏览器内核。现在已经停止开发，被EdgeHTML替换。Trident内核的常见浏览器有：ie6,7,8,9,10360搜狗腾讯TT猎豹GeckoGecko原本由网景公司开发，现在则由Mo

2016-12-19 22:25:13 370

原创知识点：link和@import

问：页面导入样式时，使用link和@import有什么区别？答： @import是css中的@规则，只能应用在css文件中或style元素内，只用于加载CSS； <link>是HTML标签，除了可以加载CSS外，还可以完成别的功能，比如定义RSS，定义rel连接属性等；页面被加载的时，link会同时被加载； @import引用的CSS会等到页面被

2016-12-19 21:51:45 420

原创知识点：DOCTYPE与浏览器模式

问： Doctype作用？严格模式与混杂模式如何区分？它们有何意义? 答： DOCTYPE是文档类型声明，出现在html文档的第一行，处于 <html> 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。严格模式是指浏览器按照最高标准来解析文档；混杂模式则是使用比较宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。浏览器根据do

2016-12-18 22:28:48 916

原创过一遍HTML标签（五）

表格table（块级）HTML中table标签 (<table>) 用来展示多行的数据。captionHTML <caption> 元素展示一个表格的标题，它常常作为 <table> 的第一个子元素出现，同时显示在表格内容的最前面。它同样可以被CSS样式化，所以，它同样可以出现在一个相对于表格的任意位置。<table> <caption>Awesome caption</caption>

2016-12-18 21:27:57 703

原创 CSS学习笔记：功能查询

通过 @support，你可以在 CSS 中使用一小段的测试来查看浏览器是否支持一个特定的 CSS 功能(这个功能可以是 CSS 的某种属性或者某个属性的某个值)，然后根据测试的结果来决定是否要应用某段样式。比如：@supports ( display: grid ) { // 如果浏览器支持 Grid，这里面的代码才会执行}如果浏览器能够理解 display: grid，那么，大括号

2016-12-17 21:59:16 383

原创 CSS学习笔记：flexbox

CSS3 弹性盒子(Flexible Box 或 Flexbox)，是一种布局方式，当页面需要适应不同的屏幕大小以及设备类型时，它依然能确保元素拥有更恰当的排布行为。概念在定义方面来说，弹性布局是指通过调整其内元素的宽高，从而在任何显示设备上实现对可用显示空间最佳填充的能力。弹性容器扩展其内元素来填充可用空间，或将其收缩来避免溢出。块级布局更侧重于垂直方向、行内布局更侧重于水平

2016-12-17 20:52:01 485

原创渐进增强和优雅降级

渐进增强：针对低版本的浏览器构建页面，保证最基本的功能。再针对高版本浏览器进行效果、交互等改进和追加功能，以达到更好的用户体验。优雅降级：一开始就构建完整的功能，之后再针对低版本浏览器进行兼容。

2016-12-17 12:45:51 325

原创什么是npm？Bower又是啥？

前言我们在开发时，会用到很多别人写的JavaScript代码。如果我们要使用别人写的某个包，每次都根据名称搜索一下官方网站，下载代码，解压，再使用，非常繁琐。于是一个集中管理的工具应运而生：大家都把自己开发的模块打包后放到一个包管理器上，如果要使用，直接通过包管理器安装就可以直接用，不用管代码存在哪，应该从哪下载。因此使用包管理器主要基于以下几个原因：方便的寻找和下载你需要的依赖库，并将它们整

2016-12-17 12:17:32 4077

原创 SQL学习笔记（一）

多条语句必须以分号分隔SQL语句不区分大小写检索数据检索单个列SELECT 列名 FROM 表名;结果将返回所有行的该列字段。检索多个列在SELECT关键字后面给出多个列名，列名之间以逗号分隔。SELECT 列名1,列名2,列名3 FROM 表名;检索所有列在实际列名的位置使用*通配符即可检索所有列。SELECT * FROM 表名;检索

2016-12-14 20:18:18 548

原创过一遍HTML标签（四）

编辑ins（行内）定义增加到文档的内容。属性：cite：cite 属性的值指向一个文档的 URL，该文档解释了文本被插入或修改的原因。（目前该属性还没有被主流浏览器支持）datetime：该特性指示的此修改发生的时间和日期，并且该特性的值必须是一个有效的日期或者时间字符串。如果该值不能被解析为日期或者时间，则该元素不具有相关联的时间标记。del（行内）定义从文档移除的内容。通常

2016-12-12 20:52:39 478

空空如也

js中window.open之前的事件是什么？

js如何实现点击链接激活已打开页面？