web前端-《手机移动端WEB资源整合》——meta标签篇

前端网页meta元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。meta标签的作用有：搜索引擎优化（SEO），定义页面使用语言，自动刷新并指向新的页面，实现网页转换时的动态效果，控制页面缓冲，网页定级评价，控制网页显示的窗口等！

下面是对meta标签作用的一些整合...（不常用的不列了，以下都是常用到的）

1、name属性

name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息 和分类信息用的。

举例说明：

(1)keywords用来告诉搜索引擎你网页的关键字是什么。

< meta name="keywords" content="开心鬼看视频,前端大神,web前端,前端开发,UI设计">

(2)description(网站内容描述)

< meta name="description" content="这里是网站的一些描述,这是一个电商网站,这是一个金融公司">

(3)author(标注网站作者)

< meta name="author" content="开心鬼看视频">

(4)robots(robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。)

content的参数有all,none,index,noindex,follow,nofollow。默认是all。

参数：

信息参数为all：文件将被检索，且页面上的链接可以被查询；

信息参数为none：文件将不被检索，且页面上的链接不可以被查询；

信息参数为index：文件将被检索；

信息参数为follow：页面上的链接可以被查询；

信息参数为noindex：文件将不被检索，但页面上的链接可以被查询；

信息参数为nofollow：文件将被检索，但页面上的链接不可以被查询；

(5)copyright(meta标签的copyright的信息参数，代表说明网站版权信息。)

< meta name="copyright" content="开心鬼看视频">



2、http-equiv属性

http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

举例说明：

(1)Refresh(自动刷新并指向新页面。)

< meta http-equiv="Refresh"content="2;URL=http://www.haorooms.com"><br>

(2)Set-Cookie(如果网页过期，那么存盘的cookie将被删除)

< meta http-equiv="Set-Cookie"content="cookie value=xxx;expires=Friday,12-Jan-200118:18:18GMT；path=/">//时间格式得对GMT<br>

(3)Window-target(强制页面在当前窗口以独立页面显示)//这个属性用来防止别人在框架里调用自己的页面

< meta http-equiv="Window-target"content="_top"><br>

(4)content-Type(显示字符集的设定)

< meta http-equiv="content-Type"content="text/html;charset=utf-8">一般设置为utf-8，世界通用字符编码<br>

(5)Page-Enter(页面过渡效果)用的少，效果挺好，但是IE中是可以的，谷歌浏览器是不支持的；

< meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=12)" />

Page-Enter : 进入页面；

Page-Exit : 离开页面；

Site-Enter : 进入网站；

Site-Exit : 离开网站；<br>

0 : 矩形收缩转换。

1 : 矩形扩张转换。

2 : 圆形收缩转换。

3 : 圆形扩张转换。

4 : 向上擦除。

5 : 向下擦除。

6 : 向右擦除。

7 : 向左擦除。

8 : 纵向百叶窗转换。

9 : 横向百叶窗转换。

10 : 国际象棋棋盘横向转换。

11 : 国际象棋棋盘纵向转换。

12 : 随机杂点干扰转换。

13 : 左右关门效果转换。

14 : 左右开门效果转换。

15 : 上下关门效果转换。

16 : 上下开门效果转换。

17 : 从右上角到左下角的锯齿边覆盖效果转换。

18 : 从右下角到左上角的锯齿边覆盖效果转换。

19 : 从左上角到右下角的锯齿边覆盖效果转换。

20 : 从左下角到右上角的锯齿边覆盖效果转换。

21 : 随机横线条转换。

22 : 随机竖线条转换。

23 : 随机使用上面可能的值转换。



移动端专用：

1、H5页面窗口自动调整到设备宽度，并禁止用户缩放页面

< meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

2、忽略将页面中的数字识别为电话号码

< meta name="format-detection" content="telephone=no" />

3、忽略Android平台中对邮箱地址的识别

< meta name="format-detection" content="email=no" />

4、当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari

< meta name="apple-mobile-web-app-capable" content="yes" />

5、将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式

< meta name="apple-mobile-web-app-status-bar-style" content="black" />

6、uc强制竖屏

< meta name="screen-orientation" content="portrait">

7、 QQ强制竖屏

< meta name="x5-orientation" content="portrait">

8、开启对web app程序的支持

< meta name="apple-mobile-web-app-capable" content="yes">

9、 改变顶部状态条的颜色；

< meta name="apple-mobile-web-app-status-bar-style" content="black" />

default：白色 black：黑色 black-translucent：灰色半透明

10、启用360浏览器的极速模式(webkit)

< meta name="renderer" content="webkit">

11、避免IE使用兼容模式

< meta http-equiv="X-UA-Compatible" content="IE=edge">

12、禁止 Chrome 浏览器中自动提示翻译

< meta name="google" value="notranslate">

13、添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）

< meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> myAppStoreID、myAffiliateData、myURL是自己的iphone参数

前端开发移动端通用头部（meta）

< !DOCTYPE html>

< html>

< head>

< meta charset="utf-8">

< meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">

< meta content="yes" name="apple-mobile-web-app-capable">

< meta content="black" name="apple-mobile-web-app-status-bar-style">

< meta content="telephone=no" name="format-detection">

< meta content="email=no" name="format-detection">

< title>开心鬼看视频</ title>

< link rel="stylesheet" href="index.css">

</ head>

< body>

开心鬼看视频

< /body>

</ html>

meta标签常用的大概就是这么一些...

转自头条：http://www.toutiao.com/i6462918146339635725/