前端基础知识:Meta标签的那些事
Meta标签是HTML语言head区的一个辅助性标签,它位于HTML文档头部的head标记和title标记之间,它提供用户不可见的信息。它可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他web服务。
我现将前端页面开发经常用到的meta标签内容整理成文,加入了移动端web开发meta信息,供需要时查阅。
1、申明文档使用的字符编码
<meta charset='utf-8'>
或
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
该 meta 标签定义了 HTML 页面所使用的字符集为 utf-8 ,就是万国码。它可以在同一页面显示中文简体、繁体及其它语言(如日文,韩文)等。当然,你也可以使用gb2312(简体中文),big5(繁体中文)等等其他字符集。
而目前我们一般推荐使用第一种写法,也是HTML5使用的写法。
2、声明使用的浏览器及版本
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
当指定的content值为IE=edge,chrome=1时,优先使用 IE 最新版本和 Chrome。假定客户端安装了Google Chrome Frame,则在IE中使用chrome的渲染引擎来渲染页面,否则,将会使用客户端IE最高的标准模式对页面进行渲染。
还有以下几种设置方式:
<meta http-equiv="X-UA-Compatible" content="IE=6" /><!-- 使用IE6 -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /><!-- 使用IE7 -->
<meta http-equiv="X-UA-Compatible" content="IE=8" /><!-- 使用IE8 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!--指示IE以目前可用的最高模式显示内容-->
3、SEO优化相关
页面描述,每个网页都应有一个不超过 150 个字符且能准确反映网页内容的描述标签。
<meta name="description" content="不超过150个字符" />
页面关键词,每个网页应具有描述该网页内容的一组唯一的关键字。
使用人们可能会搜索,并准确描述网页上所提供信息的描述性和代表性关键字及短语。
<meta name="keywords" content="html5, css3, 关键字"/>
定义网页作者,非必要
<meta name="author" content="月光光" />
4、页面重定向和刷新:content内的数字代表时间(秒),既多少时间后刷新。如果加url,则会重定向到指定网页。
<meta http-equiv="Refresh" contect="5;url=http://www.helloweba.com" />
上述代码表示停留5秒钟后自动刷新跳转到URL网址http://www.helloweba.com。
5、Expires网页过期时间
<meta http-equiv="Expires" contect="Mon,12 May 2016 00:20:00 GMT" />
设定网页的到期时间,一旦过期则必须到服务器上重新调用,需要注意的是必须使用GMT时间格式,或直接设为0(不缓存)。
6、Pragma禁止本地缓存
<meta http-equiv="Pragma" contect="no-cache" />
设定网页不保存在缓存中,每次访问都刷新页面。这样设定,访问者将无法脱机浏览。
7、viewport移动设备屏幕可视区域
由于移动设备屏幕宽度不同于传统 web,因此我们需要改变 viewport 值。
大部分4.7-5寸设备的viewport宽设为360px;5.5寸设备设为400px;iphone6设为375px;ipone6 plus设为414px。
width – viewport 的宽度 (范围从 200 到 10,000,默认为 980 像素)
height – viewport 的高度 (范围从 223 到 10,000 )
initial-scale – 初始的缩放比例 (范围从 > 0 到 10)
minimum-scale – 允许用户缩放到的最小比例
maximum-scale – 允许用户缩放到的最大比例
user-scalable – 用户是否可以手动缩放 (no,yes)
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
强制让文档与设备的宽度保持 1:1 ;
文档最大的宽度比列是1.0( initial-scale 初始刻度值和 maximum-scale 最大刻度值);
user-scalable 定义用户是否可以手动缩放( no 为不缩放),使页面固定设备上面的大小;
注意:实际测试中发现,有些安卓系统自带的浏览器并不支持这一条规则,能够对页面进行放大,一旦放大响应的 box 也随之放大,导致页面出现错乱问题,解决方法:定义页面的最小宽度。
body {
min-width: 320px;
}
注意,很多人使用initial-scale=1到非响应式网站上,这会让网站以100%宽度渲染,用户需要手动移动页面或者缩放。如果和initial-scale=1同时使用user-scalable=no或maximum-scale=1,则用户将不能放大/缩小网页来看到全部的内容。
对于移动设备上的meta还有以下一些设置。
8、WebApp全屏模式:伪装app,离线应用。
<meta name="apple-mobile-web-app-capable" content="yes" />
9、隐藏状态栏/设置状态栏颜色:只有在开启WebApp全屏模式时才生效。content的值为default | black | black-translucent 。
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
10、添加到主屏后的标题
<meta name="apple-mobile-web-app-title" content="标题" />
11、忽略数字自动识别为电话号码
<meta content="telephone=no" name="format-detection" />
12、忽略识别邮箱
<meta content="email=no" name="format-detection" />
更多Meta标签相关信息我会持续更新,感谢关注。
部分客户装了QQ浏览器,微信实际调用的是QQ浏览器,有时候甚至光清理微信缓存都无效,QQ浏览器的缓存也要清。
按照网上的文章在页面头部加上了如下的内容:
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
解决方案是在调试阶段或者频繁更新的页面加入以下头信息:
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
最简单的办法就是
地址带随机数参数,同时页面的头标记声明禁止缓存。另外还需要检查你程序的页缓存,是不是做了页缓存。
QQ临时会话在网页中加一行代码就可以了,那么在手机中如何来添加呢,今天我们就一起来看一个例子,具体的细节如下所示.function qqcao(){
var type = undefined;
var param = "";
var sid = 2;
var rawuin = 'qq号码';
var qsig = "undefined";
var QQApi = {
openURL: function(url){
var i = document.createElement('iframe');
i.style.display = 'none';
i.onload = function() { i.parentNode.removeChild(i); };
i.src = url;
document.body.appendChild(i);
var returnValue = QQApi.__RETURN_VALUE;
QQApi.__RETURN_VALUE = undefined;
return returnValue;
},
isAppInstalled: function(scheme) {
var parameters = {'scheme':scheme};
var r = QQApi.openURL('jsbridge://app/isInstalled_?p=' + encodeURIComponent(JSON.stringify(parameters)));
return r ? r.result : null;
},
isQQWebView: function(){
return QQApi.isAppInstalled('mqq') == true;
},
__RETURN_VALUE: undefined
};
var usa=navigator.userAgent;
var p;
var mobile_q_jump = {
android:"https://play.google.com/store/apps/details?id=com.tencent.mobileqq",
ios:"itms-apps://itunes.apple.com/cn/app/qq-2011/id444934666?mt=8",
winphone:"http://www.windowsphone.com/zh-cn/store/app/qq/b45f0a5f-13d8-422b-9be5-c750af531762",
pc:"http://mobile.qq.com/index.html"
};
var isMQ = 0;
if(typeof type == "undefined") type = 1;
if(usa.indexOf("Android")>-1){
p = "android";
}
else if(usa.indexOf("iPhone")>-1 || usa.indexOf("iPad")>-1 || usa.indexOf("iPod")>-1){
p = "ios";
}
else if(usa.indexOf("Windows Phone") > -1 || usa.indexOf("WPDesktop") > -1){
p = "winphone";
}
else {
p = "pc";
}
if(p == "ios"){
//防止循环
if(history.pushState)
history.pushState({},"t","#");
isMQ = QQApi.isQQWebView();
if (!isMQ){
var sc = document.createElement("script");
sc.src = "http://__.qq.com/api/qqapi.js";
sc.onload = function(){
if(window['iOSQQApi']){
isMQ =iOSQQApi.device.isMobileQQ();
}
};
document.body.appendChild(sc);
}
}
else if(p == "pc" && qsig != "undefined"){
window.open(qsig,"_self");
}
if(type == 1){//手Q
var isSuccess = true;
var f = document.createElement("iframe");
f.style.display = "none";
document.body.appendChild(f);
f.onload = function(){
isSuccess = false;
};
if(p == "ios" && sid == 1){
f.src = "mqqapi://card/show_pslcard?src_type=internal&version=1&uin="+ rawuin +"&card_type=person&source=qrcode";
}
if(p == "ios" && sid == 2){//ios并且为群名片
f.src = "mqqapi://card/show_pslcard?src_type=internal&version=1&uin="+ rawuin +"&card_type=person&source=qrcode";
}
else if(p != "pc"){
var url = window.location.href.split("&");
f.src = "mqqopensdkapi://bizAgent/qm/qr?url=" + encodeURIComponent(url[0]);
}
if(p == "android" && sid == 1){
f.src = "mqqapi://card/show_pslcard?src_type=internal&version=1&uin="+ rawuin +"&card_type=person&source=qrcode";
}
if(p == "android" && sid == 2){//ios并且为群名片
f.src = "mqqapi://card/show_pslcard?src_type=internal&version=1&uin="+ rawuin +"&card_type=person&source=qrcode";
}
var now = Date.now();
setTimeout( function(){
if((p == "ios" && !isMQ && Date.now() - now < 2000) || (p == "android" && !isSuccess) || ((p == "winphone" && Date.now() - now < 2000))){
var jumpUrl = mobile_q_jump[p];
if(jumpUrl) window.open(jumpUrl,"_self");
}
} , 1500);
}
}
//pc
tencent://Message/?Uin=QQ号码&websiteName=www.cn-mcn.com&Menu=yes
//带图片 pc
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=QQ号码&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:QQ号码:41" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>
<p><iframe class="video_iframe" style="z-index:1;" src="http://v.qq.com/iframe/player.html?vid=t01662frswa&width=500&height=375&auto=0" allowfullscreen="" frameborder="0" height="375" width="500"></iframe></p>
找到一段腾讯视频,比如地址:
最终效果为:
<p ><iframe class="video_iframe" style="z-index:1;" src="http://v.qq.com/iframe/player.html?vid=d0163kxz8di&width=500&height=375&auto=0" allowfullscreen="" frameborder="0" height="375" width="500"></iframe></p>
下面是腾讯视频嵌入网页的效果:
注意了这个视频放进去我们必须在源码方式下使用了,如我们使用dw编辑器的话必须在源码形式直接放到指定的div,如下所示。
相关文章
- 本文涉及的主题虽然很基础,在许多人看来属于小伎俩,但在JavaScript基础知识中属于一个综合性的话题。这里会涉及到对象属性的封装、原型、构造函数、闭包以及立即执行表达式等知识。公有方法 公有方法就是能被外部访问...2015-11-08
- 1、先讲讲JQuery的概念,JQuery首先是由一个 America 的叫什么 John Resig的人创建的,后来又很多的JS高手也加入了这个团队。其实 JQuery是一个JavaScript的类库,这个类库集合了很多功能方法,利用类库你可以用简单的一些代...2014-05-31
- 这篇文章主要介绍了JS创建Tag标签的方法,结合具体实例形式分析了javascript动态操作页面HTML元素实现tag标签功能的步骤与相关操作技巧,需要的朋友可以参考下...2017-06-15
- 这篇文章主要介绍了C# 如何设置label(标签)控件的背景颜色为透明,帮助大家更好的理解和使用c#,感兴趣的朋友可以了解下...2020-12-08
matplotlib之pyplot模块坐标轴标签设置使用(xlabel()、ylabel())
这篇文章主要介绍了matplotlib之pyplot模块坐标轴标签设置使用(xlabel()、ylabel()),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-02-23- 这篇文章主要介绍了C#删除UL LI中指定标签里文字的方法,涉及C#针对页面HTML元素进行正则匹配与替换的相关操作技巧,需要的朋友可以参考下...2020-06-25
- 用灵动标签(e:loop)可以实现各种幻灯效果,本节讲解制作幻灯的基本方法。 如本站JS焦点图频道里的大部分幻灯图片效果都可以用灵动标签调用的。 ...2015-12-30
- 在网页中,我们可以将JavaScript代码放在html文件中任何位置,但一般放在head或body标签里面。一般来说,<script>元素放在哪里与其的功能作用是紧密相关的,通过本文我们一起学习下...2016-01-18
- 一、下载pthreads扩展下载地址:http://windows.php.net/downloads/pecl/releases/pthreads二、判断PHP是ts还是nts版通过phpinfo(); 查看其中的 Thread Safety 项,这个项目就是查看是否是线程安全,如果是:enabled,一般来说...2015-11-24
- 有时候我们在建站的过程当中需要调用内容页中正文的第一张图片(并不是缩略图),这样就会无从下手,但其实对不懂开发的站长是太难了,往往是会用标题图片来取代,下面分享网友们贡献出...2015-12-30
- session和cookie是网站浏览中较为常见的两个概念,也是比较难以辨析的两个概念,但它们在点击流及基于用户浏览行为的网站分析中却相当关键。基于网上一些文章和资料的参阅,及作者个人的应用体会,对这两个概念做一个简单的阐述...2013-09-11
- 带上下箭头jquery垂直tab选项卡切换标签,技持左侧列表上下滚动,滚动到底部带信息提示。复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml...2015-03-15
- 这篇文章主要介绍了PHP正则表达式过滤html标签属性的相关内容,实用性非常,感兴趣的朋友参考下吧...2016-05-06
- 最近在开发一个项目,其中有需求要求我们把一段html转换为一般文本返回,使用正则表达式是明智的选择,下面小编给介绍下C#使用正则表达式过滤html标签,需要的朋友参考下...2020-06-25
- Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。本教程我们来学习一下Flex布局的基本语法知识及运用实例。 网页布局(layout)是CSS的一...2016-09-14
- 通过这篇文章帮助大家快速学习JavaScript DOM操作基础的相关知识,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧...2021-04-30
- 一聚教程网 从零开始的html教程(7),html表单的基础,零基础也能轻松学会html,希望大家喜欢 一、html的表单 表单负责网页中用户输入数据采集的功能,利用<form>标签来定...2016-12-31
- 这篇文章主要介绍了基于mybatis中<include>标签的作用说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-02-20
- 这篇文章主要介绍了python局部变量和全局变量,实例分析了Python中返回一个返回值与多个返回值的方法,需要的朋友可以参考下...2021-10-22
- Markdown是一种可以使用普通文本编辑器编写的标记语言,通过类似HTML的标记语法,它可以使普通文本内容具有一定的格式,下面我们来看一篇关于HTML 标签中的 Markdown 语法...2016-09-20