leadscloud

秋天里的蚊子很恼人，即使十月已经很凉了，可它还是很猖狂。好久没有写日志了，感觉最近实在是太忙了，其实每天的工作都是很重复的，没有变化。想写什么，心中有很多却无从下笔，没有耐心了吧，也没有那个心情了。夏天已经过去，假期终于到来了，我却还在这儿加班，生活永远不是你所想的那个样子，它总会有很多的意外。

关于工作，现在比过去好多了，至少没有刚开始的那些迷茫和不知所措了，一切经历了一段时间，总会可以克服那些困难的，如今看来那小小的困难在当时也挺要命的。应该九月才是正式的开始，现在好像都好起来了，值得欣慰，可我想要的应该比这更好些，恩，我应该可以做的更好些，不满足于目前的状态。

十月，仍旧是要在前进的脚步中。。。

最近做网站为了网站的兼容性，用到了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 感叹号的使用

正则表达式简单的规则：

在表达式 “\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

匹配所有非空白字符（”\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” 来引用。

参考网站：

http://deerchao.net/tutorials/regex/regex.htm

http://www.regexlab.com/zh/regref.htm

设置Apache的根目录很简单，但只设置一个根目录是远远不够的，有时我们会有很多程序要调试，都放在根目录是不合适的，所以要工apache下建立虚拟目录。下面我自己电脑上建的虚拟目录。打开apache的httpd.conf文件，在最下面增加下面代码就行了。主要就是设置一个别名，和你程序放在的目录。

1
2
3
4
5
6
7

Alias /sme/ "F:/WebSite/stonecrushermachine.net/"
<Directory "F:/WebSite/stonecrushermachine.net/">
    Options Indexes FollowSymLinks
    AllowOverride None
    Order allow,deny
    Allow from all
</Directory>

设置好之后在浏览器中打开 http://localhost/sme/ 就成功了。

关于CSS代码的书写，今天在网上看到一篇很优秀的博文，特此分享。

ISD Webteam的大布同学（twitter：@tc_bryanzhang）牺牲了自己大量的xx时间翻译了Page Speed系列中的Optimize browser rendering，因其blog还在重新打造当中，所以偶这里先转载了，以下是翻译全文：

优化浏览器渲染

资源被下载到客户端后，浏览器仍需加载，解释，并渲染HTML、CSS和Javascript代码。只需利用现有浏览器的特性简单地编排你的代码和页面，就可以提升客户端的性能。

1. 使用高效率的CSS选择器
2. 避免CSS expressions
3. 将样式表放在页面顶部
4. 指定图像尺寸

使用高效率的CSS选择器

概述

避免低效率的匹配大量元素的键选择器【key selectors】可以加快页面渲染。

详细信息

当浏览器解析HTML时首先构造一个内部文件树来代表所有显示的元素。然后浏览器根据标准的CSS级联、继承和排序规则，为元素指定匹配的各种样
式。在Mozilla里的执行情况(可能在其他浏览器也是这样)，CSS搜索引擎通过样式规则为每个元素找到匹配的样式。该引擎由右至左评估每个规则，从
最右边的选择器开始（称为“键”【Key】），并通过移动每个选择器，直到找到一个匹配或丢弃的规则。（“选择器”是应用规则的文档元素。）

基于此原则，引擎要评估的规则越少越好。所以提高渲染性能的重要一步就是删除未使用的CSS。在此之后，对包含大量的元素和/或CSS规则的页面来说，优化规则本身的定义就能够提高性能。优化规则的关键在于尽可能具体定义规则，并避免不必要的重复，让样式引擎快速找到匹配的规则,而不用花费时间查找不适用的规则。

下列各类规则被认为是低效的：

后代选择器的规则

例如：

通配选择器作为键的规则

1
2

body * {...}
.hide-scrollbars * {...}

标签选择器作为键的规则

1
2
3

ul li a {...}
#footer h3 {...}
* html #atticPromo ul li a {...}

后代选择器是低效的，因为对于每个与键相匹配的元素，浏览器必须遍历DOM树，评估每一个祖先元素，直到找到一个匹配或到达根元素。键越不具体，需要进行评估的节点数量就越大。

子代选择器和相邻选择器的规则

例如：

通配选择器作为键的规则

1
2

body > * {...}
.hide-scrollbars > * {...}

标签选择器作为键的规则

1
2

ul > li > a {...}
#footer > h3 {...}

子代选择器和相邻选择器是低效的，因为对每个匹配的元素，浏览器必须评估另一个节点。这样导致规则中的每个子选择器加倍消耗。同样，键越不具体，需要进行评估的节点数量就越大。尽管如此，虽然同样效率低下，在性能方面相对后代选择器而言，它们仍然是可取的。

有多余修饰的规则

例如：

1
2

ul#top_blue_nav {...}
form#UserLogin {...}

ID选择是唯一的定义。加上标签或类的限制只增加了多余的、引起不必要评估的信息。

对非链接元素应用:hover伪选择器的规则

例如：

1
2
3
4

h3:hover {...}
.foo:hover {...}
#foo:hover {...}
div.faa: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
2

ul li {color: blue;}
ol li {color: red;}

你可以将样式编码成两个类名并在规则中使用，例如：

1
2

.unordered-list-item {color: blue;}
.ordered-list-item {color: red;}

如果您必须使用后代选择器，尽量使用子代选择器，这最少只需评估一个额外的节点，而非中间直至祖先的所有节点。

在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。

Back to top

避免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
2
3

<div id="oDiv" style="background-color: #CFCFCF; position: absolute;
left:expression(document.body.clientWidth/2-oDiv.offsetWidth/2);
top:expression(document.body.clientHeight/2-oDiv.offsetHeight/2)">Example DIV</div>

下面是一个使用JavaScript和标准CSS的等价例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<style>
  #oDiv { position: absolute; background-color: #CFCFCF;}
</style>

<script type="text/javascript">
 // Check for browser support of event handling capability
  if (window.addEventListener) {
  window.addEventListener("load", centerDiv, false);
 window.addEventListener("resize", centerDiv, false);
  } else if (window.attachEvent) {
  window.attachEvent("onload", centerDiv);
  window.attachEvent("onresize", centerDiv);
  } else {
  window.onload = centerDiv;
  window.resize = centerDiv;
  }

  function centerDiv() {
  var myDiv = document.getElementById("oDiv");
  var myBody = document.body;
  var bodyWidth = myBody.offsetWidth;

  //Needed for Firefox, which doesn't support offsetHeight
  var bodyHeight;
 if (myBody.scrollHeight)
 bodyHeight = myBody.scrollHeight;
 else bodyHeight = myBody.offsetHeight;

  var divWidth = myDiv.offsetWidth;

  if (myDiv.scrollHeight)
   var divHeight = myDiv.scrollHeight;
   else var divHeight = myDiv.offsetHeight;

 myDiv.style.top = (bodyHeight - divHeight) / 2;
  myDiv.style.left = (bodyWidth - divWidth) / 2;
  }

</script>

如果您使用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
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<style>
  p { max-width: 300px; }
</style>

<script type="text/javascript">

  if ((navigator.appName == "Microsoft Internet Explorer") &amp;&amp; (parseInt(navigator.appVersion) < 7))
  window.attachEvent("onresize", setMaxWidth);

  function setMaxWidth() {
  var paragraphs = document.getElementsByTagName("p");
  for ( var i = 0; i < paragraphs.length; i++ )
  paragraphs[i].style.width = ( document.body.clientWidth > 300 ? "300px" : "auto" );

</script>

Back to top

将样式放在页面头部

概述

将内联样式块和<link>元素从页面<body>移动到页面<head>中，这样能提高渲染性能。

详细信息

在HTML文件<body>中指定外部样式表和内联样式块可能对浏览器的渲染性能产生不利影响。浏览器阻塞渲染网页直到所有外部的样式表都已被下载。（用<style>标记指定的）内联样式块可能会导致reflows和页面跳动。因此，把外部样式表和内联样式块放在页面的<head>中是很重要的。通过确保样式表首先被下载和解析，可以让浏览器逐步渲染页面

建议

HTML 4.01规范（第12.3节）规定，始终把使用<link>标签的外部样式表放在<head>部分里。不要使用@import。还要确保您指定的样式有正确的顺序。

把<style>区块放在<head>部分里。

Back to top

指定图片尺寸

概述

为页面中所有图片指定宽度和高度可以消除不必要的reflows和重新绘制页面【repaints】，使页面渲染速度更快。

详细信息

当浏览器勾画页面时，它需要能够流动的，如图片这样的可替换的元素。提供了图片尺寸，浏览器知道去环绕附近的不可替换元素，甚至可以在图片下载之前
开始渲染页面。如果没有指定的图片尺寸，或者如果指定的尺寸不符合图片的实际尺寸，一旦图片下载，浏览器将需要reflows和重新绘制页面。为了防止
reflows，在HTML的<img>标签中或在CSS中为所有图片指定宽度和高度。

建议

指定与图片本身相一致的尺寸

不要使用非图片原始尺寸来缩放图片。如果一个图片文件实际上的大小是60×60像素，不要在HTML或CSS里设置尺寸为30×30像素。如果图片需要较小的尺寸，在图像编辑软件中，设置成相一致的尺寸(详见优化图像。)

一定要指定图片或它的块级父元素的尺寸

一定要设置<img>元素本身，或它的块级父元素的尺寸。如果父元素不是块级元素，尺寸将被忽略。不要在一个非最近父元素的祖先元素上设置尺寸。

Back to top

注：浏览器为了重新渲染部分或整个页面，重新计算页面元素位置和几何结构的进程叫做reflow

**—————–分界线————– **

个人觉得这里面还是有很多问题值得探讨，依这个文章很多大公司网站的CSS代码写的都很有问题。以后慢慢改进吧。

From: http://www.99css.com/?p=275

PHP获取当前URL，这是我在网上找到的一段代码。写的很好，自己修改了下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<?php
function get_current_url{
    $current_page_url = 'http';
    if ($_SERVER["HTTPS"] == "on") {
        $current_page_url .= "s";
    }
     $current_page_url .= "://";
     if ($_SERVER["SERVER_PORT"] != "80") {
    $current_page_url .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
    } else {
        $current_page_url .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
    }
    return $current_page_url;
}
?>

最后就可以使用 get_current_url() 获取当前页面的URL了

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 为自动。第五个是是否设置隐藏，第六个则是设置是否自动隐藏的时间。

演示 + 下载

刚做的新站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]

最近工作遇到调用blog里的内容，一般博客都是用wordpress建的，调用的时候会有两种情况，一种博客在同一个站点，一种不在同一个站点，比如二级域名。

同一个站点的话比较简单：

1
2
3
4
5
6
7
8
9
10
11

<?php
define('WP_USE_THEMES', false);
require('blog/wp-blog-header.php'); //修改博客的路径

query_posts('showposts=20'); //显示文章条数
?>
<?php while (have_posts()): the_post(); ?>
<li><a href="<?php the_permalink(); ?>" target="_blank">
<?php echo mb_strimwidth(strip_tags(apply_filters('the_title', $post->post_title)), 0, 50," "); ?>
</a></li>
<?php endwhile; ?>

不在一个站点

不在同一站点的情况下，网上流传的方法是用了一款名为Ecall的插件，这个插件是JS调用的，不利于SEO。
一种方法是使用同一站点的方法，在博客根目录中新建blog_call.php文件，内容同站点中给出的代码，然后在需要调用的站点使用file读取

1
2
3
4
5
6

<?php
//$str = file("http://www.blog.com/blog_call.php");
//补充 file测试中有读取不全的现象更正为：
f$str = ile_get_contents("http://www.blog.com/blog_call.php");
echo $str[0];
?>

另一种方法是读取博客RSS的方式，下面这段PHP读取RSS的代码在网上流传已久，但是很多朋友不知道，其实它是可以用在WP外部调用上的··

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

<?php
//RSS源地址列表数组
$rssfeed = array("http://feeds2.feedburner.com/redlogpress",
"http://rss.sina.com.cn/news/allnews/sports.xml",
"http://ent.163.com/special/00031K7Q/rss_toutiao.xml");

//设置编码为UTF-8
header('Content-Type:text/html;charset= UTF-8');
for($i=0;$i<sizeof($rssfeed);$i++){//分解开始

$buff = "";
$rss_str="";
//打开rss地址，并读取，读取失败则中止
$fp = fopen($rssfeed[$i],"r") or die("can not open $rssfeed");

while ( !feof($fp) ) {
$buff .= fgets($fp,4096);

}
//关闭文件打开
fclose($fp);
//建立一个 XML 解析器
$parser = xml_parser_create();
//xml_parser_set_option -- 为指定 XML 解析进行选项设置

xml_parser_set_option($parser,XML_OPTION_SKIP_WHITE,1);
//xml_parse_into_struct -- 将 XML 数据解析到数组$values中
xml_parse_into_struct($parser,$buff,$values,$idx);

//xml_parser_free -- 释放指定的 XML 解析器
xml_parser_free($parser);
foreach ($values as $val) {
$tag = $val["tag"];

$type = $val["type"];
$value = $val["value"];
//标签统一转为小写

$tag = strtolower($tag);
if ($tag == "item" &amp;&amp; $type == "open"){

$is_item = 1;
}else if ($tag == "item" &amp;&amp; $type == "close") {

//构造输出字符串
$rss_str .= "<a href='".$link."' target=_blank>".$title."</a><br />";

$is_item = 0;
}
//仅读取item标签中的内容
if($is_item==1){
if ($tag == "title") {$title = $value;}

if ($tag == "link") {$link = $value;}
}
}

//输出结果
echo $rss_str."<br />";
}
?>

这两种方法都是要求使用调用的站点支持PHP，如果不支持PHP而支持ASP的话可以用方法一，把读取blog_call.php的PHP代码用ASP重写一遍，但是如果是静态空间就只能装插件来实现了。

同域名下不同Wordpress间文章调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<?php
$loca="/blog";//这里定义你的WP目录
require_once( dirname(__FILE__) . $loca.'/wp-load.php' );//注意这里是wp目录下的wp-load.php
wp();//这样wp的加载就完成了，我们不需要加载模板。
?>
<?php
query_posts('showposts=3'); //就是这里加了一句query_posts，这样也可以实现调用条数的指定。
while (have_posts()) : the_post();
?><div>
<?php the_excerpt();?>
</div>
<?php endwhile; ?>
<!--导航开始-->
<p align="center">
<?php
global $paged, $wp_query;
if($paged>1)
echo '<a href='.str_replace($loca,'',get_previous_posts_page_link()).'>&amp;laquo; Previous Entry</a> ';
if($paged<$wp_query->max_num_pages)
echo ' <a href='.str_replace($loca,'',get_next_posts_page_link()).'>Next Entry &amp;raquo;</a>';
?>
</p>
<!--导航结束-->

PS：JS调用可以采用Feed to JS来实现。