HTML教程:link标记
开发php语言的网站,<head>里link标签这样:<link href="xmlrpc.php?rsd=1" title="rsd" type="application/rsd+xml" rel="edituri">,本文主要探究rel属性。
<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/收藏夹图标的详细介绍可以查看百度百科(, ),使用下面的代码调用即可。
<
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。
对于国内的用户来说,使用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 Duplicate或Canonical URL’s。用哪个随便吧。
HTML教程:link标记的更多相关文章
- XAML实例教程系列 - 标记扩展(Markup Extensions) 六
XAML实例教程系列 - 标记扩展(Markup Extensions) 分类: Windows 8 Silverlight2012-06-21 13:00 1139人阅读 评论(0) 收藏 举报 扩 ...
- HTML教程XHTML教程:HTML标记嵌套使用技巧
网页制作Webjx文章简介:WEB标准-HTML元素嵌套. 先来看以下这样一段代码: <ul> <li><h4><a href="" ...
- CSS3 教程 选择器 标记一下防止 要找时404
客 » Airen的博客 CSS3 选择器——基本选择器 作者:大漠 日期:2011-08-09 点击:6418 CSS的选择器,我想大家并不会陌生吧,因为天天在使用,但对于CSS3的选择器,要运 ...
- html系列教程--link mark meta
<link> 标签:定义文档与外部资源的关系,常见的用途是链接样式表 demo: <link rel="stylesheet" type="text/c ...
- 一些 <link> 标记分享
<link rel="alternate" media="handheld" href="#" /> <link rel= ...
- MetaProducts Offline Explorer使用简易教程
MetaProducts Offline Explorer使用简易教程 by windtrace 20170419 最近想下载一个网站上的内容打包成chm文件,以便离线浏览,webzip太长时间不更 ...
- HTML教程(看完这篇就够了)
HTML教程 超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言.您可以使用 HTML 来建立自己的 WEB 站点,HTML 运 ...
- @import导入外部样式表与link链入外部样式表的区别
昨天碰到同事问了一个问题,@impor导入外部样式与link链入外部样式的优先级是怎样的,为什么实验的结果是按照样式表导入后的位置来决定优先级. 今天就这个问题,度娘上找了很久,终于有个总结性的答案出 ...
- 样式link属性media用法--媒体类型查询
引用外部样式使用link 你可能想针对将要显示页面的设备类型(桌面PC.笔记本电脑.平板电脑.手机或者甚至页面的印刷版本)来调整页面的样式,可以利用一个media属性, 在<link>元素 ...
随机推荐
- 字符串匹配之KMP算法
KMP算法使用前缀函数来模拟有限自动机的后缀函数,前缀函数通过计算模式与其自身的偏移匹配的信息,本身的证明很复杂,关键在于弄懂其核心思想,下面就不赘述了,仅仅贴出代码: #include <io ...
- android游戏物理引擎开发——粒子系统(三)
生病了,医院躺了几天,动了个小手术,动手术之后的几天在医院看了几本<大众软件>,又想到自己必须得买台台式机了,这破笔记本实在用不下去了,然后开始喜欢看些硬件的东西,等我熟悉了以后,写几个硬 ...
- 【Android - 进阶】之事件分发机制
参考资料: View事件分发:http://blog.csdn.net/pi9nc/article/details/9281829 ViewGroup事件分发:http://blog.csdn.net ...
- IOS 'NSInternalInconsistencyException', reason: 'Invalid parameter not satisfying: URLString'
转载自:http://i.cnblogs.com/EditPosts.aspx?postid=4012011 今天想写一个请求的天气,好的,废话不多说,先贴代码: 使用AFNetWorking 发送g ...
- 蘑菇街IM
https://github.com/mogutt TTServer 蘑菇街TeamTalk之消息服务器 Updated 2 days ago Shell 122 208 TTAutoDeploy ...
- 关于no system images installed for this target解决方法
(1)国外网站都被屏蔽,连不上下载地址了 修改hosts文件(C:\Windows\System32\drivers\etc\hosts),在最后添加如下内容 127.0.0.1 localhost ...
- (step6.3.4)hdu 1151(Air Raid——最小路径覆盖)
题意: 一个镇里所有的路都是单向路且不会组成回路. 派一些伞兵去那个镇里,要到达所有的路口,有一些或者没有伞兵可以不去那些路口,只要其他人能完成这个任务.每个在一个路口着陆了的伞兵可以沿着街去 ...
- [React] React Fundamentals: Mixins
Mixins will allow you to apply behaviors to multiple React components. Components are the best way t ...
- QT运行时加载UI文件
写QT程序里运行时加载UI文件,代码如下: 点击(此处)折叠或打开 #include "keyboard.h" #include <QtUiTools> #incl ...
- C#数据库读取数据后转换为INT32后计算的小技巧
这有什么难的,不管是什么数据库, 首先分别读出userinfo中usermoney的值 存入s1,card中extramoney的值s2 读出字段数据你应该会吧! 再用userinfo中字段userm ...