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

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>

页面中他呈现这个样子

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

过去，我们需要在两个链接标签上增加不同的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来修复这个问题。

搞前端应该对语义化并不陌生，每天都在说语义化，可什么是语义化，语义化究竟能给我们带来什么好处？参加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标准化交流会“，希望大家多多参与，共同促进前端的发展。

哥这次有尚方宝剑不怕跨省追捕了吗？！

早几年,在河南省一个地方要修飞机场,事先不给农民安排好,没有说清道理,就强迫人家搬家。那个庄的农民说,你拿根长棍子去拨树上雀儿的巢,把它搞下来,雀儿也要叫几声。邓小平你也有一个巢,我把你的巢搞烂了,你要不要叫几声?于是乎那个地方的群众布置了三道防线:第一道是小孩子,第二道是妇女,第三道是男的青壮年。到那里去测量的人都被赶走了,结果农民还是胜利了。

后来,向农民好好说清楚,给他们作了安排,他们的家还是搬了,飞机场还是修了。这样的事情不少。现在,有这样一些人,好像得了天下,就高枕无忧,可以横行霸道了。这样的人,群众反对他,打石头,打锄头,我看是该当,我最欢迎。而且有些时候,只有打才能解决问题。

共产党是要得到教训的。学生上街,工人上街,凡是有那样的事情,同志们要看作好事。成都有一百多学生要到北京请愿,一个列车上的学生在四川省广元车站就被阻止了,另外一个列车上的学生到了洛阳,没有能到北京来。我的意见,周总理的意见,是应当放到北京来,到有关部门去拜访。要允许工人罢工,允许群众示威。游行示威在宪法上是有根据的。以后修改宪法,我主张加一个罢工自由,要允许工人罢工。这样,有利于解决国家、厂长同群众的矛盾。

无非是矛盾。世界充满着矛盾。民主革命解决了同帝国主义、封建主义、官僚资本主义这一套矛盾。现在,在所有制方面同民族资本主义和小生产的矛盾也基本上解决了,别的方面的矛盾又突出出来了,新的矛盾又发生了。县委以上的干部有几十万,国家的命运就掌握在他们手里。如果不搞好,脱离群众,不是艰苦奋斗,那末,工人、农民、学生就有理由不赞成他们。我们一定要警惕,不要滋长官僚主义作风,不要形成一个脱离人民的贵族阶层。谁犯了官僚主义,不去解决群众的问题,骂群众,压群众,总是不改,群众就有理由把他革掉。我说革掉很好,应当革掉。(《毛泽东选集》第五卷,人民出版社1977年4月第1版,第313–329页)

优雅的设计经常包含一些特殊的字体，而这些字体并不存在于用户的字体库中，我们并不能奢求每一个访客都是设计师。  :-)

虽然CSS3标准给我们带来了@font-face属性，但他也仅仅限于使用在“Gecko 1.9.1，Applies to Firefox 3.5, SeaMonkey 2, and Thunderbird 3 and later”

不是Type2呢？不是Firefox3.5呢？显然这并不是一个现实的解决方案，毕竟我们有90%以上的用户在使用IE。

为了解决这个问题，我们使用了sIFR框架，但是这玩意一点也不好，首先是大，其次是慢，而Cufon可以很好的代替它。

什么是 Cufon 呢？Cufon 是一个实现在网页中对文字字体进行渲染的纯 JavaScript 开源类库。

使用Cufon非常简单，只需要在页面中引入Cufon得核心文件，然后在http://cufon.shoqolate.com/generate/ 将你的字体转换为JS字体文件并引用到页面中。

接下来，就可以使用相应的Cufon API对页面中的字体进行渲染了。

那么Cufon是如何对页面字体进行渲染的呢？ 当然是VML、Canvas、SVG，因为网上已经有了相关的文章，所以我就不复制粘贴了。如果你有兴趣，可以看这里了解详细。

最后，因为Cufon是将字体以JSON格式进行编码，所以如果字体是中文的话，这个JS库会增大数倍，使用的时候一定要谨慎。

参考资料：
http://www.ibm.com/developerworks/cn/web/0911_zhuzh_cufon/
http://www.mikeindustries.com/blog/sifr/
https://developer.mozilla.org/index.php?title=en/CSS/%40font-face
http://wiki.github.com/sorccu/cufon/api

Firefox 3.6 增加了对pointer-events的支持。Opera和safari都可以对svg的pointer-events属性做出支持，这次Firefox把他扩展到了常见的HTML元素上。

pointer-events的语法为
pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit

其中auto和none可针对所有的元素使用，其它的值只针对SVG。
（as of Firefox 3.6, only the values auto and none apply to all elements. The other values only apply to SVG and behave like auto in other XML and HTML content.）

当使用none的时候，当前节点下的所有子节点不接受event事件。反之则接受。

例如当pointer-events为none时：

#test {
    pointer-events:none;
  }
 
#test:hover {
    background: red;
}

鼠标移动到p节点上时将没有不会触发任何事件。

值为auto时：pointer-events/auto.htm

值为none时：pointer-events/none.htm

不过针对HTML元素是Firefox自己创造的新玩意。 ：）

参考：
http://www.w3.org/TR/SVG/interact.html#PointerEventsProperty
http://hacks.mozilla.org/2009/12/pointer-events-for-html-in-firefox-3-6/
https://developer.mozilla.org/en/CSS/pointer-events