简介
metadata(元数据),是用于描述数据的数据。它不会显示在页面上，但是机器却可以识别。
作用
meta常用于定义页面的说明，关键字，最后修改日期，和其它的元数据。这些元数据将服务于浏览器（如何布局或重载页面），搜索引擎和其它网络服务(对于网页也来说，metadata就是通过一些字段信息来描述一下当前网页，以便浏览器和搜索引擎在访问到此网页的时候，可以通过这些描述信息来知道如何去解析此网页数据)。
位置
meta标签始终位于head元素内。
属性
一般meta标签中会指定一下一些属性：
-
name
-
http-equiv
-
content
-
charset
一 、charset属性
charset为HTML5中新增的，用来声明字符编码;
<meta charset="UTF-8">
二、 content属性
content属性和name、http-equiv属性配合使用，content属性用来提供属性的值。
三、name属性
name属性主要用于描述网页，比如网页的关键词，叙述等。与之对应的属性值为content，content中的内容是对name填入类型的具体描述，便于搜索引擎抓取。
<meta name="参数" content="具体的描述">
四、http-equiv属性**
http-equiv顾名思义，相当于http协议中文件头的作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
<meta http-equiv="参数" content="参数变量值">
pc端应用
- keywords(关键字)
说明： 用于告诉搜索引擎，你网页的关键字。
用法：
<meta name="keywords" content="Lxxyx,博客，文科生，前端">
- description(网站内容的描述)
说明： 用于告诉搜索引擎，你网站的主要内容。
用法：
<meta name="description" content="文科生，热爱前端与编程。目前大二，这是我的前端博客">
- robots(定义搜索引擎爬虫的索引方式)
说明： robots用来告诉爬虫哪些页面需要索引，哪些页面不需要索引。
-
content的参数有：
- none : 搜索引擎将忽略此网页，等价于noindex，nofollow。
- noindex : 搜索引擎不索引此网页。
- nofollow: 搜索引擎不继续通过此网页的链接索引搜索其它的网页。
- all(默认): 搜索引擎将索引此网页与继续通过此网页的链接索引，等价于index，follow。
- index : 搜索引擎索引此网页。
- follow : 搜索引擎继续通过此网页的链接索引搜索其它的网页。
用法：
<meta name="robots" content="none">
- author(作者)
说明： 用于标注网页作者。
用法：
<meta name="author" content="Lxxyx,841380530@qq.com">
- generator(网页制作软件)
说明： 用于标明网页是什么软件做的:
用法：
<meta name="generator" content="Sublime Text3">
- copyright(版权)
说明： 用于标注版权信息举例：
用法：
<meta name="copyright" content="Lxxyx">
- revisit-after(搜索引擎爬虫重访时间)
说明： 如果页面不是经常更新，为了减轻搜索引擎爬虫对服务器带来的压力，可以设置一个爬虫的重访时间。如果重访时间过短，爬虫将按它们定义的默认时间来访问。
用法：
<meta name="revisit-after" content="7 days" >
- renderer(双核浏览器渲染方式)
说明： renderer是为双核浏览器准备的，用于指定双核浏览器默认以何种方式渲染页面。比如说360浏览器。
用法：
<meta name="renderer" content="webkit"> //默认webkit内核
<meta name="renderer" content="ie-comp"> //默认IE兼容模式
<meta name="renderer" content="ie-stand"> //默认IE标准模式
移动端的应用
- viewport(移动端的窗口)
介绍： 移动设备上的viewport是设备屏幕上用来显示网页的那部分区域，再具体一点就是浏览器上用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域大，也可能比浏览器的可视区域小。在默认情况下，移动设备上的viewport都是大于浏览器可视区域的，这是因为移动设备的分辨率相对于PC来说都比较小，所以为了能在移动设备上正常显示那些为PC浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，由设备本身决定），但后果是浏览器出现横向滚动条，因为浏览器可视区域的宽度比默认的viewport的宽度小。
三个viewport：
（1）layout viewport
如果把移动设备上浏览器的可视区域设为viewport的话，某些网站会因为viewport太窄而显示错乱，所以这些浏览器就默认会把viewport设为一个较宽的值，比如980px，使得即使是那些为PC浏览器设计的网站也能在移动设备浏览器上正常显示。这个浏览器默认的viewport叫做 layout viewport。layout viewport的宽度可以通过 document.documentElement.clientWidth来获取。
（2）visual viewport
layout viewport的宽度是大于浏览器可视区域的宽度的，所以还需要一个viewport来代表浏览器可视区域的大小，这个viewport叫做 visual viewport。visual viewport的宽度可以通过 document.documentElement.innerWidth来获取。
（3）ideal viewport
ideal viewport是一个能完美适配移动设备的viewport。首先，不需要缩放和横向滚动条就能正常查看网站的所有内容；其次，显示的文字、图片大小合适，如14px的文字不会因为在一个高密度像素的屏幕里显示得太小而无法看清，无论是在何种密度屏幕，何种分辨率下，显示出来的大小都差不多。这个viewport叫做 ideal viewport。
ideal viewport并没有一个固定的尺寸，不同的设备有不同的ideal viewport。例如，所有的iphone的ideal viewport宽度都是320px，无论它的屏幕宽度是320还是640。
ideal viewport 的意义在于，无论在何种分辨率的屏幕下，针对ideal viewport 而设计的网站，不需要缩放和横向滚动条都可以完美地呈现给用户。
说明：这个属性常用于设计移动端网页，让网页适配手机窗口，自适应页面离不开这个属性。
利用meta标签对viewport进行控制：
移动设备默认的viewport是layout viewport，但在进行移动设备网站的开发时，需要的是ideal viewport。要得到ideal viewport，需要用到meta标签。
- width：宽度（数值 / device-width）（范围从200 到10,000，默认为980 像素）
- height：高度（数值 / device-height）（范围从223 到10,000）
- initial-scale：页面的初始缩放值（范围从0 到10）
- minimum-scale：允许用户的最小缩放值(范围0.25至10.0之间)
- maximum-scale：允许用户的最大缩放值(范围0.25至10.0之间)
- user-scalable：是否允许用户进行缩放，no 不允许，yes允许
用法：
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。当然maximum-scale=1.0, user-scalable=no不是必需的，是否允许用户手动播放根据网站的需求来定，但把width设为width-device基本是必须的，这样能保证不会出现横向滚动条。
width能控制layout viewport的宽度，如果不指定该属性，layout viewport将默认为980px或1024px（也可能是其它值，由设备本身决定），如果把layout viewport的宽度设置为移动设备的宽度，那么layout viewport将成为ideal viewport。
其实，要把当前的viewport宽度设为ideal viewport的宽度，既可以设置width=device-width，也可以设置initial-scale=1，但有一个小缺陷，就是width=device-width会导致iphone、ipad横竖屏不分，initial-scale=1会导致IE横竖屏不分，都以竖屏的ideal viewport宽度为准。所以，最完美的写法两者都写上去， initial-scale=1 解决 iphone、ipad的缺陷，width=device-width解决IE的缺陷。
如果不是响应式网站，不要使用initial-scale或者禁用缩放，注意，很多人使用initial-scale=1到非响应式网站上，这会让网站以100%宽度渲染，用户需要手动移动页面或者缩放。如果和initial-scale=1同时使用user-scalable=no或maximum-scale=1，则用户将不能放大/缩小网页来看到全部的内容。
- format-detection
说明： 我们可以通过这个属性禁止自动识别电话和邮箱。
用法：
<meta name="format-detection" content="telephone=no,email=no"/>
- apple-mobile-web-app-capable（网站开启对web app程序的支持）
说明： apple-mobile-web-app-capable的作用就是删除默认的苹果工具栏和菜单栏。content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时，这个行meta就不用加了，默认就是显示。
用法：
<meta name="app-mobile-web-app-capable" content="yes"/>
- apple-mobile-web-app-status-bar-style（改变顶部状态条的颜色）
说明： 在web app应用下状态条的颜色为黑色，默认值为default(白色)，可以定义为black（黑色）和black-translucent(灰色半透明)；
用法：
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
网络传输应用
- content-Type(设定网页字符集)(推荐使用HTML5的方式)
说明： 用于设定网页字符集，便于浏览器解析与渲染页面。
用法：
<meta http-equiv="content-Type" content="text/html;charset=utf-8"> //旧的HTML，不推荐
<meta charset="utf-8"> //HTML5设定网页字符集的方式，推荐使用UTF-8
- X-UA-Compatible(浏览器采取何种版本渲染当前页面)
说明： 用于告知浏览器以何种版本来渲染页面。（一般都设置为最新模式，在各大框架中这个设置也很常见。)
用法：
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome使用最新版本渲染当前页面
- cache-control(指定请求和响应遵循的缓存机制)
用法1.
说明： 指导浏览器如何缓存某个响应以及缓存多长时间。
用法：
<meta http-equiv="cache-control" content="no-cache">
content属性的值：
- no-cache: 先发送请求，与服务器确认该资源是否被更改，如果未被更改，则使用缓存。
- no-store: 不允许缓存，每次都要去服务器上，下载完整的响应。（安全措施）
- public : 缓存所有响应，但并非必须。因为max-age也可以做到相同效果
- private : 只为单个用户缓存，因此不允许任何中继进行缓存。（比如说CDN就不允许缓存private的响应）
- maxage : 表示当前请求开始，该响应在多久内能被缓存和重用，而不去服务器重新请求。例如：max-age=60表示响应可以再缓存和重用 60 秒。
用法2.(禁止百度自动转码)
说明： 用于禁止当前页面在移动端浏览时，被百度自动转码。虽然百度的本意是好的，但是转码效果很多时候却不尽人意。所以可以在head中加入如下代码，就可以避免百度自动转码了。
用法：
<meta http-equiv="Cache-Control" content="no-siteapp" />
- expires(网页到期时间)
说明: 用于设定网页的到期时间，过期后网页必须到服务器上重新传输。必须使用GMT的时间格式。
用法：
<meta http-equiv="expires" content="Sunday 26 October 2016 01:00 GMT" />
- refresh(自动刷新并指向某页面)
说明： 网页将在设定的时间内，自动刷新并调向设定的网址。
用法：
<meta http-equiv="refresh" content="2；URL=http://www.lxxyx.win/"> //意思是2秒后跳转向我的博客
- Set-Cookie(cookie设定)
说明： 如果网页过期。那么这个网页存在本地的cookies也会被自动删除。
用法：
<meta http-equiv="Set-Cookie" content="name, date"> //格式
<meta http-equiv="Set-Cookie" content="User=Lxxyx; path=/; expires=Sunday, 10-Jan-16 10:00:00 GMT"> //具体范例
扫一扫
973
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
