前端网页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">
(2)Set-Cookie(如果网页过期，那么存盘的cookie将被删除)
< meta http-equiv="Set-Cookie"content="cookie value=xxx;expires=Friday,12-Jan-200118:18:18GMT；path=/">//时间格式得对GMT
(3)Window-target(强制页面在当前窗口以独立页面显示)//这个属性用来防止别人在框架里调用自己的页面
< meta http-equiv="Window-target"content="_top">
(4)content-Type(显示字符集的设定)
< meta http-equiv="content-Type"content="text/html;charset=utf-8">一般设置为utf-8，世界通用字符编码
(5)Page-Enter(页面过渡效果)用的少，效果挺好，但是IE中是可以的，谷歌浏览器是不支持的；
< meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=12)" />
Page-Enter : 进入页面；
Page-Exit : 离开页面；
Site-Enter : 进入网站；
Site-Exit : 离开网站；
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>开心鬼看视频
< link rel="stylesheet" href="index.css">
< body>
开心鬼看视频
< /body>
meta标签常用的大概就是这么一些...
转自头条：http://www.toutiao.com/i6462918146339635725/