HTML教程:link标记

时间：2022-06-09 10:34:58

开发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标准(尽管对于普通网站来说，不会有几个人想要打印你的网页)。帕兰映像就没有定义打印样式，稍后抽时间搞搞 HTML教程:link标记

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

  1. XAML实例教程系列 - 标记扩展&lpar;Markup Extensions&rpar; 六

    XAML实例教程系列 - 标记扩展(Markup Extensions) 分类: Windows 8 Silverlight2012-06-21 13:00 1139人阅读 评论(0) 收藏 举报 扩 ...

  2. HTML教程XHTML教程&colon;HTML标记嵌套使用技巧

    网页制作Webjx文章简介:WEB标准-HTML元素嵌套. 先来看以下这样一段代码: <ul>    <li><h4><a href="" ...

  3. CSS3 教程 选择器 标记一下防止 要找时404

    客 » Airen的博客 CSS3 选择器——基本选择器 作者:大漠 日期:2011-08-09 点击:6418  CSS的选择器,我想大家并不会陌生吧,因为天天在使用,但对于CSS3的选择器,要运 ...

  4. html系列教程--link mark meta

    <link> 标签:定义文档与外部资源的关系,常见的用途是链接样式表 demo: <link rel="stylesheet" type="text/c ...

  5. 一些 &lt&semi;link&gt&semi; 标记分享

    <link rel="alternate" media="handheld" href="#" /> <link rel= ...

  6. MetaProducts Offline Explorer使用简易教程

    MetaProducts Offline Explorer使用简易教程 by windtrace  20170419 最近想下载一个网站上的内容打包成chm文件,以便离线浏览,webzip太长时间不更 ...

  7. HTML教程（看完这篇就够了）

    HTML教程 超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言.您可以使用 HTML 来建立自己的 WEB 站点,HTML 运 ...

  8. &commat;import导入外部样式表与link链入外部样式表的区别

    昨天碰到同事问了一个问题,@impor导入外部样式与link链入外部样式的优先级是怎样的,为什么实验的结果是按照样式表导入后的位置来决定优先级. 今天就这个问题,度娘上找了很久,终于有个总结性的答案出 ...

  9. 样式link属性media用法--媒体类型查询

    引用外部样式使用link 你可能想针对将要显示页面的设备类型(桌面PC.笔记本电脑.平板电脑.手机或者甚至页面的印刷版本)来调整页面的样式,可以利用一个media属性, 在<link>元素 ...

随机推荐

  1. NoSql数据库初探-mongoDB读操作

    MongoDB以文档的形式来存储数据,此结果类似于JSON键值对.文档类似于编程语言中将键和值关联起来的结构(比如:字典.Map.哈希表.关联数组).MongoDB文档是以BOSN文档的形式存在的.B ...

  2. Page

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <met ...

  3. 【性能测试】【Jmeter】学习（1）

    2013/8/6开始阅读Jmeter文档 2013/8/7总结 监听器——CSV Data Set Config 在Jmeter中添加一个CSV配置原件 CSV配置原件添加方法:(右键点击某一个操作步 ...

  4. Spring-shiro源码陶冶-DefaultFilter

    阅读源码有助于陶冶情操,本文旨在简单的分析shiro在Spring中的使用 简单介绍 Shiro是一个强大易用的Java安全框架,提供了认证.授权.加密和会话管理等功能 Apache Shiro自带的 ...

  5. MySQL数据库使用规范

    一.建表规约 1.[强制]表达是与否概念的字段,必须使用is_xxx的方式命名,数据类型是unsigned tinyint (1表示是,0表示否) 说明:任何字段如果为非负数,必须是unsigned ...

  6. springcloud集成zookeeper，并使用configserver作为服务的配置中心

    1.springcloud集成zookeeper: 做法: 出现问题: 版本不一致导致出现keepError: 解决:服务器的zookeeper要与客户端的zookeeper一致,才可以. 2.使用c ...

  7. CentOS 7 设置静态IP

    cd /etc/sysconfig/network-scripts/ sudo vi ifcfg-eno16777736 BOOTPROTO=static #dhcp改为static(修改) IPAD ...

  8. 洛谷P4052 &lbrack;JSOI2007&rsqb;文本生成器 AC自动机&plus;dp

    正解:AC自动机+dp 解题报告: 传送门! 感觉AC自动机套dp的题还挺套路的,,, 一般就先跑遍AC自动机,然后就用dp dp的状态一般都是f[i][j]:有i个字符,是ac自动机上的第j个节点, ...

  9. js：浏览器插件

    1.chrome background.js //chrome.webRequest.onBeforeRequest.addListener(function(info) { // chrome.ta ...

  10. TortoiseGit上传项目到GitHub

    1. 简介 gitHub是一个面向开源及私有软件项目的托管平台,因为只支持git 作为唯一的版本库格式进行托管,故名gitHub. 2. 准备 2.1  安装git:https://git-scm.c ...

相关文章