meta标签始终位于head标签里，用于给浏览器提供一些信息。或许你经常使用的meta只有那么几个，但是它却是必不可少的。下面我们来总结一下meta标签各种用处。
SEO优化
<meta name="keywords" content="your keywords">
<meta name="description" content="your description">
<meta name="author" content="author,email address">
<meta name="robots" content="index,follow">
<meta name="generator" content="Sublime">
<meta name="copyright" content="本网站版权归xxx所有">
<meta name="revisit-after" content="5 days" >
-
keywords：关键字，告诉搜索引擎你的网页的关键字
-
description：描述，网页的主要内容
-
author：作者，网页的作者
-
robots：泛指所有搜索引擎（可以指定搜索引擎如：
GooglebotBaiduspide等），如果content有多个值，用逗号分开，但是不能是对立的两个值。
index：告诉搜索引擎抓取这个页面
follow：告诉搜索引擎可以从这个页面上找到链接，然后继续访问抓取下去。
all：等价于index, follow
noindex：不允许抓取这个页面
nofollow：不允许从这个页面找到连接，拒绝其继续访问
none： 等价于noindex，nofollow。
noarchive：禁止建立网页快照
-
generator：网页生成工具，编辑器
-
copyright：标注版权
-
revisit-after：通知搜索引擎多久访问一次
添加http头部内容
http-equiv属性是添加http头部内容。
1. Refresh(重定向)
设置打开该网页5秒之后，重定向到百度首页。如果没有写重定向地址，就是刷新当前页。
<meta http-equiv="Refresh" content="5; url=http://www.baidu.com">
<meta http-equiv="Refresh" content="5">
2. expires（网页有效期）
用于设定网页的有效期，如果超出这个期限就要重新传输，需要注意的是这里时间格式应该是GMT的格式。
<meta http-equiv="expires" content="Wed Jul 11 2018 14:02:57 GMT+0800">
3. set-cookie（创建cookie）
创建一个cookie，包括cookie名、值、有效期、路径。
<meta http-equiv="Set-Cookie" content="cookievalue=xiaoxiao;expires=Wed, Jul 11 2018 14:12:34 GMT+0800;path=/">
不知道为什么自己写报错了，说不能从meta标签设置cookie。
error.png
4. content-type（返回内容的MIME类型）
通常用于字符集的设置。
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
5. Pragam（cache模式）
禁止浏览器从本地缓存读取页面内容，使网站无法脱机浏览。
<meta http-equiv="Pragma" content="no-cache">
6. cache-control（控制文档缓存机制）
如果要控制文档不缓存
<meta http-equiv="cache-control" content="no-cache">
这里支持的属性有：
-
public：所有内容都被缓存（客户端和代理服务器都缓存）
-
private：只缓存到私有缓存中（仅客户端缓存，代理服务器不缓存）
-
no-cache：不缓存
-
no-store：缓存但是不归档。
7.X-UA-Compatible（强制IE浏览器的渲染方式）
如果使用这个属性，会使IE浏览器强制使用某种引擎渲染页面。这样可以使用最新的引擎来渲染。
<meta http-equiv="X-UA-Compatible" content="IE=8">
<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
第一行是使用IE8的引擎来渲染页面。第二行是使用IE最新的edge引擎来渲染。chrome=1可以激活Chrome Frame---谷歌开发的Google Chrome Frame(谷歌内嵌浏览器框架GCF)。如果安装了GCF则使用chrome内核渲染。
移动端
视口
H5开发必须要使用的标签，来控制视口大小和缩放比例。
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
-
width=device-width：宽度等于屏幕宽度
-
initial-scale=1：初始缩放比例为1
-
minimum-scale=1：最小缩放比例为1。maximum-scale=1为最大缩放比例。
-
user-scalable=no：禁止用户缩放
-
shrink-to-fit=no：这个属性针对IOS9。在IOS9中设置
width=device-width和initial-scale=1之后，如果内容宽度超出屏幕，会自动缩放进屏幕里，也就是initial-scale=1属性没有生效（IOS9可能发生变化了），这里需要用该属性解决。
指定屏幕方向
QQ浏览器下
<meta name="x5-orientation" content="landscape/portrait">
landscape：强制横屏
portrait：强制竖屏
UC浏览器下
<meta name="screen-orientation" content="portrait">
全屏模式显示（应用模式）
QQ浏览器下
<meta name="x5-fullscreen" content="true">
<meta name="x5-page-mode" content="app">
UC浏览器下
<meta name="full-screen" content="yes">
<meta name="browsermode" content="application">
IOS下禁止识别手机号、邮箱
<meta name="format-detection" content="telephone=no">
<meta content="email=no" name="format-detection" />
可以写在一起
<meta name="format-detection" content="telephone=no, email=no">
字符编码
声明文档使用的字符编码，解决乱码问题。
<meta charset="utf-8">
网友评论