关于前端元信息（META标签）的含义与作用统计

一、http-equiv

1.Content-Type（内容类型）

告诉浏览器当前访问的资源类型并声明编码
不要使用该指令因为它已过时。使用 元素的charset 属性代替。

<!-- Defining the charset in HTML4 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<!-- In HTML5 -->
<meta charset="utf-8">

2.refresh（重定向）

重定向（以下示例5秒后会跳转到：http://www.baidu.com）

<meta http-equiv="refresh" content="5;url='http://www.baidu.com'" />

3.Set-Cookie（cookie设定）

网页过期则cookie将会被删除(必须是GMT的时间格式)
警告：请勿使用此说明，因为它已过时。请改用HTTP的Set-Cookie头部。

二、name

1.keywords

页面的关键字，是写给搜索引擎看的，关键字可以有多个用 ‘,’号隔开

<meta name="keywords" content="HTML,CSS,JAVASCRIPT,PHP">

2.description

页面的描述，是写给搜索引擎看的，关键字可以有多个用 ‘,’号隔开

<meta name="description" content="html meta标签大全,整理一下加强记忆">

3.robots(机器人向导)

robots用来告诉搜索机器人，哪些页面需要索引，哪些不需要。
用来阻止搜索引擎获取拷贝页面、私密页面和未完成的页面。

<meta name="robots" content="none">

content：
  all：默认值，文件将被检索，且页面上的链接可以被查询；
  none：文件将不被检索，且页面上的链接不可以被查询；
  index：文件将被检索；
  follow：页面上的链接可以被查询；
  noindex：文件将不被检索；
  nofollow：页面上的链接不可以被查询。

4.author(作者)

标注网页的作者

<meta name="author" content="johnson">

content：
自定义：自定义的作者名；

5.notranslate：让Google不提供一个翻译链接

<meta name="google" content="notranslate" />

6.viewport(视口)

针对移动端视口进行宽高和缩放的设置

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

content：
  width 宽度(数值/device-width)
  height 高度(数值/device-height)
  initial-scale 初始缩放比例
  maximum-scale 最大缩放比例
  minimum-scale 最小缩放比例
  user-scalable 是否允许用户缩放(yes/no)
PS：部分老浏览器不支持 viewport，使用如下 meta 对其进行设备优化

<meta name="HandheldFriendly" content="true">

7.format-detection（禁止默认）

禁止将文本提示为手机号、邮箱、地图链接，否则点击文本将触发默认事件

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

content：
  telephone=no 禁止将文本提示为手机号码
  email=no 禁止将文本提示为邮箱地址
  adress=no 禁止将文本提示为地图链接

8.apple-mobile-web-app-title（添加到主屏后的标题）

添加到主屏后的标题

<meta name="apple-mobile-web-app-title" content="标题" />

9.工具栏设置

设置工具栏的颜色、透明度
safari浏览器添加到主屏幕能看到效果

// webapp全屏模式
<meta name="apple-mobile-web-app-capable" content="yes" /> 
// 在 apple-mobile-web-app-capable 为 yes 的前提下进行设置
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> 

apple-mobile-web-app-status-bar-style
content：
  default 默认值，网页内容从状态栏底部开始
  black 状态栏背景是黑色，网页内容从状态栏底部开始
  black-translucent 状态栏背景是黑色半透明，网页内容充满整个屏幕，顶部会被状态栏遮挡

三、PC端常用

<!-- 使用 IE 标准模式渲染 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 强制 IE 使用 Chrome Frame 渲染 -->
<meta http-equiv="X-UA-Compatible" content="chrome=1">

四、移动端常用

<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0, minimum-scale=1.0,user-scalable=no" />
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="email=no">
<meta name="format-detection" content="adress=no">