hello,JavaScript | 关注学习前端技术,前端开发,前端,JavaScript,css,html,js,前台,ued,视觉设计(这就是seo?)

TAG | html

六/10

1

详解链接的rel与target

关于target=”_blank”去留的问题在网上已经被反复争议很多次了。有的说要留,有的说要去掉。主张留的一方主要是考虑到target=”_blank”的属性目前来讲还没有一个好的方式来解决,而主张去的一方则拿出了rel与JS的解决方案。target=”_blank”是否的存在是否有必要我想目前还有很多正处在一种盲区。我查阅了相关的文献,发现其实情况并非是我们所想的那样,事实上target=”_blank”并非是不符合标准的,而用rel与JS的解决方案也是没有必要的,因为这是个误区,只要我们了解了rel与target的真正含义我们就清楚了其实这里本不应存在争议。下面我将我通过查阅文献所得到的知识与大家分享,我们先来了解一下target与rel的含义:

target ,允许指定在什么位置显示已经选择的超链接内容。也就是说链接的内容将在什么样的窗口被显示。target 的属性值有四个保留的名称,分别是:_blank,_self,_parent,_top。其中_blank的意思是浏览器总在一个新打开的、未命名的窗口中载入target=”_blank”链接的文档。这里大家也许会很不理解“未命名”是什么意思。事实上target 是可以给新打开的窗口赋一个ID,例如:target=”name” 这就表明通过target=”name”链接载入的文档将会在一个叫”name”的窗口显示。如果没有ID为”name”的窗口,那么浏览器就会新建一个名为”name”的窗口来显示链接文档。如果当前窗口的ID就是”name”那么这个链接文档就会在当前的窗口中替换原有的内容显示出来。而_self的意思其实就是当前文档,<a>的默认目标就是_self,这个属性值一般来说是用不到的。_parent是使链接文档在父级窗口显示,这个属性值只在框架结构中使用,如果身本就是顶级框架,那么其作用与_self相同。_top同样是应用在框架中的,但是他的效果是清除框架来显示目标文档。这对于从框架结构转向无框架结构是很有作用的。

现在我们知道了,target 是一目标显示的属性与浏览器密切相关的。那么rel又是什么呢, 为什么很多人把他当作是target 的替代属性呢?下面我们就来认识一下rel。其实不只有一个rel还有一个与之对应的属性叫rev,这两个属性的意思分别是:从源文档到目标文档的关系;从目标文档到源文档的关系。这里的源文档可以理解为链接所处在的当前文档,而目标文档也就是这个链接将要打开的文档。这下我们应该清楚了,其实rel与rev是一种文档之前的链接关系,而并非是与浏览器相关的如何显示目标文档的属性。

那么rel与rev有哪些关系呢?下面将一一列取并解释其中的含义:

next,链接到下一个文档;
prev,链接到前一个文档;
head,链接到集合中的顶级文档;
toc,链接到集合的目录;
parent,链接到源上面的文档;
Child,链接到源下面的文档;
index,链接到此文档的索引;
glossary,链接到此文档的术语表;

其中next与prev是一组。表明了当前文档与目标文档之前的关系是同级的关系,可以写成这样<a href=”movie_002.htm” rel=next rev=prev>。head与toc可以形成一个组合,表示者是由目录链接到最终的文档,或是由文档链接到目录。parent与child是一组,表示着由当前的文档链接到父级文档或是子级文档。而index与glossary可以与head分别组合,形成由文档到索引,或是由索引到文档;文档到术语表或是术语表到文档。

也许这样讲可能还是不很清楚,下面举个例子:我这里整理了一个电影文档资源,那么我需要对这些资源进行分类,我把电影分成:武侠片、战争片、爱情片、恐怖片、纪录片。那么我在电影根目录需要链接到下面的子类的时候那么链接的关系应该是:rel=child rev=parent ,而如果当前是武侠片的频道页,我需要转爱情片频道或是其它频道时,那么链接关系就应该是:rel=next rev=prev,当我们由一个武侠片链接到“卧虎藏龙”这部电影的文档时链接的关系应该是:rel=head rev=toc,当由“卧虎藏龙”链接到索引的时候链接关系又变成了:rel=index rev=head。

由于目前的CSS还不能抓取rel与rev的属性值,所以没有办法给不同关系的链接提供不同的样式,所以现在rel与rev只是用来使得网页的语义性更为完善。

蓝色理想阅读处:
http://bbs.blueidea.com/thread-2720126-1-1.html

· ·

朱 照华, 程序员, 自由职业者

2009 年 11 月 19 日

本文介绍了使用 Cufon 进行网页字体渲染的一般方法和技巧,并以此为基准,介绍了 Cufon 技术的主要实现原理和这一原理的可能应用领域

这是一篇关于 Cufon 技术的小文章。什么是 Cufon 呢?简单的说,Cufon 是一个用来替代 sIFR 框架,实现在网页中对文字字体进行渲染功能的纯 JavaScript 开源类库。

那么为什么要使用 Cufon 呢?这要从 Web 开发人员,所经常面对的一种“冲突”,即“字体(Font Family)冲突”开始讲起。

通常的这一冲突总是爆发于 Web 页面的设计者(Designer)和开发者(Coder)之间。在很多场合下,Web 页面的设计者都会倾向于在他们的页面设计稿中,为文字附加使用一些“特殊”的字体和特效,以此来展示他们卓越的设计能力。

如下图 1 所示,是某设计者为公司 A 所设计的一个公司简介页面(部分)。在其中为了突出公司的“亲和力”,设计者使用了一种名为 Baroque Script 的手写字体。

图 1. 设计者为网站所设计的公司简介效果图(部分)

无疑的这一设计将会让开发人员“抓狂”。因为与此同时,A 公司雇主明确的告诉了开发人员,公司简介的内容需要可以通过后台管理程序进行修改,并实时的显示到相应的页面上。

这也就意味着,即使开发人员可以如下代码所示通过编写脚本,来实时输出公司简介的内容,并指定这一内容使用“Baroque Script”字体进行显示,也是无法“完美”的实现设计初衷的。

 <style>
  .introduction { font-family:'Baroque Script';}
 </style>
……
 <p style="font-size:36px"><?php echo $introduction; ?></p>
 <p style="font-size:24px; text-align:right">
 <?php echo $leader;?></p>

因为在大部分的浏览器上,并不会安装有 Baroque Script 字体。因此在这些浏览器上系统会主动“忽略”掉代码中关于 font-family 的说明,转而使用缺省字体进行输出,如下图 2 所示。

图 2. 在没有安装 Baroque Script 字体浏览器上的公司简介输出效果

当然随着 Web 标准的发展,关于这一问题现在也已经有了一个“官方”的解决方案,那就是通过 CSS3 标准下的 @font-face 属性来指定和引入非缺省字体,如下代码所示。

……
 @font-face {
  font-family: "Baroque Script";
 src: url('BaroqueScript.ttf')
 }
……

完整的实现则可以参考范例 1.htm。显然的,这一解决方案会成为今后在此类问题上一个主流的处理方法。但是不幸的是,截止到目前为止其却并没有获得很多浏览器,尤其是 IE 系列浏览器的完整支持。而与之相较本文所将介绍的 Cufon 方案,目前在“普适性”上较 @font-face 方案则是要广泛许多,下表 1 则给出了二者在浏览器支持方面的一个比较,以供读者参考。

所支持浏览器
Cufon IE(≥ 5) Firefox(≥ 1.5)Opera(≥ 9.5)Safari(≥ 3)Google Chrome(≥ 1.0)
@font-face IE(≥ 4,仅支持 OpenType)Firefox(≥ 3.5) Opera(≥ 10.0) Safari(≥ 3.1)

那么面对这一冲突,Cufon 究竟是如何解决非缺省字体显示的问题的呢?


回页首

引入 Cufon

作为一种基于 JavaScript 的网页字体引入方案, Cufon 的核心功能是通过一个名为“cufon-yui.js”的 JavaScript 类库,提供给开发人员的。因此使用 Cufon 技术的第一步,当然就是在 Web 页面中引入这一类库,如下代码所示。

 <script src="cufon-yui.js" type="text/javascript"></script>

创建并引入字体文件 (全文…)

· · ·

Theme Design by devolux.nh2.me