关于include_path使用说明

整    理:朱 兵
时    间:2015-11-30
说    明:关于include_path使用说明
 一、在什么地方遇到?
    现象:在文件中遇到require_once("DB.php"),发现在当前目录下并没有该文件。
    原因:主要是用到了include_path,遇到此问题,在php配置中查找include_path的路径即可找到相应的文件。
    当用到函数include(),require()函数来寻找文件时候.在不设置include_path的情况下,这些函数打开文件时候默认的是以web根目录去寻找.当设置include_path以后,这些php函数就会先在指定的include_path目录下面去搜索寻找。我们可以在include_path目录下找到相应的文件。
 二、include_path的设置
1、第一种方法:
linux 下
修改php.ini文件中的include_path项。

include_path=".:/opt/ci123/php-5.3.27/share/pear"
windows下
include_path=".;c:\php\includes"
在 Windows 中,用分号分隔目录。在任何其它系统中用冒号分隔目录。

编写程序时可以用常量 PATH_SEPARATOR 代替

2、第二个方法:
使用ini_set方法。

ini_set('include_path', '/usr/lib/pear');

 三、运行时包含的顺序

1.如果为绝对路径,则直接包含, 并结束(找不到直接退出).

2.如果是是相对路径((形如./file, ../dir/file),则跳过include_path的作用逻辑, 直接解析相对路径(找不到直接退出)

3.都不是以上两种情况

会根据include_path,和当前执行文件的path组成一个待选的目录列表

注意点:
1、如果在指定的目录下找不到所要求包含的文件,而在当前页面目录下正好存在这个名称的文件时,则默认引入当前目录下的该文件。

2、当指定了多个目录为 include_path ,而所要求包含的文件在这几个目录都有相同名称的文件存在时,php选择使用设定 include_path 时排位居前的目录下的文件。

 四、php手册中的相关函数

   - set_include_path — 设置 include_path 配置选项
   - ini_set() - 为一个配置选项设置值
   - get_include_path() - 获取当前的 include_path 配置选项
   - restore_include_path() - 还原 include_path 配置选项的值
 五、扩展阅读

 

使用token来解决用户信息同步问题


编	写:袁	亮
时	间:2015-11-27
说	明:多应用系统用户信息统一安全升级策略

一、问题
	1、post请求之后,后退按钮导致加载失败,提示需要重新提交数据问题的解决
	2、用户信息被抓包,会导致账号泄漏问题
	
二、原因
	1、根据http协议,post请求非幂等,不能缓存,因此有响应头Pragma:no-cache
	2、后退的时候,浏览器会强制提醒用户,确认是否重新输入数据
	3、因此后退会出现白页

三、可能解决思路
	1、post请求换成get请求,绕过限制
		1.1 私密数据不安全,如果链接发给其他人,会导致账号被盗
		1.2 统计代码中,会把这些链接都给存储下来,太危险
	2、对get的数据进行可逆加密并加过期时间
		还是解决不了上面的两个问题
	3、先post发送私密数据过去,然后get跳转
	
四、完整思路
	1、私密数据,必须要走post,不能get
	2、先通过服务器间请求,将私密数据post过去
		2.1 在客户端对数据进行签名及有效期
		2.2 通过post将数据通过服务器与服务器传输
		2.3 服务端返回该数据存储的token(类似session存储)
			为防止服务器返回较慢,导致token丢失,token以客户端传过去的签名为准
		2.4 该数据,只存储一个小时,超过则失效
	3、get形式带上token去请求数据
		3.1 根据token,取到对应的数据
		3.2 用户之后的token要删除,不允许重复使用
		3.3 取出的数据需要验证是否有效期内,并验证签名是否正确
	4、解决了哪些问题
		4.1 没有通过get传输私密数据
		4.2 浏览器没有发起post请求,因此不存在后退刷新的问题
		4.3 私密数据通过服务器间的post请求,因此对用户抓包,并不能获取到这份私密数据
			抓更原始的包那就没办法,虽然不知道原始数据,但还是能登陆到用户账户上
	5、导致的问题及解决办法
		5.1 比之前多了一次http请求,会变的更慢
			在相应的服务器端加host,降低解析时间(同一机房,走内网)
			服务端只做数据存储到内存,不做额外操作降低运行时间
			客户端设置超时,防止卡住
		5.2 memcache存储的数据,存在一定几率丢失
			可以暂时不考虑,概率太低,而且最坏的影响也就是用户某一次可能登陆不上(只有新用户)
		5.3 token丢失或被抓包
			32位的加盐散列,基本可以不考虑被暴力强刷
			token即使丢失,问题也不大,因为token生成之后,用户基本上马上就使用,之后token就失效了
	

使用范例见附件:build_query

【SEIKO】精工VPN创建

整    理:徐秀、肖雅君

时    间:2015-11-27

说    明:创建连接精工服务器的VPN

 

创建连接精工服务器的VPN。以Win7为例,其他系统大同小异

  1. 创建seikoVPN连接。

打开“控制面板”--“网络和Internet”--“Internet选项”>“连接”菜单,弹出窗选择“添加VPN(P)”,如下图:seiko服务器端操作一110

在弹出框设置如下:seiko服务器端操作一123

“下一步”,输入用户名和密码。【已固定,因为有保密性,查看相关文档】seiko服务器端操作一160

现在,seiko的vpn已出现桌面任务栏的网络连接中,点击任务栏网络连接按钮seiko服务器端操作一202出现上图,右击”seiko”-> “属性” -> “网络” 更改相应配置。seiko服务器端操作一242

选择“TCP/IP4” -> “属性”seiko服务器端操作一264弹出框去掉“在远程网络上使用默认网关”选项。然后确定退回。seiko服务器端操作一296

2、像连接宽带一样连接VPN

3、远程登录内网的虚拟机192.168.1.152(此机器是win2003系统)

点击win的开始,选择运行【快捷键:win键+r】seiko服务器端操作一380

输入mstsc,启用远程登录seiko服务器端操作一399

如下图,输入内网的ip,192.168.1.152,点击显示选项seiko服务器端操作一438

点击”本地资源”下的”详细信息”弹出右侧对话框,勾选如下选项。【可以完成本机和服务器的信息的复制粘贴】,点击”确定”,回到上图界面,点击连接按钮。seiko服务器端操作一514

看到下图所示,输入 账号、密码seiko服务器端操作一532

【注意】: 每次登远程之前要先连seiko的vpn(和连接宽带方式相同)。

【SEIKO】精工PPT制作说明

整    理:徐秀、肖雅君

时    间:2015-11-27

说    明:精工每月PPT制作技巧和内容的总结

 

一、概述

二、详细介绍

1.表类网站分析PPT

2.精工网站数据分析PPT

3.半年度ppt

三、PPT制作的小技巧

 

一、概述

精工有三类PPT需制作,第一个是对精工自家流量的分析(每月)、第二份是对精工同类型手表的网站分析(每月),即所谓的“表类网站分析PPT”,第三份是半年度PPT。其中每月还需从51yes网站上导出精工“每月访问数据量excel”,用于制作PPT 。

三份PPT对应内容简介如下表

PPT标题 PPT内容 PPT制作时间 PPT数据准备
1.表类网站分析 主要是分析同类型腕表(例如劳力士、天梭、浪琴等手表)的数据,包括该类手表每个月的资讯更新情况、每个月的排名等 同类网站比较ppt制作时间为当月最后一天【做迟做早都可能造成数据不准确】建议每月月底前制作。 网站Alexa排名,登录(http://www.alexa.cn/)用百度搜索各类表名,看是否有品牌推广。进入官网,截取首页,并查看是否有咨询更新
2.精工每月数据分析 主要在51yes上获取精工网站的相关数据,如:PV访问量,独立IP访问量,流量来源与比例等。 精工数据分析ppt制作时间为下个月的月初【可获取上个月的完整数据,做早了会导致数据不完整】 登录51yes(http://countt.51yes.com/login.aspx)查询网站的各项数据。(侧栏的导航都有分类)。Excel图表制作,以及数据计算
3.半年度 主要是对半年的表类网站分析数据的总结比较 半年度ppt每半年做一次。精工会直接向我公司索要PPT。最好提前做好准备。

二、详细介绍

1.表类网站分析PPT

1.1 第一项:本月同类手表网站总体排名与更新excel截图

需制作者先在excel里统计数据后再截图。

该excel内容包括:

(1)资讯更新

(2)上月排名情况

(3)本月排名情况

排名登录:http://www.alexa.cn/ 获取(操作见1.1.1&1.1.2)

image001

1.1.1 新闻资讯更新获取

在各网站的官网中,如有新闻更新,写入;无则空白,各网站结构大同小异,小伙伴自行查找吧。ppt制作技巧【图片由excel截图】:

(1).图片圆角制作:image002

"裁剪"工具下拉选项---裁剪为形状

(2)投影制作:开始----形状效果---映像。

1.1.2 Alexa本月数据获取

各网站Alexa查询:http://www.alexa.cn/image003

同类比较网站首页地址:

劳力士http://www.rolex.com/zh-hans#/home?

欧米茄http://www.omegawatches.com/?

天梭http://www.tissot.ch/?

浪琴http://www.longines.cn/?

西铁城http://www.citizen.com.cn/??

英纳格http://www.enicar.com/?

梅花http://www.titoni.ch/zhs.html?

美度http://www.mido.ch/?

雷达http://www.rado.com/??

卡西欧http://www.casio.com.cn/wat/?

【上月Alexa数据直接由上月PPT中copy】

1.2 第二项:其它表类网站分析

分析内容包括:

(1)首页整理结构有无变化。

(2)有无资讯更新。

(3)是否在百度首页有推广。

如下图:image004

在百度搜索引擎中输入表类关键字,看该表是否在百度上做了品牌推广。比较上个月ppt,填写格式参照ppt。

1.3 根据查询结果写结论-END

  1. 精工网站数据分析PPT

Tip:精工流量数据均可在51yes上查询到,且可查到往期的数据

(1)统计区间制作方法image005

way1:情节提要------“编辑布局”【office2010】

way2:wps中幻灯片母版---编辑母版

(2)数据获取【以下各数据选取,均注意日期选择】,访问:http://countt.51yes.com/login.aspx

2.1 第一项:概况

此项主要简单说明下本月PV和IP较上月数值的变动情况,如下图:image006

2.2 第二项:综合评价

此项主要是通过具体的数值,详细的说明下本月PV和IP较上月的变动情况,如下图:image007

数值获取方式:

(1) 先查数据

登录51yes网站。image008

点进侧栏的“综合统计”。主页面右下方有上月访问量统计(蓝色为pv量,括号紫色为独立IP访问量):image009

(2) 计算上升/下降百分比

平均页面访问量=本月pv/本月独立ip;

pv上升%=|本月pv-上月pv|/本月pv*100%;[ip/页面访问同]

2.3 第三项:流量分析

此项主要统计以下几个内容:

(1)将本月和上月访问量最高的城市记录下来,包括其访问比率。同时对访问比的变化情况作总结。

(2)记录两个月的流量主要来源,并简要总结。

(3)记录哪些网站对精工网站流量产生影响。(此项一般不会变化,主要是一些主流的搜索引擎)image010

2.3.1 数据获取

点击”客户端分析”【获取访问量最高的前五城市】image011

2.3.2 搜索引擎流量分析

如上,在侧栏点击”来路统计(域名为单位)”,注意日期选取。在ppt记录前三四域名及所占比例。

2.4 第四项:页面总访问和独立ip访问数据获取

2.4.1 网站访问量统计

侧栏“数据下载”:image012 点击进入下载页,类型选择,”下一步”:image013

选择你想要输出的月份:image014

点击下载按钮即可。

2.4.2 制作柱形图

通过excel表格的柱形图制作成如下格式【根据下周的excel表格—插入柱形图制作,注意格式以及颜色选择】。同理制作独立IP访问量的柱形图。image015

2.5 第五项:单个页面的受访率

此项主要统计以下几个内容:

(1)受访页面的截图。

(2)在51yes上获取当月的数据,与前一年的数据形成比较。image016

根据获取到的页面访问率,从高到低排列,参考往月ppt 变化,注意更改。在51yes的侧栏点击:image017

(注意右侧日期选择)。

  1. 半年度ppt

对比分析以往半年度PPT,主要修改的是以下几点内容:

(1)半年的表类网站分析PPT总结版,截取制作当月各网站的首页图片【可以用firefox的FireCaptors截屏插件,截取一整个网站的图片。】并附上网站logo。

(2) 统计各比较网站的资讯更新,附上主图和链接。

(3) 统计网站半年的资讯更新情况,统计各网站的半年咨询更新数量,自行绘制“网站活跃度表格”。

三、PPT制作的小技巧

1.网站的截取可以由firefox的FireCaptors

2. 图片圆角制作:"裁剪"工具下拉选项---裁剪为形状

3. 投影制作:开始----形状效果---映像。

4. 统计区间制作方法:

way1:情节提要------“编辑布局”【office2010】

way2:wps中幻灯片母版---编辑母版

5. 数据计算:

平均页面访问量=本月pv/本月独立ip;

pv上升%=|本月pv-上月pv|/本月pv*100%;[ip/页面访问同]

Apidoc的安装及使用

整    理:曹燕

时    间:2015-11-27

说    明:Apidoc的安装及使用(官方文档:http://apidocjs.com/

 

1.安装

2.运行

3.apidoc.json配置文件

4.注释中必需的部分

5.继承

6.apidoc的注释规则

(1)@api——定义接口的请求方式、请求路径、标题

(2)@apiDefine——定义一个可重用的块

(3)@apiDescription——api方法的详细介绍

(4)@apiError——出错情况的描述

(5)@apiErrorExample——一个返回出错信息的示例

(6)@apiExample——使用一个接口的示例

(7)@apiGroup——对块进行分类,便于导航条分类

(8)@apiHeader

(9)@apiHeaderExample

(10)@apiIgnore——不被转换的块

(11)@apiName——接口的名称

(12)@apiParam——描述接口的参数

(13)@apiParamExample——接口参数的一个示例

(14)@apiPermission

(16)@apiSuccess——成功时的返回值

(17)@apiSuccessExample——一个成功的返回信息的示例

(18)@apiUse——调用一个已经定义好的块

(19)@apiVersion——一个块的版本信息

 

1.安装

npm install apidoc -g

2.运行

apidoc -i myapp/ -o apidoc/ -t mytemplate/

-i 输入文件的目录,即项目文件夹

-o 输出目录,即放置生成文档的位置

-t 使用的模板,会有默认的模板,当然也可以用自己定义的模板

示例: apidoc -i abc/ -o doc/   apidoc的使用1956

3.apidoc.json配置文件

放在你的工程项目的根目录下,是对项目的概要介绍,包括标题、简要介绍、版本等。

{

"name": "育儿网",

"version": "1.0.0",

"description": "育儿API文档",

"title": "API文档",

"template": {

"withCompare": true,

"withGenerator": true

}

}

其中name、version、description都会被显示出来。

4.注释中必需的部分

/**

* @api {get} /user/:id Request User information

* @apiName GetUser

* @apiGroup User

*/

  • 注释块必须用/** */包围
  • @api {get} /user/:id Request User information

注释块必须以@api开头,否则会忽视这个注释块

  • @apiName必须是一个独一无二的名字
  • @apiGroup的作用是给这个方法分组

5.继承apidoc的使用2448

@apiDefine定义了一个可重用的块,然后其他块调用这个块的时候就写:

@apiUse UserNotFoundError

在生成的文档中会自动填充成UserNotFoundError块的具体内容。

Apidoc中的继承只能继承一层,层数多了会影响可读性。

6.apidoc的注释规则

(1)@api——定义接口的请求方式、请求路径、标题

【开头必需,除非是@apiDefine开头】apidoc的使用2644

Method:必须,方法的请求方式,如get、post、put、delete...

Path:必须,请求路径

Title:可选,可选,用于导航和文章的子标题apidoc的使用2725

(2)@apiDefine——定义一个可重用的块apidoc的使用2753

Name:必须,独一无二的名字,之后引用这个块就是用这个名字

Title:可选,标题

Description:可选,详细介绍,另起一行写apidoc的使用2824

(3)@apiDescription——api方法的详细介绍apidoc的使用2858

Text:必须,api方法的文字介绍

(4)@apiError——出错情况的描述apidoc的使用2902

(Group):可选,有了group值之后该错误会被分组;默认归类为Error 4xx。

{Type}:可选,返回类型,如{Boolean},{Number},{String}等。

Field:必须,返回标识符,例如错误码。

Description:可选,对错误码的描述。apidoc的使用3041

(5)@apiErrorExample——一个返回出错信息的示例

会以预格式化代码输出到页面apidoc的使用3091

{type}:可选,返回信息的格式

Title:可选,这个出错信息的标题

Example:必须,具体的返回信息apidoc的使用3149

(6)@apiExample——使用一个接口的示例

会以预格式化代码输出到页面apidoc的使用3192

{type}:可选,代码的语言

Title:必须,这个例子的标题

Example:必须,使用接口的代码apidoc的使用3246

(7)@apiGroup——对块进行分类,便于导航条分类apidoc的使用3278

Name:必须,分类的名称apidoc的使用3294

(8)@apiHeader

暂略

(9)@apiHeaderExample

暂略

(10)@apiIgnore——不被转换的块apidoc的使用3361

将这句放在块的起始位置,这样进行转换的时候这个块就会被跳过,常常用于一个块还没有开发完毕的时候。

Hint:可选,描述为什么不转换这个块apidoc的使用3432

(11)@apiName——接口的名称apidoc的使用3455

Name:必须,接口的名称,必须是独一无二的名称(允许版本不同的同一名称)apidoc的使用3495

(12)@apiParam——描述接口的参数apidoc的使用3521

(group):可选,所有的参数会被分到这个类里,如果不设置,就分到Parameter。

{type}:可选,参数的类型,如{String}等。

{type{size}}:可选,参数取值的详细信息,如

{number{100-999}}——参数必须是个100-999的数字

{string{2..5}}——参数必须是2-5个字符的字符串

{type=allowedValues}:可选,关于变量允许取值的信息,如

{string="small","huge"}——参数必须是包含”small”或”huge”的字符串

Field:必须,变量名,表示该参数对于接口是必须的

[field]:必须,变量名,表示该参数对于接口不是必须的

=defaultValue:可选,参数的默认取值

Description:可选,参数的描述apidoc的使用3884

(13)@apiParamExample——接口参数的一个示例apidoc的使用3919

{type}:可选,请求信息的格式

Title:可选,示例的标题

Example:必须,请求的具体信息apidoc的使用3973

(14)@apiPermission

暂略

(15)@apiSampleRequest——模拟请求时的urlapidoc的使用4031

(16)@apiSuccess——成功时的返回值apidoc的使用4602

(group):可选,所有的参数会被分到这个类里,如果不设置,就分到Success 200。

{type}:可选,参数的类型,如{String}等。

Field:必须,返回标识符。

Description:可选,成功码的描述。apidoc的使用4723

(17)@apiSuccessExample——一个成功的返回信息的示例apidoc的使用4763

{type}:可选,返回信息的格式

Title:可选,示例的标题

Example:必须,返回的具体信息apidoc的使用4817

(18)@apiUse——调用一个已经定义好的块

已经定义的块是指用@apiDefine定义的块apidoc的使用4869

Name:必须,@apiDefine定义的块的名称apidoc的使用4897

(19)@apiVersion——一个块的版本信息

Group和name值都相同的块,可以进行不同版本的对比。可用于在生成的文档中和之前的版本进行比较,增加和修改的会用绿色标出、删除的会用红色标出。apidoc的使用5000

Version:必须,版本号apidoc的使用5017

https的使用注意事项


编	写:袁	亮
时	间:2015-11-20
说	明:https的使用注意事项

一、全部https的优缺点以及选择
	1、优点
		1.1 安全性高
	2、缺点
		2.2 用户访问会变慢,特别是第一次访问(需要下载证书)
		2.2 开发成本较高,https页面的所有资源都必须是https资源
		2.3 统计代码不能使用,大部分统计代码都不提供https版本
		2.4 服务器端的负载也会变高
	3、其他网站参考
		3.1 百度、淘宝等很多二级域名也不是https
		3.2 京东大部分都不是https
	4、结论
		只针对安全级别高的几个页面采用https即可,不需要整个域名都使用https
		
二、开发过程注意事项
	1、静态资源都必须是https
		1.1 js等请求,浏览器直接会阻止http的请求
		1.2 图片请求,http的不阻止,但是会报warning错误
		1.3 为兼容http和https同时访问,可以写//***.ci123.com/****,会自动根据当前的访问协议加上http或者https
	2、ajax请求
		2.1 ajax请求也必须是同协议的,否则将跨域,不能访问
		2.2 jsonp可以解决这个问题,但最好不要这么做
	3、核心cookie可以设置为仅https访问
		3.1 淘宝中的skt,对应的应该是一个sessionId,就是仅https的
		3.2 这个设置要小心,因为该cookie在http中是访问不到的
		3.3 可以防止cookie被劫持,一般用与session
		3.4 用的不多
	4、关键地方,只配置https,不允许http访问
		4.1 防止用户被引导到http请求中,然后输入了敏感信息
		
三、安全问题
	1、证书伪造:浏览器有提示
	2、引导到http请求,然后盗取

四、其他
	1、https请求可以被缓存
	
附录:
1、HTTPS连接的前几毫秒发生了什么
	http://blog.jobbole.com/48369/ 
2、与HTTP有什么区别?HTTPS的七个误解
	http://www.chinaz.com/web/2015/0320/391752.shtml
3、HTTPS那些事(一)HTTPS原理
	http://www.guokr.com/post/114121/
	日志转载:HTTPS那些事(二)SSL证书
	http://www.guokr.com/post/116169/
	HTTPS那些事(三)攻击实例与防御
	http://www.guokr.com/blog/148613/
		


[PHP]PSR-1/2 育网修订版介绍以及推广

整    理:吴万利

时    间:2015-11-23

说    明:代码规范

关于PSR-1/2

国内靠谱翻译psr-1
国内靠谱翻译psr-2

补充规定

如下的这些都是基于上面规定来的,只是将一些规定明确化

psr-1部分

1 概览

  • 不准使用<\?=短标签

4.2 属性

  • 属性明确规定必须按照"下划线分隔式"
  • 常用变量名
  1. $sql: sql语句
  2. $page: 分页页码
  3. $limit: 每页显示多少条
  4. $ip: 用户ip地址
  5. $dated: 当前时间
  6. $ms: mysqls操作类实例
  7. $pager: 存放分页的html代码
  8. $data: 当前页面主要的数据
  9. $user_id: 用户id
  10. $username: 用户名
  11. $nickname: 用户昵称

psr-2部分

8. [补充]字符串单引号、双引号

  • 纯字符串的时候,使用单引号
  • 字符串中有变量时,使用双引号,变量用{}包含起来。
  1. $show = "你好,{$nickname}!";

9. [补充]用die不用exit

关于CodeSniffer

Github-PHP_CodeSniffer

关于如何操作?

检查我改动的代码

  1. phpcs --standard=PSR2 [files you\'ve changed]

结果展示

  1. FILE: /opt/ci123/www/html/vshop2_dev/svn/lab/src/entity/Product.php
  2. ----------------------------------------------------------------------
  3. FOUND 2 ERRORS AFFECTING 2 LINES
  4. ----------------------------------------------------------------------
  5. 74 | ERROR | Method name "Product::get_discount" is not in camel
  6. | | caps format
  7. 84 | ERROR | Method name "Product::get_photo_url" is not in camel
  8. | | caps format
  9. ----------------------------------------------------------------------

如果没有错误就没有提示

自动修复

  1. phpcbf --standard=PSR1 --standard=PSR2 Slider.php

结果展示

  1. Changing into directory /opt/ci123/www/html/vshop2_dev/svn/lab/src/entity
  2. Processing Slider.php [PHP => 379 tokens in 45 lines]... DONE in 23ms (1 fixable violations)
  3. => Fixing file: 0/1 violations remaining [made 2 passes]... DONE in 49ms
  4. Patched 1 file
  5. Time: 124ms; Memory: 6.75Mb

实际操作步骤说明

【前端技术文档】html标签默认属性

整    理:徐秀、晋哲

时    间:2015-11-20

说    明:html标签默认可能影响布局的属性

1.页边距(<body>)

一般默认外边距为8px,根据不同浏览器有微小差别,通过设置:"margin:0;"消除。但body与其它block元素不同,它的background属性是从浏览器的左上角扩展到整个可见页面的。
重置代码: body{margin:0;}bd

2.段间距(<p>)

一般默认边距:"margin:16px;"通过重置 "margin:0;"消除。
p1

3.标题样式(<h>标签)

h标签默认加粗:"font-weight:bold;"
h标签有默认边margin和font-size。根据不同浏览器有所不同,(ps:有文字的block的文字域都有大于font-size的高度。可以通过设置line-height:1;消除。)
hp

4.列表样式 (<ul>/<ol>/<dl>)

4.1. 一般浏览器ul默认"list-style:disc;margin:16px;padding-left:40px;"
代码:ulp
4.2. 一般浏览器ol默认"list-style:decimal;margin:16px;padding-left:40px;";li的默认"display:list-item;"默认占据一行;
代码:
oli1
效果:
olp
4.3. dl/dd/dt的默认"display:block;",dl默认"margin:16px;"dd的margin-left:40px;
代码:
dli
效果:
dlp

5.表格默认属性(<table>)

table及其子元素默认属性较多,主要有如下。在布局中,我们只要重置:table{border-spacing:0;border-collapse:collapse;}【注:重置后,table自带的cellpadding、 cellspacing属性失效】
table及其子标签的display不可更改,否则可能会影响布局。
代码:tbli效果:tblp

6.输入标签默认属性(<input>/<button>/<textarea>等)

下面是webkit浏览器关于input及button的默认属性,其它浏览器有所差别,但是默认属性都不少【仅作了解,不要深究】需要注意的是input,button{display:inline-block;}
代码:
ini效果:inp

附录:

重置css代码:
body,h1,h2,h3,h4,h5,h6,p,form,ol,ul,dl,dd,fieldset{margin:0;padding:0;}
body,button,input,fieldset,select,textarea,p{font-family:Arial,"Microsoft Yahei","Hiragino Sans GB" ,"WenQuanYi Micro Hei",sans-serif;font-size:12px;}
ul,ol{list-style:none}
fieldset,img,input[type="button"],button,img{border:none;}
fieldset,button,textarea,select,input{outline:none;}
table{border-collapse:collapse;border-spacing:0}
img{-ms-interpolation-mode:bicubic;}

【前端技术文档】CSS display属性

整    理:曹燕、肖雅君

时    间:2015-11-20

说    明:CSS display属性常用的取值

 

1.定义及取值

1.1定义

display 属性规定元素应该生成的框的类型。

1.2可能取值CSS display属性59

常用取值为:

block——使元素表现为块级元素(又叫块元素)

inline——使元素表现为内联元素(又叫行内元素)

inline-block——使元素表现为内联块状元素

2.块级元素、内联元素及内联块状元素

2.1区别

(1)块级元素会独占一行,其宽度若不设置则自动填满其父元素宽度;

内联元素不会独占一行,相邻的内联元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化,处于行尾的内联元素会拆分在两行显示;

内联块状元素也不会独占一行,相邻的内联元素会排列在同一行里,直到一行排不下,才会换行,其宽度若不设置则随元素的内容而变化,处于行尾的内联块状元素会整体移到第二行显示。

(2)块级元素可以设置 width, height属性;

内联元素设置width,  height无效;

内联块状元素可以设置 width, height属性。

(3)块级元素可以设置margin 和 padding;

内联元素水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果,但竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果;

内联块状元素可以设置margin 和 padding。 

2.2常用html元素分类

块级元素:div,p,h1 -h6,hr,ol,ul,dl,form,table,pre,menu

内联元素:a,br,img,input,label,select,span,strong,b,em,i,small,cite,code,sub,sup,textarea

3.示例

3.1示例1——是否独占一行

说明:块级元素会独占一行;内联元素和内联块状元素不会独占一行,而是会排在一行中,直到排不下才会换行显示,但二者在处理行尾时略有不同。CSS display属性875 CSS display属性876

效果:CSS display属性882

3.2示例2——是否可以设置宽高

说明:块级元素和内联块状元素都可以设置宽高;内联元素不可以设置宽高。CSS display属性937 CSS display属性939

效果:CSS display属性946

3.3示例3——设置margin值

说明:块级元素和内联块状元素可以设置margin的4个方向值;内联元素只可以设置margin-left和margin-right值,上下的margin设置之后是无效的。CSS display属性1052 CSS display属性1054

效果:CSS display属性1060

3.4示例4——设置padding值

说明:块级元素和内联块状元素可以设置padding的4个方向值;内联元素只可以设置padding-left和padding-right值,上下的padding设置之后是无效的。CSS display属性1171 CSS display属性1173

效果:CSS display属性1179

3.5示例5——应用display转换元素类型

说明:通过设置display的值可以改变任意元素的类型CSS display属性1234 CSS display属性1236

效果:CSS display属性1242

jquery – 事件绑定的不同写法


编	写:袁	亮
时	间:2015-11-16
说	明:jquery事件绑定

一、作用
	1、将html显示与js动态交互分离,不在html中写一堆的onclick等js
	2、简化代码,统一处理,防止遗漏以及重复写,比如ajax请求等
	3、结构清晰,分层,html,css,js等独立
	
二、如何绑定事件
	1、bind:向匹配元素添加一个或多个事件处理器
		1.1 所有jquery版本均支持,但1.7版本后,推荐使用on
		1.2 只能对已经存在的元素进行事件绑定
		1.3 了解即可,不使用
	2、live:向当前或未来的匹配元素添加一个或多个事件处理器
		2.1 jquery 1.9版本以上,已经删除
		2.2 使用on来代替
	3、delegate:为指定的元素(被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)
		3.1 jquery 1.4以上版本支持
		3.2 1.7以下版本的时候可以考虑使用,旧项目,新项目使用不要使用
	4、on【重点】:为指定的元素,添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。使用 on() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)
		4.1 jquery 1.7以上版本支持
		4.2 尽量使用这个,不要使用其他三种绑定
		
三、简单例子
	$("选择器").on({
		click:function(){
			console.log("我是"+$(this));
			console.log("点击触发");
		},
		mouseout:function(){
			console.log("我是"+$(this));
			console.log("鼠标触发");
		}
	},"子选择器(可选)");

四、常见问题(1.72版本jquery下测试)
	1、元素后加载,事件绑定不成功
		1.1 示范代码
			<code>
			<div class="test">你好</div>
			<script type="text/javascript">
			$(function(){
				//a标签事件绑定
				$(".test a").on({
					click:function(){
						console.log("click");
					}
				});

				//后加载生成dom节点
				$(".test").prepend("<a>测试连接</a><hr>");
			});
			</script>
			</code>
		1.2 因为a标签是后加载的元素,在绑定事件的时候,dom数上还没有该元素,因此绑定失败
		
	2、解决办法1
		2.1 事件绑定在已经存在的父元素上,匹配选择器是否符合
		2.2 示例代码
			<code>
			<div class="test">你好</div>
			<script type="text/javascript">
			$(function(){
				//后加载生成dom节点
				$(".test").prepend("<a>测试连接</a><hr>");

				//a标签事件绑定
				$(".test").on({
					click:function(){
						console.log("click");
					}
				},"a");
			});
			</script>
			</code>
		2.3 优点:绑定事件与处理逻辑脱离,代码更简单易懂
		2.4 缺点:需要注意选择器必须是已经存在的节点,子选择器可以是后加载的元素,不清楚的话,可以直接绑定在document上
				iphone下,会出问题,元素需要添加cursor: pointer;样式,手机使用,不采用这个

	3、解决办法2
		3.1 在元素加载后,执行绑定函数
		3.2 实例代码
			<code>
			<div class="test">你好</div>
			<script type="text/javascript">
			$(function(){
				$(".test").prepend("<a>测试连接</a><hr>");

				$(".test a").on({
					click:function(){
						console.log("click");
					}
				});
			});
			</script>
			</code>
		3.3 优点:各种情况都兼容,不会出现绑定失败
		3.4 缺点:代码可能不是那么好看,绑定事件混在了处理逻辑中

五、使用建议
	1、使用1.7以上版本jquery,2.0以下(不兼容ie8及以下版本)
	2、绑定事件均使用on来绑定,不要使用其他的
	3、对于后加载元素,在加载完成之后进行事件绑定,避免兼容性问题

六、原理,额外拓展,dom树结构(了解即可)
	1、可以使用off来取消事件绑定
	2、可以使用.one,只绑定一次,触发之后就取消绑定
	3、页面dom数结构
	4、事件如何冒泡

附参考文档:
	1、浅谈Jquery中的bind(),live(),delegate(),on()绑定事件方式
	2、jQuery三种事件绑定方式.bind(),.live(),.delegate()