最近做网站为了网站的兼容性,用到了IE注释,主要是因为不想在CSS中使用CSS Hack了。顺便说一句,IE6 must died.
<!--[if IE]>这是Internet Explorer< ![endif]-->
<!--[if IE 5]>这是Internet Explorer 5< ![endif]-->
<!--[if IE 7]>这是Internet Explorer 7< ![endif]-->
<!--[if gte IE 5]>这是Internet Explorer 5 或者更高< ![endif]-->
<!--[if lt IE 6]>这是版小于6的Internet Explorer< ![endif]-->
<!--[if lte IE 5.5]>这是Internet Explorer 5.5或更低< ![endif]-->
注意两个特殊的语法:
gt: 大于
lte: 小于或等于
!IE 感叹号的使用
最近的状态
最近有一篇文章 只关注首个搜索结果,掩盖了 Google 搜索相关性的问题
只是对里面关于垃圾链接也能让页面排名很好比较认同。这一点也是对google很不满地方吧,nofollow不传递权重,但是你有足够的这些链接仍然是对网站的权重有很大提高的。至少目前看来是这样的,和实际的经验也是一致的。无所谓什么页面只要反链多总是可以排在前面,这句话很多人都不认同,但我至今也没有得到比较信服的答案,况且实际情况也正是这样的。
最近每天晚上加班都不怎么舒服了,网速很卡,有人看电影,有人唱歌。喜欢安静的环境,但下班时间是别人的自由的空间。半个月的工作成绩,显现的很微观,一些关键词排名很稳定的在后面。时间久了大家的热情也逐渐散去,反链的建设,耐心和认真是很重要的,但这往往很难都做到。现在想,还是一个人时轻松。
还有最近有什么员工互评制度,心里很为难,我想给自己打100分。
正则表达式
正则表达式简单的规则:
形式 | 字符范围 |
\xXX | 编号在 0 ~ 255 范围的字符,比如:空格可以使用 “\x20” 表示 |
\uXXXX | 任何字符可以使用 “\u” 再加上其编号的4位十六进制数表示,比如:“\u4E2D” |
在表达式 “\s”,”\d”,”\w”,”\b” 表示特殊意义的同时,对应的大写字母表示相反的意义
<table style="border-collapse: collapse;" bgcolor="#f8f8f8" border="1" cellpadding="3" cellspacing="0">
<tbody><tr bgcolor="#f0f0f0">
<td width="55">
表达式
可匹配
\S
\D
\W
\B
匹配非单词边界,即左右两边都是 “\w” 范围或者左右两边都不是 “\w” 范围时的字符缝隙
在表达式中有特殊意义,需要添加 “\” 才能匹配该字符本身的字符汇总
<table style="border-collapse: collapse;" bgcolor="#f8f8f8" border="1" cellpadding="3" cellspacing="0">
<tbody><tr bgcolor="#f0f0f0">
<td width="55">
字符
说明
^
匹配输入字符串的开始位置。要匹配 “^” 字符本身,请使用 “\^”
$
匹配输入字符串的结尾位置。要匹配 “$” 字符本身,请使用 “\$”
( )
标记一个子表达式的开始和结束位置。要匹配小括号,请使用 “(“ 和 “)“
[ ]
用来自定义能够匹配 ‘多种字符’ 的表达式。要匹配中括号,请使用 “[“ 和 “]“
{ }
修饰匹配次数的符号。要匹配大括号,请使用 “{“ 和 “}“
.
匹配除了换行符(\n)以外的任意一个字符。要匹配小数点本身,请使用 “.“
?
修饰匹配次数为 0 次或 1 次。要匹配 “?” 字符本身,请使用 “\?”
+
修饰匹配次数为至少 1 次。要匹配 “+” 字符本身,请使用 “+“
*
修饰匹配次数为 0 次或任意次。要匹配 ““ 字符本身,请使用 “\“
|
左右两边表达式之间 “或” 关系。匹配 “|” 本身,请使用 “|“
括号 “( )” 内的子表达式,如果希望匹配结果不进行记录供以后使用,可以使用 “(?:xxxxx)” 格式
举例1:表达式 “(?:(\w)\1)+“ 匹配 “a bbccdd efg” 时,结果是 “bbccdd”。括号 “(?:)” 范围的匹配结果不进行记录,因此 “(\w)” 使用 “\1” 来引用。
参考网站:
新增apache虚拟目录
设置Apache的根目录很简单,但只设置一个根目录是远远不够的,有时我们会有很多程序要调试,都放在根目录是不合适的,所以要工apache下建立虚拟目录。下面我自己电脑上建的虚拟目录。打开apache
的httpd.conf
文件,在最下面增加下面代码就行了。主要就是设置一个别名,和你程序放在的目录。
1 | Alias /sme/ "F:/WebSite/stonecrushermachine.net/" |
设置好之后在浏览器中打开 http://localhost/sme/
就成功了。
转载翻译优化浏览器渲染
关于CSS代码的书写,今天在网上看到一篇很优秀的博文,特此分享。
ISD Webteam的大布同学(twitter:@tc_bryanzhang)牺牲了自己大量的xx时间翻译了Page Speed系列中的Optimize browser rendering,因其blog还在重新打造当中,所以偶这里先转载了,以下是翻译全文:
优化浏览器渲染
资源被下载到客户端后,浏览器仍需加载,解释,并渲染HTML、CSS和Javascript代码。只需利用现有浏览器的特性简单地编排你的代码和页面,就可以提升客户端的性能。
使用高效率的CSS选择器
概述
避免低效率的匹配大量元素的键选择器【key selectors】可以加快页面渲染。
详细信息
当浏览器解析HTML时首先构造一个内部文件树来代表所有显示的元素。然后浏览器根据标准的CSS级联、继承和排序规则,为元素指定匹配的各种样
式。在Mozilla里的执行情况(可能在其他浏览器也是这样),CSS搜索引擎通过样式规则为每个元素找到匹配的样式。该引擎由右至左评估每个规则,从
最右边的选择器开始(称为“键”【Key】),并通过移动每个选择器,直到找到一个匹配或丢弃的规则。(“选择器”是应用规则的文档元素。)
基于此原则,引擎要评估的规则越少越好。所以提高渲染性能的重要一步就是删除未使用的CSS。在此之后,对包含大量的元素和/或CSS规则的页面来说,优化规则本身的定义就能够提高性能。优化规则的关键在于尽可能具体定义规则,并避免不必要的重复,让样式引擎快速找到匹配的规则,而不用花费时间查找不适用的规则。
下列各类规则被认为是低效的:
后代选择器的规则
例如:
通配选择器作为键的规则
1 | body * {...} |
标签选择器作为键的规则
1 | ul li a {...} |
后代选择器是低效的,因为对于每个与键相匹配的元素,浏览器必须遍历DOM树,评估每一个祖先元素,直到找到一个匹配或到达根元素。键越不具体,需要进行评估的节点数量就越大。
子代选择器和相邻选择器的规则
例如:
通配选择器作为键的规则
1 | body > * {...} |
标签选择器作为键的规则
1 | ul > li > a {...} |
子代选择器和相邻选择器是低效的,因为对每个匹配的元素,浏览器必须评估另一个节点。这样导致规则中的每个子选择器加倍消耗。同样,键越不具体,需要进行评估的节点数量就越大。尽管如此,虽然同样效率低下,在性能方面相对后代选择器而言,它们仍然是可取的。
有多余修饰的规则
例如:
1 | ul#top_blue_nav {...} |
ID选择是唯一的定义。加上标签或类的限制只增加了多余的、引起不必要评估的信息。
对非链接元素应用:hover
伪选择器的规则
例如:
1 | h3:hover {...} |
非链接元素上的:hover伪选择器在某些情况下*会使IE 7 和IE 8 变慢。当页面没有一个严格的doctype时,IE 7 和IE 8 将忽略除了链接外的任何元素的:hover
。当页面有严格的doctype,在非链接元素上的:hover
将导致性能下降。
*查看bug报告http://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=391387。
建议
避免通配选择器。
允许元素继承祖先的样式,或者使用一个类来给多个元素应用样式。
使您的规则尽可能具体。
尽量使用class和ID选择器而非标签选择器。
删除多余的修饰语。
这些修饰语是多余的:
ID选择器被class选择器和/或者标签选择器限制。
class选择器被标签选择器限制(当一个类只是用于一个标签,无论如何这都是一个很好的设计实践)。
避免使用后代选择器,特别是那些指定多余祖先的。
例如,这一个规则 body ul li a {...}
指定了一个多余的body选择器, 因为所有的元素都是body标签的后代。
使用class选择器代替后代选择器。
例如,如果您需要有序列表项和无序列表项有不同的两个样式,而不是使用两个规则:
1 | ul li {color: blue;} |
你可以将样式编码成两个类名并在规则中使用,例如:
1 | .unordered-list-item {color: blue;} |
如果您必须使用后代选择器,尽量使用子代选择器,这最少只需评估一个额外的节点,而非中间直至祖先的所有节点。
在IE中避免对非链接元素应用:hover。
如果您对非链接元素应用:hover,请在IE7和IE8中测试并确保页面可用。如果您发现:hover导致性能问题,可以考虑条件性的为IE使用JavaScript onmouseover事件(只对IE写mouseover事件)。
附加资源
更多关于Mozilla里的高效CSS规则的细节,请看https://developer.mozilla.org/en/Writing_Efficient_CSS。
有关CSS的完整信息,请看Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification。有关CSS选择器的资料,请看Chapter 5。
避免CSS expressions
概述
CSS表达式会降低浏览器的渲染性能;用其他方案替换它们将会改善IE浏览器的渲染性能。
注意:本节最佳实践只适用于Internet Explorer 5到7,它们支持CSS表达式。Internet Explorer 8放弃使用CSS表达式,而其他浏览器是不支持的。
详细信息
作为一种动态改变文档属性来响应各种事件的的手段,Internet Explorer 5引入了CSS表达式或 “动态属性”。它们由在CSS声明中的CSS属性值里嵌入JavaScript表达式构成。在大多数情况下,它们用于以下目的:
模拟其他浏览器支持但IE浏览器尚未支持的标准CSS属性。
使用比编写全面JavaScript注入式样式更小巧,更便捷的方法,来提供动态样式和高级的事件处理。
不幸的是,CSS表达式对于性能的不良影响是相当大的,因为每当有事件触发,浏览器都要重新计算每个表达式,如一个窗口改变大小,鼠标移动等。
CSS表达式的低性能表现是IE 8弃用它们的原因之一。如果你在网页里使用CSS表达式,应该尽一切努力来消除它们并且使用其他方法来达到同样的功能。
建议
尽可能使用标准的CSS属性。
IE 8已高度兼容标准CSS;IE
8只有在“兼容”模式才支持运行CSS表达式,而在“标准”模式下则不支持。如果你不需要向后兼容旧版本的IE,你应该转换成标准的CSS属性来替换所有
对应的CSS表达式。如需CSS属性和支持它们的IE版本的完整列表,请参见MSDN的CSS属性索引。如果你确实需要支持所需CSS属性不可用的旧版本IE浏览器,请使用JavaScript来实现等效的功能。
使用JavaScript脚本样式。
如果你正在使用CSS表达式来实现动态样式,用纯JavaScript重写它们是很有意义的,因为这样既能提高IE性能,同时在其他浏览器获得相同效果的支持。在这个由MSDN动态属性页提供的例子里,下面的CSS表达式用于在浏览器里居中一个HTML块元素,并且该元素的尺寸可以在运行时改变,每次调整窗口大小都能重新定位在浏览器中心:
1 | <div id="oDiv" style="background-color: #CFCFCF; position: absolute; |
下面是一个使用JavaScript和标准CSS的等价例子:
1 | <style> |
如果您使用CSS表达式来模拟早期IE版本中不可用的CSS属性,你应该提供版本测试的javascript代码,为支持CSS的浏览器禁止CSS
表达式。举例来说,max-width属性,这个属性在一定数量的像素范围内强制文本换行,在IE
7前是不支持的。下面的CSS表达式作为一种解决方法,为IE 5和6提供了这个功能:
1 | p { width: expression( document.body.clientWidth > 600 ? "600px" : "auto" ); } |
为不支持此属性的IE浏览器版本使用等价的JavaScript替换CSS表达式,可以使用类似于下面的内容:
1 | <style> |
将样式放在页面头部
概述
将内联样式块和<link>
元素从页面<body>
移动到页面<head>
中,这样能提高渲染性能。
详细信息
在HTML文件<body>
中指定外部样式表和内联样式块可能对浏览器的渲染性能产生不利影响。浏览器阻塞渲染网页直到所有外部的样式表都已被下载。(用<style>
标记指定的)内联样式块可能会导致reflows和页面跳动。因此,把外部样式表和内联样式块放在页面的<head>
中是很重要的。通过确保样式表首先被下载和解析,可以让浏览器逐步渲染页面
建议
HTML 4.01规范(第12.3节)规定,始终把使用<link>
标签的外部样式表放在<head>
部分里。不要使用@import
。还要确保您指定的样式有正确的顺序。
把<style>
区块放在<head>
部分里。
指定图片尺寸
概述
为页面中所有图片指定宽度和高度可以消除不必要的reflows和重新绘制页面【repaints】,使页面渲染速度更快。
详细信息
当浏览器勾画页面时,它需要能够流动的,如图片这样的可替换的元素。提供了图片尺寸,浏览器知道去环绕附近的不可替换元素,甚至可以在图片下载之前
开始渲染页面。如果没有指定的图片尺寸,或者如果指定的尺寸不符合图片的实际尺寸,一旦图片下载,浏览器将需要reflows和重新绘制页面。为了防止
reflows,在HTML的<img>
标签中或在CSS中为所有图片指定宽度和高度。
建议
指定与图片本身相一致的尺寸
不要使用非图片原始尺寸来缩放图片。如果一个图片文件实际上的大小是60×60像素,不要在HTML或CSS里设置尺寸为30×30像素。如果图片需要较小的尺寸,在图像编辑软件中,设置成相一致的尺寸(详见优化图像。)
一定要指定图片或它的块级父元素的尺寸
一定要设置<img>
元素本身,或它的块级父元素的尺寸。如果父元素不是块级元素,尺寸将被忽略。不要在一个非最近父元素的祖先元素上设置尺寸。
注:浏览器为了重新渲染部分或整个页面,重新计算页面元素位置和几何结构的进程叫做reflow
—————–分界线————–
个人觉得这里面还是有很多问题值得探讨,依这个文章很多大公司网站的CSS代码写的都很有问题。以后慢慢改进吧。
php获取当前页面的url
PHP获取当前URL,这是我在网上找到的一段代码。写的很好,自己修改了下。
1 | <?php |
最后就可以使用 get_current_url()
获取当前页面的URL了
简单的弹出框脚本:TinyBox-不使用JQuery
TinyBox 是一个轻量级并且独立的弹出窗口脚本,该脚本只有 3.94KB,虽然只有很简单的功能,但可以显示任何的 AJAX 和 HTML 内容,还支持图片,并且能够自动隐藏,你可以通过修改 CSS 来定制样式的效果。TinyBox 已经在 Firefox 2/3, IE 6/7/8, Opera, Safari 和 Chrome 中测试过。使用 TinyBox 非常简单,通过一下代码即可:
1 | TINY.box.show('advanced.html',1,300,150,1,3) |
它一共有6个参数,第一个是要显示的 AJAX 或 HTML 内容。第二个是设置是否为 AJAX。第三个是宽度,0 为自动。第四个是高度,0 为自动。第五个是是否设置隐藏,第六个则是设置是否自动隐藏的时间。
防止其它网址解析到你的ip
刚做的新站http://www.smecrusher.com 昨天google site的时候终于出现首页了,然后打开快照看,竟然是imynow.cn这个站的,之后又site这个站,竟然是个垃圾站,难怪我的站一直不收录首页。别人解析到我的网站应该对我的站没什么损害的,但实际好像不是这样的,主要是因为它是个垃圾站吧。今天在网上找了个方法,把那个网址给301重定向了。Options +FollowSymLinks RewriteEngine on RewriteCond %{HTTP_HOST} ^imynow.cn$ [OR] RewriteCond %{HTTP_HOST} ^www.imynow.cn$ RewriteRule ^(.*)$ http://www.gov.cn/$1 [R=301,L]
其它网站调用wordpress日志列表
最近工作遇到调用blog里的内容,一般博客都是用wordpress建的,调用的时候会有两种情况,一种博客在同一个站点,一种不在同一个站点,比如二级域名。
同一个站点的话比较简单:
1 | <?php |
不在一个站点
不在同一站点的情况下,网上流传的方法是用了一款名为Ecall的插件,这个插件是JS调用的,不利于SEO。
一种方法是使用同一站点的方法,在博客根目录中新建blog_call.php文件,内容同站点中给出的代码,然后在需要调用的站点使用file读取
1 | <?php |
另一种方法是读取博客RSS的方式,下面这段PHP读取RSS的代码在网上流传已久,但是很多朋友不知道,其实它是可以用在WP外部调用上的··
1 | <?php |
这两种方法都是要求使用调用的站点支持PHP,如果不支持PHP而支持ASP的话可以用方法一,把读取blog_call.php的PHP代码用ASP重写一遍,但是如果是静态空间就只能装插件来实现了。
同域名下不同Wordpress间文章调用
1 | <?php |
PS:JS调用可以采用Feed to JS来实现。