程序员便利贴
分类: Css/Html | 评论

在网页整体的设计上,通常是以人的角度最为优先。因为网页是要给人看的,但是在设计上我们也不可以忽略对于搜索引擎优化这部分,毕竟大多数的流量都是从搜索引擎导入,不论是Google、Bing(扩展阅读:Bing SEO 搜索引擎五大优化重点)或是Yahoo,都是不可或缺的流量来源。以Google来说,官方提供了关于优化网站的一些技巧,告诉你那些网页Meta标记(元标记)是Google所认同,根据这样的方向去设计网站,对搜索排名有一定的成效。 有效的对网站进行SEO优化是一件必要的事情,当然网站的架构也要随着时间的变化而变动,因为有些网页中继标记很可能已经被淘汰,如果不更新,很可能让网站获得一个不好的排名,结果可能会跟我们之前提到的Meta Keywords有一样的问题。那么我们该注意哪些网页标签呢?通常来讲,以title(标题)最为重要,再来就是description(描述),这两个影响了搜索引擎也影响了使用者的浏览判断依据。 不论是Yahoo、Google或者是Bing,绝大多数的搜索引擎都会在意title和description的属性,因为这两个元标记就是会最直接的呈现在搜索结果的页面之中,好的标题搭配好的描述,会直接影响搜索者要不要浏览这个网页的判断依据,如果要好的排名,那麽好的内容、好的标题、优化过的网站,会影响搜索引擎的排序结果。一般来讲,title标记影响了搜索结果标题,description直接影响搜索结果描述。 想要优化网站,让Google看得懂,那么别忘了根据Google在网站管理员说明中提到的资讯,将以下标记适当的加入网站,打造一个友善于Google搜索的网站。(参考资料:Google网站管理员工具说明-元标记) title 网页标题 <title>网页标题</title> 相信这标籤应该是每一个网页都会加入的标记,如果没有加入,网页标题肯定是很奇怪的。通常会忽视网页标题的网页应该只有传统的Frontpage或是框架网页了。早期网页都是纯静态网页居多,大多数人都以网页可以看的方向制作网页,却往往忽略了这项关键因素。如果网页有缺title,别忘了补回去啊! description 网页说明 <meta name=”description” content=”网页说明” /> 如同前面所提到,网页的描述直接影响了搜索结果上的文字,基本上目前的Google、Bing(Yahoo)都有採计这一项标记,有效的引言可以吸引访客直接浏览你的网站。字数不宜过多,但是要精准命中。 Content-Type 网页编码 <meta http-equiv=”Content-Type” content=”….; charset=…” /> 不论网站是否有好于Google或是哪个搜索引擎,这个标签一定要加入,如果不加入很容易让浏览器使用预设语系去判断网页,容易造成乱码问题。补充,乱码问题还可能是网页档桉没有正确地调整到UTF-8编码才造成的问题。 robots 元标记 <meta name=”robots” content=”…, …” /> <meta name=”googlebot” content=”…, …”/> 这个元标记主要是针对搜索引擎收录的一些规则,不过对于暴力搜索百度来讲应该是没有用的。对于正规的搜索引擎来讲,这些标记基本上都是被承认的。上面的「…」可以替换成以下标记。 1.noindex:阻止搜索引擎为网页建立索引。 2.nofollow:阻止 Googlebot 使用此网页上的连结。 3.nosnippet:阻止在搜索结果中显示某些文字片段。 4.noodp:阻止使用来自 ODP/DMOZ 的替代说明。 5.noarchive:阻止 Google 显示网页的快照链接。 6.unavailable_after:[date]:用来指定想要停止检索网页及建立网页索引的时间和日期。 4.noimageindex:用来指定不让 Google 图片搜索结果推荐您的网页。 用canonical标签取代noindex(排除网页重复) 在Google说明上提到,如果你要使用noindex标签来禁止网页搜索是可以的,但是如果要使用noindex来避免网页重複收录的问题是不建议的。那该怎么解决避免网页重复收录的问题呢?Google建议大家可以改用canonical标签进行处理,另外也可以调整搜索频率来避免重複搜索网站内容造成流量异常。 [...]

分类: Css/Html | 评论
http Status

基本涵盖了所有问题 HTTP 400 – 请求无效 HTTP 401.1 – 未授权:登录失败 HTTP 401.2 – 未授权:服务器配置问题导致登录失败 HTTP 401.3 – ACL 禁止访问资源 HTTP 401.4 – 未授权:授权被筛选器拒绝 HTTP 401.5 – 未授权:ISAPI 或 CGI 授权失败 HTTP 403 – 禁止访问 HTTP 403 – 对 Internet 服务管理器 的访问仅限于 Localhost HTTP 403.1 禁止访问:禁止可执行访问 HTTP 403.2 – 禁止访问:禁止读访问 HTTP 403.3 – 禁止访问:禁止写访问 HTTP 403.4 – [...]

分类: Css/Html | 评论
0_1328275634U11O

1.一些枯燥的概念: Http定义了与服务器交互的不同方法,最基本的方法有4种,分别是GET,POST,PUT,DELETE。 URL全称是资源描述符,我们可以这样认为:一个URL地址,它用于描述一个网络上的资源,而HTTP中的GET,POST,PUT,DELETE就对应着对这个资源的查 ,改 ,增 ,删 4个操作。GET一般用于获取/查询资源信息,而POST一般用于更新资源信息。 2.GET是幂等的,POST是要修改更新的 通过上面概念的理解,我们很容易发现,GET是用于信息获取或查询的,这就意味着它是幂等的,POST可能会改变服务器上的资源请求。 这样一说有点抽象了,网上有一个我认为比较合理的例子就是新闻站点的例子:例子如下:get方式—新闻站点的头版不断更新。虽然第二次请求会返回不同的一批新闻,该操作仍然被认为是幂等的,因为它总是返回当前的新闻。从根本上说,如果目标是当用户打开一个链接时,他可以确信从自身的角度来看没有改变资源即可;post方式–读者对新闻发表自己的评论应该通过POST实现,因为在评论提交后站点的资源已经不同了,或者说资源被修改了。仔细考虑一下这个例子就能明白GET是幂等的而POST是要修改更新的了。 3.通过实例了解post和get的http请求过程 通过上面的分析,已经对GET和POST有所了解,也能感觉到他俩有着本质上的区别就是一个是拿来,一个是要更新修改。 下面就通过HTTPLOOK软件来看看他们是怎样进行HTPP请求的,它们到底是怎样进行传输的。 首先建立两个jsp页面用来测试: 第一个页面是post_get_jsp(代码如下): 第二个页面是test.jsp(代码如下): ddfdgdg 简单说一下http请求: 在HTTP请求中,第一行必须是一个请求行(request line),用来说明请求类型、要访问的资源以及使用的HTTP版本。紧接着是一个首部(header)小节,用来说明服务器要使用的附加信息。在首部之后是一个空行,再此之后可以添加任意的其他数据。 开始测试post提交 http请求如下: 开始测试get提交 http请求如下: 4.POST与GET区别 ①. GET一般用于获取/查询资源信息,而POST一般用于更新资源信息。 ②. 从上面的http请求中就能看出,GET提交是将请求的数据附加到URL之后,用?分割、参数用&连接。并且字符串已经被加密。而post的提交是放到了http包中。从这点看来GET请求的地址栏会改变,RUL附加上了请求的数据,而POST地址栏不会改变,UTL没有变化。更加深一层看GET的安全性不高,很容易暴露信息。 ③. 另外虽然http协议没有对传输数据大小进行限制也没有对url长度进行限制,但是实际情况中浏览器对url进行限制,这样GET的传输数据大小随着URL长度被限制而受到限制。反观POST由于不是通过URL传值,所以没有限制。

首先定义一个可以进行全选和反选的checkbox: Html代码 当然,下面会有很多的checkbox需要进行操作,采用下面的方式: Html代码 正如你若看到的,它们的name属性是一样的。 写几个js方法进行操作: Javascript代码 /***** 全选和反选 *****/ function checkAll(obj) { var boxs = document.getElementsByName(‘indexed’); if(obj.checked) { for(var i=0; i

分类: Css/Html | 评论

为了实现各种绚丽的效果,你的网站是否调用了众多的Ajax库呢?尽管这样做能是你的网站增色不少,但几十K的Ajax库也会让你的网站丢失速度。既然如此,那我们到底是要速度还是要特效呢?   今天就大家介绍一个两全其美的办法。   一般的网站都只是调用各种Ajax库,并不用对其内容进行修改,所以我们可以借助第三方服务器上的Ajax库。Google Code就给我们提供了各种Ajax库的托管链接,我们可以直接调用这些链接而不用把整个库上传到主机,大大减少主机的压力,对于速度较慢的主机效果很明显哦。当然,如果你的主机足够强劲以至于能和Google媲美的话,我建议还是把库放在自己主机上。   这里给大家整理在Google托管的各种Ajax库,大家也可以到看看详细信息。 注:每个版本的两个链接中,第一个是压缩版的,第二个是完全版,可用于二次开发。建议调用时使用压缩版,体积减小很多,但没有功能阉割。 jQuery 1.3.1 http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.js 1.3.0 http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.js 1.2.6 http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js 1.2.3 http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.js jQuery UI (此库依赖于jQuery。载入jQuery UI模块需先载入之前jQuery模块。) 1.5.3 http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.js 1.5.2 http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.2/jquery-ui.min.js http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.2/jquery-ui.js MooTools 1.2.1 http://ajax.googleapis.com/ajax/libs/mootools/1.2.1/mootools-yui-compressed.js http://ajax.googleapis.com/ajax/libs/mootools/1.2.1/mootools.js 1.11 http://ajax.googleapis.com/ajax/libs/mootools/1.11/mootools-yui-compressed.js http://ajax.googleapis.com/ajax/libs/mootools/1.11/mootools.js Prototype 1.6.0.3 http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js 1.6.0.2 http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js script.aculo.us 注:此库依赖于Prototype。载入script.aculo.us模块需先载入之前Prototype模块。 1.8.2 http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.2/scriptaculous.js 1.8.1 http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.1/scriptaculous.js dojo 1.2.3 http://ajax.googleapis.com/ajax/libs/dojo/1.2.3/dojo/dojo.xd.js http://ajax.googleapis.com/ajax/libs/dojo/1.2.3/dojo/dojo.xd.js.uncompressed.js 1.2.0 http://ajax.googleapis.com/ajax/libs/dojo/1.2.0/dojo/dojo.xd.js http://ajax.googleapis.com/ajax/libs/dojo/1.2.0/dojo/dojo.xd.js.uncompressed.js 1.1.1 [...]

分类: Css/Html | 评论

这篇对HTML5的本次存储方式进行了非常全面的介绍和分析,对于学习HTML5的开发者来说,不容错过哦。 历史 在HTML5本地存储之前,如果我们想在客户端保存持久化数据,有这么几个选择: HTTP cookie。HTTP cookie的缺点很明显,最多只能存储4KB的数据,每个HTTP请求都会被传送回服务器,明文传输(除非你使用SSL)。 IE userData。userData是微软在上世纪90年代的浏览器大战时推出的本地存储方案,借助DHTML的behaviour属性来存储本地数据, 允许每个页面最多存储64K数据,每个站点最多640K数据,userData的缺点显而易见,它不是Web标准的一部分,除非你的程序只需要支持IE, 否则它基本没什么用处。 Flash cookie。Flash cookie的名字有些误导,它实际上和HTTP cookie并不是一回事,或许它的名字应该叫做”Flash本地存储”,Flash cookie默认允许每个站点存储不超过100K的数据,如果超出了,Flash会自动向用户请求更大的存储空间,借助Flash的 ExternalInterface接口,你可以很轻松地通过Javascript操作Flash的本地存储。Flash的问题很简单,就是因为它是 Flash。 Google Gears。Gears是Google在07年发布的一个开源浏览器插件,旨在改进各大浏览器的兼容性,Gears内置了一个基于SQLite的嵌入式 SQL数据库,并提供了统一API对数据库进行访问,在取得用户授权之后,每个站点可以在SQL数据库中存储不限大小的数据,Gears的问题就是 Google自己都已经不用它了。 现状 我们现在通常所说的HTML5本地存储,一般指的是Web Storage规范,这个标准曾经是HTML5规范的一部分,但后来因为种种原因从HTML5规范中分离了出来。但是除了Web Storage,HTML5的本地存储标准还有另外2个竞争者:Web SQL Database和IndexedDB。下面就让我们依次来看看这3个规范吧。 Web Storage Web Storage是目前得到支持最广泛的HTML5本地存储规范:IE 8+、FF 3.5+、Safari 4+、Chrome 4+、Opera 10.5+,以及iPhone 2+和Android 2+都已经支持Web Storage,要判断你的浏览器是否支持Web Storage,可以使用下面这个函数: function supports_html5_storage() { try { return ‘localStorage’ in window && window['localStorage'] !== null; } catch [...]

分类: Css/Html | 评论

网页编辑中涉及到的各种颜色的16进制的的代码对应表   #000000   #2F0000   #600030   #460046   #28004D   #272727   #4D0000   #820041   #5E005E   #3A006F   #3C3C3C   #600000   #9F0050   #750075   #4B0091   #4F4F4F   #750000   #BF0060   #930093   #5B00AE   #5B5B5B   #930000   #D9006C   #AE00AE   #6F00D2   #6C6C6C   #AE0000 [...]

分类: Css/Html | 评论
引文不换行

Div层中英文不换行撑破版面 如图 那么如何使连续长字段自动换行呢?可以通过以下两个css属性来解决: 第一种:word-wrap:break-word;//内容将在边界内换行 第二种:word-break:break-all;//内容在词内换行

1,防止粘贴如表单,只能自己手动输入: 2,只能输入数字和英文字母:

分类: Css/Html | 评论

IE的有条件注释是一种专有的(因此是非标准的)、对常规(X)HTML注释的Miscrosoft扩展。顾名思义,有条件注释使你能够根据条件(比如浏览器版本)显示代码块(不一定就是css,也可以是html代码,甚至是JavaScript代码)。尽管是非标准的,但是有条件注释对于其他所有浏览器作为常规注释出现,因此本质上是无害的。有条件注释在Windows上的IE5中首次出现,并且得到了Widnows浏览器所有后续版本的支持。 IE的有条件注释是一种专有的(因此是非标准的)、对常规(X)HTML注释的Miscrosoft扩展。顾名思义,有条件注释使你能够根据条件(比如浏览器版本)显示代码块。尽管是非标准的,但是有条件注释对于其他所有浏览器作为常规注释出现,因此本质上是无害的。有条件注释在Windows上的IE5中首次出现,并且得到了Widnows浏览器所有后续版本的支持。 IE的有条件注释及其有效,而且非常容易记住。主要的缺点是这些注释需要放在HTML页面中,而不是放在CSS中。这样,当你不需要这些东西,或者有所更改的时候,就需要维护很多的地方。 让我们据几个例子来看看吧—— 只有IE才能识别 因为只有IE5以上的版本才开始支持IE条件注释,所有“只有IE”才能识别的意思是“只有IE5版本以上”才能识别。 只有特定版本才能识别 例如,只有IE5才能识别,只有IE6才能识别,只有IE7或者IE8才能识别。识别的条件是特定的版本,高了或者低了都不可以。例如下面的代码块,将只会在IE8中有效 只有不是特定版本的才能识别 当然,IE浏览器需要在5以上的版本,才在讨论范围之内。例如下面的例子中,特定了IE7版本不能识别。 只有高于特定版本才能识别 只有高于制定版本的IE浏览器才能识别的代码块。 有朋友会问,为什么IE7没有应用到效果呢?那是因为IE7等于IE7,而不是高于IE7。所有IE7也没有起效果。 等于或者高于特定版本才能识别 只有低于特定版本的才能识别 等于或者低于特定版本的才能识别 关键词解释 上面那些代码好像很难记的样子,其实只要稍微解释一下关键字就很容易记住了。 lt :就是Less than的简写,也就是小于的意思。 lte :就是Less than or equal to的简写,也就是小于或等于的意思。 gt :就是Greater than的简写,也就是大于的意思。 gte:就是Greater than or equal to的简写,也就是大于或等于的意思。 !:就是不等于的意思,跟javascript里的不等于判断符相同。 这样解释一下,是不是好记多了。 关于IE条件注释的特别说明 只有IE才能识别哦—— 曾经看到过下面的代码,现在想起来不禁有点想笑。这样的代码有什么意义吗? 不仅仅是CSS哦—— 很长时间,我对这个都有一种误解——以为它就是用来根据浏览器不同载入不同css,从而解决样式兼容性问题的。其实,我错了。它其实可以做的更多。它可以保护任何代码块——HTML代码块、JavaScript代码块、服务器端代码……看看下面的代码。