link标签 rel=“ alternate“ 应用解析
一、link标签rel="alternate"属性的作用及用法:
1.链接外部样式表:
<link rel="alternate" type="text/css" href="out.css">
rel属性定义当前.html文档与被链接的.css文档之间的关系。
rel=“stylesheet” 表示当前文档的外部样式表。
rel=“alternate” 表示当前文档的可替换样式表。
2.联合使用:
<link rel="stylesheet" type="text/css" href="out.css"> <!--作为默认样式表-->
<link rel="alternate" type="text/css" href="out.css"> <!--作为可替换样式表-->
用户可选择替换样式,实现自由切换界面样式。但需要浏览器支持。例如一些网站会给网页定义多个配色,或者多个主题,明色和暗色。
rel=alternate的页面是默认不会渲染的,可以作为后备样式,对link使用disabled即可进行切换,无延迟。但是,提前下载,会浪费单宽,可以在必要的场景下使用。
还有一个与rel对应的属性rev,rel表示从源文档到目标文档的关系,rev表示从目标文档到源文档的关系。rev在HTML5 中已不支持。
3.可用于将PC版页面指向移动版页面,将移动版页面指向PC版页面,这样有利于搜索引擎,对不同设备的用户提供不同类型的页面
PC版本页面head应添加
<link rel="alternate" media="only screen and (max-width:640px)" href="http://m.mobile.com" >
移动版页面应添加
<link rel="canonical" href="http://wwww.pc.com" >
二、Html主题样式切换方法
1.切换样式表引用:
编写两套样式 them1.css 、them2.css 通过js 动态切换 link 标签的属性,或追加目标主题样式表、清除现有样式表;Fixfox 浏览器可以通过浏览器切换 link 样式表,但是IE 浏览器不支持,需要手动实现。
优点:简单、快捷、方便。
缺点:由于是切换引用css 文件,会由于网络原因造成加载css 文件延迟、或由于javascript 错误阻塞造成切换失败,不利于客户体验。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>CSS主题切换</title>
<link rel="stylesheet" type="text/css" href="a.css" title="a">
<link rel="alternate stylesheet" type="text/css" href="b.css" title="b">
<script>// 对切换主题的按钮绑定事件,用来做触发
document.getElementById("sheet-a").addEventListener("click",function(){setStyleSheet("a");
});
document.getElementById("sheet-b").addEventListener("click",function(){setStyleSheet("b");
});
/*** 查找所有的link标签,找到符合条件的css进行切换* @title:需要切换的css文件名称,也可以是某值,主要是能够找到所要切换的link标签**/
function setStyleSheet(title){ // 首先找到DOM中所有的link标签var link_list = document.getElementsByTagName("link");if ( link_list ){for ( var i=0;i<link_list.length;i++ ){// 要找到所有link中rel属性值包括style的,也就是包括stylesheet和alternate stylesheet;if ( link_list[i].getAttribute("rel").indexOf("style") != -1 ){// 将符合条件的link的disabled的属性设为true,都改为禁用;link_list[i].disabled = true;// 然后判断link标签中的title属性,找到我们需要替换的css文件// 找到后将该link的disabled改为启用;if ( link_list[i].getAttribute("title") === title){link_list[i].disabled = false;}}}}
};
</script></head>
<body><div class="main"><div class="con"><input type="button" id="sheet-a" value="主题a" /><input type="button" id="sheet-b" value="主题b" /></div></div>
</body
</html>
2.通多 javaScript 操作Dom Class 属性
该方式需要统一Class 的命名规则前缀or后缀,如按钮 btn-them1、btn-them2,通过javascript 控制 class 。
优点:响应快速、没有延迟;适用于单页面应用和局部样式切换。
缺点:全局样式切换 需要全局样式添加标记、多页面的话开发量相对较大,繁琐,很难做到全站的CSS切换,只能局限在当前页上。
3.通过服务器端脚本
Asp、 Php 、Jsp 都可实现
link标签 rel=“ alternate“ 应用解析相关推荐
- html网页logo属性link,html元素link标签rel=icon添加网站favicon.ico图标
html元素中的link标签除了可以引用插入CSS样式表文件之外,还可以通过link标签设置网站的favicon.icon图标. 什么是favicon.icon图标? 网站favicon.ico图标, ...
- CSS:link标签rel和media的解释(转)
代码1: <link href="css/main.css" rel="stylesheet" type="text/css" med ...
- rel=alternate stylesheet属性
stylesheet"属性指定将一个样式表立即应用到文档. rel="alternate stylesheet"属性将其作为备用样式表而在默认情况下禁用它 通过js拿到l ...
- link标签的几个用法,帮助提高页面性能
写在前面 本文首发于公众号:符合预期的CoyPan HTML 中****元素规定了外部资源与当前文档的关系.最常见的用法,是用来链接一个外部的样式表,比如: <link href="m ...
- 移动站适配rel=alternate PC页和H5页适配标注
鉴于移动化大潮的汹涌和H5页的炫丽普及,百度针对PC页与H5页的跳转适配方式推出了最优方案: 1.在pc版网页上,添加指向对应移动版网址的特殊链接rel="alternate"标记 ...
- 网页代码中link标签的用法
link标签是我们在html中的一个基础标签,多用来在网页中引入外部的css文件,在这里我们一起来看一下这个标签在我们写代码是用到的写法. 1.引入外部css文件 <link href=&quo ...
- html5 手机网站 meta/link标签,html5 meta全解
一.大众机型常用meta标签name的设置 1.name之viewport <meta name="viewport" content=""> 说明 ...
- meta标签与link标签
1.meta标签 HTML中的标签用于提供关于HTML文档的元数据(metadata),包括文档的描述.关键词.作者.字符集和其他诸如视窗设置等的信息.这些元数据通常不会直接显示在网页上,而是被浏览器 ...
- html链接css代码link,link标签链接css放在哪?
当样式需要被应用到很多页面的时候,外部样式表将是理想的选择.使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观.在HTML页面中可以使用link标签链接外部样式表. 在HTML中使用link ...
- link标签引入.css文件(目的):适配不同屏幕
link标签引入.css文件(目的):适配不同屏幕 本文 · 参考博客:https://blog.csdn.net/nianzhi1202/article/details/52464078 附 · 参 ...
最新文章
- Arduino可穿戴教程认识ArduinoIDE
- caffe中的batchNorm层(caffe 中为什么bn层要和scale层一起使用)
- day4 Python的selenium库
- 数据结构—二叉树BinaryTree
- 通俗理解tcp/ip的三次握手和四次分手
- android服务器 性能,Android性能优化(中)
- html5 php idea,五个HTML5新特性
- Tensorflow(0)--Tensorboard
- Java连接各种数据库
- 如何用xmlspy将xml文档生成xsd文件
- 营销推广的好工具:博客营销
- java怎么编写木马,实现简单木马免杀(示例代码)
- 100篇精选文章带你玩转TCP/IP协议
- windows10删除自带输入法
- 手把手教你快速入门知识图谱 - Neo4J教程
- java cancel_Future.cancel()疑难杂症
- Alias Design 2019注册机
- 高晓松50岁生日感言:可感恩的很多,可原谅的很少
- android 用户引导高亮,Android开发之高亮引导
- Centos安装postgresql数据库
热门文章
- MySQL数据恢复--binlog
- python优化算法_Python最优化算法实战
- hart协议c语言,简述HART协议命令和语言
- 线性代数辅导讲义(第五章 特征值特征向量)
- J2EE是技术还是平台还是框架? 什么是J2EE
- mysql数据库url正确的是_下面关于连接mysql下的mydb数据库的url,编写正确的是()...
- 射频电路设计与调试经验总结
- 学习3dmax游戏建模一定要美术基础很高吗?资深建模师一语道出重点
- usb_modeswitch下载与安装
- 【Java入门基础第6天】六款Java常用的开发工具 废话少说-上号