张经纬的博客-分享互联网

Rel与CSS的联合使用

Rel-License 是微格式的开发标准之一,简单的说就是通过给引用标签(通常是链接)加上REL属性,来标明所引用链接/数据与文章的关系。

Wordpress很早就引入了rel标准,在我们添加新链接的时候就可以看到“关系”属性。

早期某些社交类搜索引擎可根据这个标签来判断人与人之间的关系,但它对网页开发来说并无意义,值得庆幸的是随着浏览器的逐渐升级,我们可以利用CSS属性选择器以及REL来做一些有意思的功能。

这是一段带有REL属性的HTML结构。

<ul>
<li><a href="#" rel="civil">小李</a></li>
<li><a href="#" rel="party">局长</a></li>
</ul>

页面中他呈现这个样子
example_01

因为局长和小李是两个不同的阶级,所以我们应该有区分他们,我打算在小李和局长后面增加两张图片让他表现出这个样式。
e2

过去,我们需要在两个链接标签上增加不同的class来实现这种样式,并且我们需要针对不同的样式书写不同的CSS

 .c,.b {background:url(01.png) right center no-repeat;}
 .b {background-image:url(02.png);}
<ul>
<li><a href="#" rel="civil" class="c">小李</a></li>
<li><a href="#" rel="party" class="b">局长</a></li>
</ul>

现在,我们可以利用REL属性以及属性选择器来完成这个工作。

a[rel~="civil"]{background:url(01.png) right center no-repeat;}
a[rel~="party"]{background:url(02.png) right center no-repeat;}

同时,我们的HTML结构也可以剔除那些多余的样式了。

<ul>
<li><a href="#" rel="civil">小李</a></li>
<li><a href="#" rel="party">局长</a></li>
</ul>

另外:ie6不支持属性选择器,但我们可以用JS来修复这个问题。

原文链接(2 views)|暂无评论(赶紧抢沙发)

Luhn 算法的Perl实现

Luhn 算法主要应用在校键数字卡号的合法性,例如我们常见的银行卡,信用卡,ICCID号等等。

Luhn 算法简单的说,既从低位开始,基数位相加的和,与处理过的(将当前偶数位数字×2,若结果大于9,则将2位数字相加得到个位数,若结果小于等于9,直接记录这个值)偶数位相加的和的总和,若可被10整除,则合法,反之则不合法。

算法如下:

#!/usr/bin/perl
use strict;
use warnings;
 
#定义一个卡号
my $cardNum = "4367421590502289184";
 
sub luhnCheckNum{
	my $oddSum = 0;
	my $evenSum = 0;
	my $isOdd = 1;
	for(my $i=length($_[0])-1; $i>=0; $i--){
		my $iNum = substr($_[0],$i,1);
		if($isOdd){
			$oddSum += $iNum;
		}else{
			$iNum = $iNum*2;
			if($iNum>9){
				my @iNumArry = split(//, $iNum);
				$iNum = $iNumArry[0]+$iNumArry[1];
			}
			$evenSum += $iNum;
		}
		$isOdd = !$isOdd;
	}
	return (($evenSum + $oddSum)%10==0)
}
 
if(luhnCheckNum($cardNum)){
	print "您输入卡号合法";	
}else{
	print "您输入的卡号不合法";
}

原文链接(54 views)|暂无评论(赶紧抢沙发)

Perl 简单压缩 Js

#去除<!-- -->类的注释
$html =~ s/<!--(.*?)-->//g;
#去除//...的注释,但是排除http://开头的
$html =~s/[^http:\/\/]\/\/(.*?)\r\n//g;
#去除/*...*/类的注释
$html =~ s!/\*.*?\*/\s*!!sg;
#去除分号或者换行前面的一个制表符去掉
$html =~ s/(;|\n)\t+/$1/g;
#将2个或者更多的换行换为1个换行(其实这里是多余的,在后期,也可以干掉,不过写了就写了,呵呵)
$html =~ s/\n{2,}/\n/g;
#去除if else中间的空格
$html =~ s/(if|else)\s*(\(.*?\))?\s*([\w\{])/$1$2$3/sg; 
#去掉表达式中前后的空白,因为表达式必然包含=+-*等等运算符
$html =~ s/[ \t]*([\=\,\+\-\*\&\|\:\?\< \>\{\}\(\)\[\]]+)[ \t]*/$1/g;
#去除空白行
$html =~ s/^\s*\n//mg;
#去除分号后面的所有空格
$html =~ s/(;)\s*/$1/g;
#去除回车换行或者换行
$html =~ s/(\r\n|\n)//g;

原文链接(32 views)|暂无评论(赶紧抢沙发)

珍惜现在

又是一年,又是一篇2009年经帖。

马上就要2010年了,如果要给自己的2009做一个总结,可以用四个字来形容:“珍惜现在”。

2008年的时候我有什么呢,我有这些。

DSC_0133

2009年,我还有这些么?不,几乎都不在了。

佛说“菩提本无树,明镜亦非台,本来无一物,何处惹尘埃”,我说是。

2009年我没有给自己留下相片的记录。也许2010年12月的时候,连博文都不会有了,如佛说,本来无一物。

2009,就这样了。

原文链接(35 views)|暂无评论(赶紧抢沙发)

也说说语义

搞前端应该对语义化并不陌生,每天都在说语义化,可什么是语义化,语义化究竟能给我们带来什么好处?参加web标准交流会的时候我向各位同学提出了我的疑问。

按照大部分同学的意思,语义化主要是对结构的语义,对于段落我们用P,对于结构块,我们用div,对于主标题,我们用h1,这样做可以更适合更多的客户端(页面不乱?),可以适合更多人群(让阅读器正确的读出页面,让盲人也能看),让计算机知道这里是标题是段落是列表。

那按照这样说,其实只要是把标签写正确就好,标签正确了结构就正确了,结构正确了也就语义了。

话说的没错,可我认为现在谈这种语义还为时过早,语义应该web的语义,让web页面“可以说出来”才是语义。

在html5中,有些很有意思的标签:

canvas,audio,video

section,header,footer,nav,article,aside,figure

我觉得它们更像“语义”,通过canvas,我们可以告诉程序,这里是一张图,通过audio,我们可以告诉程序,这里是一段声音。

语义化的作用是否应该认为是为了让应用程序能够理解此数据的含义,藉此可将这部分数据剥离出来,并可以通过其他的方式来使用

让我们幻想一下当计算机读取到下面的代码时就会在早上7点叫我起床

<time>07:00</time>
<audio>我是小蜜蜂</audio>

当然你也可以不在7点起床,甚至可以用其他的歌曲而不用我是小蜜蜂飞到花从中这歌。

语义的关键还是在于可以告诉计算机这块数据我要干什么,其实这更像是我们用js读xml,并从中取出来有用的数据提供给用户,这里只是说他自动了,不需要人工再去做了。

就目前的情况来说,xhtml是不可能做到这一点的。

也有提出了RDF的东东,不过我没有弄明白这个东西怎么用,它看上去是一种xml的衍生体,并且要单独的去开发程序,估计很难得到普及。

所以现在很多文章不断的提出语义我个人觉得是太早了,太过了,这些理论的概念只能让初学者更加迷茫,我们只要做到标签写对酒可以了,现在不断谈语义不是时候,只会让人更加费解。

呵呵,期待HTML5。

最后打个广告:”web标准化交流会“,希望大家多多参与,共同促进前端的发展。

原文链接(22 views)|暂无评论(赶紧抢沙发)