alternate标签的作用
1、可用于将网站的PC版页面指向移动版页面，告诉搜索引擎你的PC版网页有对应的移动版页面，这有利于移动搜索引擎向手机移动设备的用户提供相应移动版的网页；
2、可以用于告诉搜索引擎网站的RSS聚合内容和sitemap网站地图的位置，利于搜索引擎抓取网页内容；
3、可以用于选择不同CSS样式表文件之间的相互切换控制效果
公司全身心跨境电子商务行业八年服务，有强悍的专业性卓越团队提供外贸跨境电子商务推广一站式服务，包括跨境电子商务行业独立站建设网站，Saas服务，erp系统，外贸企业网络推广，营销推广，Google，youTube，TK代运营推广服务。
alternate用法
<link>标签的rel=”alternate”属性添加的位置是在网页的头部区域，也就是<head>和</head>之间。
用法1：用于移动搜索适配网站的移动版
第一步：在PC端代码中的页面<head>与</head>中间插入以下这句代码
代码：<linkrel="alternate"media="onlyscreenand(max-width:;
第二步：在移动版页面添加rel=”canonical”属性，将移动版页面规范到PC版页面
代码：<linkrel="canonical"href="http://m.example.com">
2.响应式网站页面设计（RWD）
响应式页面设计的技术引入彻底改变了内容提供方式，并真正改善了移动用户的用户体验。RWD意味着你的网站内容将在不同显示设备之间进行转换，从而针对不同的设备显示宽度调整其布局和分辨率。根据设备宽度的不同，相同的HTML代码将提供给手机和台式机，而CSS将确定呈现页面的适当方式。
响应式设计的优点：
在每个页面的头部文件中添加了如下代码之后<metaname="viewport"content="width=device-width,initial-scale=1">,同学们就不用在为每个页面再去部署专门的移动端设备显示效果版本，为你省下大量的重复性机械化劳动。
响应式设计的缺点：
某些内容在PC端因为设计的需要，可能会对不同板块内容之间进行重叠，这也就意味着div的margin和padding会和初始值有很大的不同，这些设置因为是用代码参数做的，在PC端显示没有问题，但是在移动端展示的时候，因为margin和padding的参数并没有发生改变，所以在移动端显示的时候很可能会发生错位！
3.动态的网站服务（DynamicService）
不知道同学们有没有听说过Bootstrap框架，这是twitter推出的一款前端构建网页的框架，能够很好的适配前端内容在不同显示设备上的展示，特别是针对移动端的内容加载速度有着非常好的表现。Bootstrap框架采用的是12格栅格内容构建技术，通过代码来监听不同显示设备宽度来展现内容。
动态服务的优点：
快速的反应时间，不管是在移动端还是PC端都能够非常快的展现网站页面的内容，如果在优化比较好的情况下，基本上的网页都能够达到秒开的效果。而且展现的内容能够更好的贴合移动端设备的宽度，不会有上面两种方式的显示缺陷
动态服务的缺点：
需要具备一定的前端设计代码基础知识，这其他特别强调对CSS代码的运用。因为在Bootstrap框架中很多原本的css代码已经被重新编辑，同学们需要根据自己网站的实际情况进行有针对性的设计。否则，展现出来的前端内容也是会发生错位的情况。
Zui后，还有一种技术我需要在这里简单的提一下，那就是谷歌官方提出的AMP。AMP页面的非凡速度部分是由于Google缓存了Accelerated页面，以便由其自己的服务器超快地交付这些页面而形成的。AMP技术确实能够大幅度的提高页面在移动端的加载速度，但是这种效果的背后是依靠牺牲一定的JAVASCRIPT效果来实现的。AMP页面是使用特殊的HTML，JS库和CSS代码构建的，严格限制了这些页面以确保可靠的性能。但是，这些功能的限制对很多人来说是不能接受的，所以有一定代码基础的同学都会选择用Bootstrap等框架来重新构建页面的内容！