<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 Potato
的WPDesigner7这款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"/>
关于这个调用我