您好,欢迎访问一九零五行业门户网

HTML link标记的rel属性_HTML/Xhtml_网页制作

标签定义了当前文档与 web 集合中其他文档的关系。link 元素是一个空元素,它仅包含属性。此元素只能存在于 head 部分,不过它可出现任何次数。在 html 中, 标签没有结束标签。在 xhtml 中, 标签必须被正确的关闭。
除了html的标准通用属性之外,link元素还包括很多可选属性: charset, href, hreflang, media, rel, rev, target, title和type。这些属性中,target只允许在transitional和frameset两种dtd中使用,其它都可在strict, transitional和frameset三种dtd中使用。
这些属性中,rel属性是核心。本文里面,脚本之家就介绍一些自己知道的rel属性,以及在wordpress中对一些link元素的处理,适合新手朋友学习。
1. 调用外部样式表(1). 显示器样式表link标签最多的使用就是用来调用外部样式表,例如下面这样:
link rel=stylesheet href=http://paranimage.com/wp-content/themes/v5/style.css type=text/css media=screen />
其中href是目标文档的url, type则规定了目标url的mime类型,而media规定了文档将显示在什么设备上。
(2). 打印设备样式表下面这个webdesignerwall的样式表调用就规定了文档显示在打印设备上时的css样式 :
link rel=stylesheet href=http://www.webdesignerwall.com/wp-content/themes/wdw/print.css type=text/css media=print />
(3). 可替换样式表你可能还会在一些网页中看到诸如下面的样式表调用代码:
link rel=alertnate stylesheet href=http://paranimage.com/wp-content/themes/v5/red.css type=text/css media=screen />
这段代码定义了一个可替换的样式表,它和第一个link元素同时使用,第一个定义了首选样式,而这个则让用户可选择替换的样式。但这个替换操作需要浏览器支持,但很多浏览器比如ie都是不支持的。
所以使用到替换样式的网页,一般都用一些样式表切换的js,让用户可以自由切换界面样式。这个应该大家都见过,一些网站会给网页定义多种配色。wordpress用户有兴趣的话,可以下载small potato的wpdesigner7这款wordpress主题试用研究一下(或查看demo),它利用一个简单的js和多个可替换样式,让用户可对网页改变配色。稍高阶的一些,还可以利用js弄成随时间变化样式的,比如白天的时候显示成明色,晚上的时候显示成暗色。
注释: 为首选样式指定media=”all”,再添加一个打印样式,会比较符合web标准(尽管对于普通网站来说,不会有几个人想要打印你的网页)。帕兰映像就没有定义打印样式,稍后抽时间搞搞 标签的rel属性全解析 alt=:) src=http://files.jb51.net/do/uploads/allimg/090826/0204430.gif>
注释: 是否使用可替换样式是个值得斟酌的问题。如果仅改变配色,整体主调还是不变,那可以接受。但有一些朋友,比如wordpress用户,会启用多个完全不同风格的主题,再利用插件让用户自由变换。这看上去似乎挺酷的,但我的建议是千万别这么做。是否影响seo且不谈,但会让人对你的网站缺乏一种固定形象的认知感。
2. 定义网站收藏夹图标关于favicon/收藏夹图标的详细介绍可以查看百度百科(1, 2),使用下面的代码调用即可。
link rel=shortcut icon href=http://paranimage.com/wp-content/themes/v5/images/favicon.ico type=images/x-icon/>link rel=icon href=http://paranimage.com/wp-content/themes/v5/images/favicon.png type=images/png/>
关于这个调用我自己也还有些迷糊,我实验的结果是:
ie只支持ico格式的favicon; rel属性必须包含shortcut, 才会在ie下显示; 我在制作透明格式的ico时总出问题,总会出现黑底,就算弄了ie下非黑底了,在chrome下又变成黑底。 于是,制作一个透明的ico和一个透明的png, 第一段供ie浏览器调用,第二段供其它浏览器调用; 注释: 你也可以不使用这个link元素,而直接制作一个favicon.ico文件,并放到网站根目录。
顺定分享: 为你的网站添加apple touch图标iphone或ipod touch设备允许用户添加网站的链接到主屏上,使用下面的代码可以为你的网站指定一个apple touch图标:
link rel=apple-touch-icon href=http://paranimage.com/wp-content/themes/v5/images/apple-touch-icon.png />
该图标的尺寸是57*57的png格式,如果不是,会自动缩放,且如果我没搞错的话,不一定要弄成iphone风格那种漂亮的圆角,iphone会自动按它的风格把图标弄成圆角渐变的,比如last.fm的apple touch icon。
标签的rel属性全解析 src=http://files.jb51.net/do/uploads/allimg/090826/0204431.png width=400>
对于国内的用户来说,使用iphone的人还不多,即使很多,会把你网站放到主屏?那恐怕不是我们这些一般的小网站能够做到的。不过好玩嘛,我还是为我的网站制作了一个并添加了这个link元素。
3. wordpress中的link元素(1). rss地址和pingback地址下面是wordpress默认主题对rss2地址,atom地址和pingback地址的定义。具体原理俺觉得很深奥很复杂,就不研究了。反正你的博客需要它,atom好像不要也可以?
rel=alternate type=application/rss+xml title= rss feed href= />rel=alternate type=application/atom+xml title= atom feed href= />rel=pingback href= />
(2). 用于远程发布的link元素如果你的主题中有这个函数,下面这两个link元素就会出现:
link rel=edituri type=application/rsd+xml title=rsd href=http://localhost/wordpress/xmlrpc.php?rsd />link rel=wlwmanifest type=application/wlwmanifest+xml href=http://localhost/wordpress/wp-includes/wlwmanifest.xml />
这两个元素主要供远程发布使用,比如你使用windows live write等桌面博客编辑器来发布文章。如果你并不需要这个功能,那完全可以把这两个元素删除,删除的方法是,打开你wordpress主题的functions.php, 在最底部的 或者 ?> 标签之前,插入下面的代码:
remove_action('wp_head', 'rsd_link');remove_action('wp_head', 'wlwmanifest_link');
注释: 你可能在想,既然是函数生成了这两个东西,把它删除不就可以了。是的,如果你预计你其它任何插件都不会需要到这个函数,那就删吧。
4. 防止重复内容的canonical属性谷歌、雅虎和live search在今年2月左右宣布支持link的一个新属性canonical,主要作用是为网页指定权威链,以解决重复内容问题。
关于这个属性的详细介绍请看谷歌中文网站管理员中的指定您的url范式。
这里主要为wordpress用户推荐两个插件来实现添加此属性到你的head部份: seo no duplicate或canonical url’s。用哪个随便吧。
说了是全解析,其实仅仅是说一些常用的,对大多数人来说都已经足够了,如果你还知道其它比较重要和常用的rel属性,也欢迎分享出来。
其它类似信息

推荐信息