HTML link标记的rel属性

所属分类: HTML/Xhtml / 网页制作 阅读数: 1725
收藏 0 赞 0 分享

<link>标签定义了当前文档与 Web 集合中其他文档的关系。link 元素是一个空元素,它仅包含属性。此元素只能存在于 head 部分,不过它可出现任何次数。在 HTML 中,<link> 标签没有结束标签。在 XHTML 中,<link> 标签必须被正确的关闭。

除了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 PotatoWPDesigner7这款WordPress主题试用研究一下(或查看DEMO),它利用一个简单的JS和多个可替换样式,让用户可对网页改变配色。稍高阶的一些,还可以利用JS弄成随时间变化样式的,比如白天的时候显示成明色,晚上的时候显示成暗色。

注释: 为首选样式指定media=”all”,再添加一个打印样式,会比较符合Web标准(尽管对于普通网站来说,不会有几个人想要打印你的网页)。帕兰映像就没有定义打印样式,稍后抽时间搞搞 :)

注释: 是否使用可替换样式是个值得斟酌的问题。如果仅改变配色,整体主调还是不变,那可以接受。但有一些朋友,比如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

apple touch icon <link>标签的rel属性全解析

对于国内的用户来说,使用iPhone的人还不多,即使很多,会把你网站放到主屏?那恐怕不是我们这些一般的小网站能够做到的。不过好玩嘛,我还是为我的网站制作了一个并添加了这个link元素。

3. WordPress中的link元素

(1). RSS地址和Pingback地址

下面是WordPress默认主题对RSS2地址,Atom地址和Pingback地址的定义。具体原理俺觉得很深奥很复杂,就不研究了。反正你的博客需要它,Atom好像不要也可以?

<link rel="alternate" type="application/rss+xml"
 title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" /><link rel="alternate" type="application/atom+xml"
 title="<?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" /><link rel="pingback"
 href="<?php bloginfo('pingback_url'); ?>" />

(2). 用于远程发布的link元素

如果你的主题中有<?php wp_head(); ?>这个函数,下面这两个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, 在最底部的<?php } ?> 或者 ?> 标签之前,插入下面的代码:

remove_action('wp_head', 'rsd_link');remove_action('wp_head', 'wlwmanifest_link');

注释: 你可能在想,既然是<?php wp_head(); ?>函数生成了这两个东西,把它删除不就可以了。是的,如果你预计你其它任何插件都不会需要到这个函数,那就删吧。

4. 防止重复内容的canonical属性

谷歌、雅虎和live search在今年2月左右宣布支持Link的一个新属性Canonical,主要作用是为网页指定权威链,以解决重复内容问题。

关于这个属性的详细介绍请看谷歌中文网站管理员中的指定您的URL范式

这里主要为WordPress用户推荐两个插件来实现添加此属性到你的head部份: SEO No DuplicateCanonical URL’s。用哪个随便吧。

说了是全解析,其实仅仅是说一些常用的,对大多数人来说都已经足够了,如果你还知道其它比较重要和常用的rel属性,也欢迎分享出来。

更多精彩内容其他人还在看

HTML中button标签点击实现页面跳转的三种方法

方法1:使用onclick事件<input type="button" value="按钮"onclick="javascrtpt:window.location.href='http://www.baidu.com/'&q... 查看详情
收藏 0 赞 0 分享

详解HTML中的图片标签的用法

在HTML中<img>这个标签是定义文本中的图片标签,它的作用就比如说可以提供图片的名字、提供图片的尺寸大小和提供图片的一些图片属性,比如Alt这个属性,可以给图片一个名称来告诉朋友们。这个也是对seo优化的一种细节上的方式。这样做可以让百度蜘蛛可以知道你这个图片是个... 查看详情
收藏 0 赞 0 分享

HTML中利用div+CSS实现简单的箭头图标的代码

在网页设计中,我们经常得会用到一些箭头做为装饰来点缀我们的网页,虽然现在很多的网站的设计者们都喜欢以引用字体图标的形式来实现箭头的效果,但那样也会给网页的加载造成一些影响。今天飞鸟慕鱼小编就给大家说一说,在网页设计中如何利用div加CSS的方式来实现一些箭头的效果。DIV+CSS... 查看详情
收藏 0 赞 0 分享

html中常用的转义字符总结

html中常用的转义字符总结,具体内容如下所示:&nbsp;  不断行的空格&ensp;  半方大的空格&emsp;   全方大的空格&lt;     小于 <&gt;    大于 >&amp;   ... 查看详情
收藏 0 赞 0 分享

HTML6实现折叠菜单与手风琴菜单的实例代码

页面主体部分:<body> <ul id="menu"> <li> <a href="#">一级菜单1</a> ... 查看详情
收藏 0 赞 0 分享

html 仿百度百科导航下拉菜单功能

html 仿百度百科导航下拉菜单功能,具体代码如下所示:演示图1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml... 查看详情
收藏 0 赞 0 分享

viewport 的基本原理以及详细使用方法

一.viewport的概要移动端浏览器通常都在一个比屏幕更宽的虚拟窗口中渲染页面,这个虚拟窗口就是viewport,目的是正常展示没有做移动端适配的网页,可以让他们完整的展现给用户。我们有时用移动设备访问桌面版网页就会看到一个横向滚动条,这里可显示区域的宽度就是viewport的... 查看详情
收藏 0 赞 0 分享

使用html2canvas对有百度地图的Dom元素处理成图片的解决

问题1:百度地图应用的是瓦片式图片(地图是一张张图片拼出来的),html2canvas 处理时,遇到非同一域名下的图片,浏览器会显示跨域的报错,也无法用反向代理来解决,因为瓦片图片的域名不确定,无法指定 proxy_pass解决:使用百度地图静态图处理( http://lbsyu... 查看详情
收藏 0 赞 0 分享

n个容器元素实现无限滚动的实现代码

场景如何正确渲染多达10000个元素的列表。无限下拉加载技术使用户在大量成块的内容面前一直滚动查看。这种方法是在你向下滚动的时候不断加载新内容。当你使用滚动作为发现数据的主要方法时,它可能使你的用户在网页上停留更长时间并提升用户参与度。随着社交媒体的流行,大量的数据被用户消费。无... 查看详情
收藏 0 赞 0 分享

html浮动提示框功能的实现代码

一般的表单提示总会占据表单的位置,让表单边长,或者变宽,影响布局,但如果让提示框像对话框一样浮在所需内容旁边就可以解决这一问题。HTML及样式首先做一张表单<div id="form-block"> <h1>注册</... 查看详情
收藏 0 赞 0 分享
查看更多