HTML <link>标签的属性 rel="alternate"可用于将网站的PC版页面指向移动版页面，还能用于RSS和sitemap网站地图，以及切换不同CSS样式表文件，接下来我们就一起学习<link>标签的rel="alternate"属性这些作用及用法。

alternate的作用

1、可用于将网站的PC版页面指向移动版页面，告诉搜索引擎你的PC版网页有对应的移动版页面，这有利于移动搜索引擎向手机移动设备的用户提供相应移动版的网页；

2、可以用于告诉搜索引擎网站的RSS聚合内容和sitemap网站地图的位置，利于搜索引擎抓取网页内容；

3、可以用于选择不同CSS样式表文件之间的相互切换控制效果。

alternate用法

<link>标签的rel="alternate"属性添加的位置是在网页的头部区域，也就是<head>和</head>之间。

用法1：用于移动搜索适配网站的移动版

当你的网站有一个独立的PC版和一个相对应的移动版时，就需要将这两者的关系明确的告诉搜索引擎，帮助移动搜索引擎更加准确的提供是PC版还是移动版的页面。

1、在PC版页面添加rel="alternate"属性，将PC版指向移动版

假设，移动版地址是：http://m.example.com，在PC版页面中添加rel="alternate"属性，将PC版页面指向移动版页面，代码如下：

Markup
<link rel="alternate" media="only screen and (max-width:640px)"  href="http://m.example.com" >

当移动设备的屏幕宽度小于600px时，就从PC版页面跳转至相对应的移动版URL地址：http://m.example.com；href属性后的移动版URL地址，请使用绝对URL地址，也就是包括协议和域名的完整URL地址；

当你在pc版添加了PC版指向移动版的rel="alternate"属性时，同样，也需要在移动版添加rel="canonical"属性将移动版规范到PC版，这样才能形成相互参照、双向对应的关系；

2、在移动版页面添加 rel="canonical"属性，将移动版页面规范到PC版页面

Markup
<link rel="canonical"  href="http://m.example.com" >

用法2：用于RSS（聚合内容）和sitemap（网站地图）

如果有一个sitemao.xml网站地图文件，请把它上传到网站的根目录下，然后，在站点主页的 <head>和<head> 之间添加如下代码。

Markup
<link rel="alternate" type="application/rss+xml" title="刘代码博客网站地址" href="sitemap.xml" />

如果你的网站添加了RSS聚合内容，可以添加如下代码：

Markup
<link rel="alternate" type="application/rss+xml"  title="刘代码博客RSS订阅" href="RSS地址" />

 注意：href="rss地址" ，其中，rss地址替换成你自己的即可！

用法3：用于在不同CSS样式表之间选择替换

想要在多个不同的CSS样式表之间进行切换，就需要多个link标签。

1、rel="stylesheet"和rel="alternate stylesheet"的区别

我们分别定义两种不同的样式blue.css和red.css，用户可以通过浏览器选择样式(ie不支持此属性)

Markup
<link rel="stylesheet" type="text/css" title="blue" href="blue.css" /><link rel="alternate stylesheet" type="text/css" title="red" href="red.css" />

第一个rel="stylesheet"属性是指定将一个样式表立即应用到文档；第二个rel="alternate stylesheet"属性是将该样式表作为备用样式表，在默认情况下是被禁用的；但必须浏览器支持才能自行替换，而目前大多数流浪器并不支持（包括IE浏览器），尽管如此，我们还是可以通过JS拿到link标签对象，设置disabled属性值来实现两个样式表的切换！

2、通过JS设置disabled属性实现多个不同CSS样式表的切换

disabled属性值只有true和false两个：

Markup
disabled = true;表示它不会立即生效
disabled = false;表示立即生效

现在，我们就用以下三个link标签引入不同的css样式表，代码如下：

Markup
<link rel="alternate stylesheet" href="a.css" type="text/css" title="red" />    <link rel="stylesheet" href="b.css" type="text/css" title="green" />    <link rel="alternate stylesheet" href="c.css" type="text/css" title="blue" />

 接着，下面就是完整通过JS设置disabled属性实现多个不同CSS样式表切换的示例，完整代码如下：

Markup
<!DOCTYPE HTML ><HTML><head>    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>    <TITLE> New Document </TITLE>    <link rel="alternate stylesheet" href="a.css" type="text/css" title="red" />    <link rel="stylesheet" href="b.css" type="text/css" title="green" />    <link rel="alternate stylesheet" href="c.css" type="text/css" title="blue" />    
        <script language="javascript">        
        function setActiveStyleSheet(t)        {            
        var links = document.getElementsByTagName("link");
        links[0].disabled=false;
        links[1].disabled=true;
        links[2].disabled=true; 
        alert(links[0].disabled+""+links[1].disabled+links[1].getAttribute("title")+links[2].getAttribute("href"));
        }
        </script></HEAD><body><select id="" onChange=" setActiveStyleSheet(this)">    <option id="" value="red" >红</option>    <option id="" value="green" >绿</option>    <option id="" value="blue">蓝</option></select></body></HTML>

 当然，除了在不同的css样式表之间切换之外，还可以切换不同的语言类型，使用的设备类型等等，其切换的方法和上面的是一样的原理！