在PC端开发中，你可能没有怎么关注 meta 标签，但在移动端开发中，如果你忽略了它，会使你陷入疯狂中[为曾经抹泪.jpg]。其实不止是移动开发，网站的SEO，也离不开它。下面就来看下关于 meta 标签，你应该知道的事。
基本知识
meta标签提供了一些基本的元数据，虽然不会显示在页面上，但会被浏览器解析。
定义：
元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
标签位于文档的头部，不包含任何内容。
标签的属性定义了与文档相关联的名称/值对。
属性：
| 属性名 | 值 | 说明 |
|---|
| charset (html5) | character_set | 定义文档的字符编码 |
| content | text | 定义与http-equiv或name属性相关的元信息 |
| http-equiv | content-type,default-type,refresh | 把content属性关联到HTTP头部 |
| name | application-name,author,description,generator,keywords | 把content属性关联到一个名称 |
| scheme | format/URI | HTML5不支持。定义用于翻译content属性值的格式。 |
常见用法：
http-equiv，相当于http头文件作用。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| <meta http-equiv='Content-Type' content='Type=text/html; charset=utf-8'>
//声明网页字符编码，上述的书写方式，目前更多的被下面更简单，向后兼容的声明方式所替代。
<meta charset="utf-8" />
//X-UA-Compatible 是用来设置IE兼容模式，支持IE8及以上的浏览器，不支持IE7。
<meta http-equiv="X-UA-Compatible" content="IE=6" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
//refresh 声明页面定时刷新或跳转
<meta http-equiv='refresh' content='5' />
<meta http-equiv='refresh' content='5;url=http://jiaochunxiao.github.io' />
//关于使用IE版本和Chrome
//强制使用IE最新版本的标准模式，强制IE使用Chrome Frame，最好的
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
//expires 网页到期时间
<meta http-equiv='expires' conotent=''>
//cache-control
<meta http-equiv='cache-control' content='no-cache'>
1. no-cache:必须先向服务器确认返回的响应是否发生变化，然后使用该响应来满足后续对同一网址的请求。因此如果存在合适的验证令牌（ETag),no-cache会发起往返通信来验证缓存的响应。如果资源未发生变化，则避免下载。
2. no-store:直接禁止浏览器及所有中间缓存存储任何版本的响应，每次用户请求该资源时，都会向服务器发送请求，并下载完整响应。
3. public:缓存所有响应，即使它有关联的HTTP身份验证。大多数情况下，public不是必需的，因为明确的缓存信息已表示响应是缓存的。
4. private:通常只为单个用户缓存，不允许任何中间缓存对其进行缓存。例：用户浏览器可缓存包含个人信息的网页，但cdn不能缓存。
5. max-age:指定从请求的时间开始，允许获取的响应被重用的最长时间，即在该时间段内，不用去服务器重新请求。
|
name
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| //声明作者信息
<meta name='author' content='jiaochunxiao' />
//声明文档关键字，有利于SEO
<meta name='keywords' content='web,html,css,jiaochunxiao' />
//声明文档描述网页内容的相关信息，搜索引擎也会使用它。
<meta name='description' content='前端学习...' />
//声明网页搜索引擎索引方式
//通常取值有all,none,index,follow,noindex,nofollow
//all:文件将被检索，且页面上的链接可以被查询
//none:文件将被忽略，搜索引擎不检索，等价于noindex,nofollow
//index:文件将被检索
//follow:页面上的链接可被查询
//noindex:文件不被检索
//nofollow:页面上的链接不可被查询
<meta name='robots' content='index,follow' />
//关于浏览器内核控制，针对国内使用双核的浏览器，告诉浏览器选择合适内核渲染。
<meta name="renderer" content="webkit|ie-comp|ie-stand" />
//网站重访,通知搜索引擎多少天访问一次
<meta name="revisit-after" content="1days">
//copyright
<meta name='copyright' content='相关信息'>
//generator
<meta name='generator' content='xxxx'>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
| //定义可视区域，屏幕禁止缩放
//width：viewport的高度
//initial-scale:屏幕的初始缩放比例
//maximus-scale:允许屏幕缩放的最大比例
//minimus-scale:允许屏幕缩放的最小比例
//user-scalable:是否允许用户手动缩放
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
//开启全屏模式
//uc浏览器全屏，只写第一行也可以实现
<meta name="full-screen" content="yes">
<meta name="browsermode" content="application">
//QQ浏览器全屏
<meta name="x5-orientation" content="portrait">
<meta name="x5-fullscreen" content="true">
<meta name="x5-page-mode" content="app">
//设置屏幕方向，强制竖屏或者横屏
//UC浏览器，content取值为portrait（竖屏）、landscape（横屏）
<meta name="screen-orientation" content="portrait">
//QQ浏览器，content取值为portrait（竖屏）、landscape（横屏）
<meta name="x5-orientation" content="portrait" />
//隐藏状态栏/设置状态栏颜色，ios私有属性
//只在开启全屏模式下才生效，content值为：default（白色）/black（黑色）/black-translucent（半透明）
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
//启用webapp模式，ios私有属性
<meta name="apple-mobile-web-app-capable" content="yes" />
//忽略数字自动识别为电话
<meta name="format-detection" content="telephone=no" />
//忽略自动识别邮箱
<meta name="format-detection" content="email=no" />
|
参考：
