-META标签
meta 标签两个属性:
name属性:
主要用于描述网页,比如网页的关键词,叙述等。与之对应的属性值为content,content中的内容是对name填入类型的具体描述,便于搜索引擎抓取。meta标签中name属性语法格式是http-equiv属性:
http-equiv类似于HTTP的头部协议,它回应给浏览器一些有用的信息,以帮助正确和精确地显示网页内容。
语法格式:<meta name / http-equiv="参数" content="具体的描述">
name:
keywords(关键字)
<pre><meta name="keywords" content="淘宝,掏宝,网上购物,C2C,在线交易">
</pre>description(网站内容的描述)
<pre><meta name="description" content="一个人的Blog">
</pre>viewport(移动端的窗口)
<pre>``` <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
- 注意,很多人使用initial-scale=1到非响应式网站上,这会让网站以100%宽度渲染,用户需要手动移动页面或者缩放。如果和initial-scale=1同时使用user-scalable=no或maximum-scale=1,则用户将不能放大/缩小网页来看到全部的内容。
- robots(定义搜索引擎爬虫的索引方式)
<pre>```
<meta name="robots" content="index,follow" />
- robotterms是一组使用逗号(,)分割的值,通常有如下几种取值:none,noindex,nofollow,all,index和follow。确保正确使用nofollow和noindex属性值。
- author(作者)
<pre>```<meta name="author" content="XXXXXXXX@XX.com">```</pre>
- copyright(版权)
<pre>``` <meta name="copyright" content="XXXXXXXXX">
<!--代表该网站为XXXXXXXXX个人版权所有。-->```</pre>
- revisit-after(搜索引擎爬虫重访时间)
<pre>```<meta name="revisit-after" content="7 days" >```</pre>
- 说明:如果页面不是经常更新,为了减轻搜索引擎爬虫对服务器带来的压力,可以设置一个爬虫的重访时间。如果重访时间过短,爬虫将按它们定义的默认时间来访问。举例:
- renderer(双核浏览器渲染方式)
<pre>```<meta name="renderer" content="webkit|ie-comp|ie-stand"> <!-- 与font-family优先规则一样 -->
<meta name="renderer" content="webkit"> <!-- 默认webkit内核 -->
<meta name="renderer" content="ie-comp"> <!-- 默认IE兼容模式 -->
<meta name="renderer" content="ie-stand"> <!-- 默认IE标准模式 -->```</pre>
---
## http-equiv:
- [X-UA-Compatible](https://msdn.microsoft.com/en-us/library/jj676915(v=vs.85).aspx)(浏览器采取何种版本渲染当前页面)
<pre>```<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 关于X-UA-Compatible -->
<meta http-equiv="X-UA-Compatible" content="IE=6" ><!-- 使用IE6 -->
<meta http-equiv="X-UA-Compatible" content="IE=7" ><!-- 使用IE7 -->
<meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->```</pre>
- cache-control(指定请求和响应遵循的缓存机制)
说明:指导浏览器如何缓存某个响应以及缓存多长时间。[参考链接:Google Developers](https://developers.google.com/?hl=zh-cn)[参考链接:HTTP缓存](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching?hl=zh-cn#cache-control)
![](https://segmentfault.com/image?src=http://7xoxxe.com1.z0.glb.clouddn.com/cache.png&objectId=1190000004279791&token=60cc5b81792e199feb8a6b032aff4b83)
<pre>``` <meta http-equiv="cache-control" content="no-cache">
<!-- no-cache: 先发送请求,与服务器确认该资源是否被更改,如果未被更改,则使用缓存。 -->
<!-- no-store: 不允许缓存,每次都要去服务器上,下载完整的响应。(安全措施)-->
<!-- public : 缓存所有响应,但并非必须。因为max-age也可以做到相同效果-->
<!-- private : 只为单个用户缓存,因此不允许任何中继进行缓存。(比如说CDN就不允许缓存private的响应)-->
<!-- maxage : 表示当前请求开始,该响应在多久内能被缓存和重用,而不去服务器重新请求。例如:max-age=60表示响应可以再缓存和重用 60 秒。-->
```</pre>
- expires(网页到期时间)
<pre>```<meta http-equiv="expires" content="Sunday 26 October 2016 01:00 GMT" />
<!-- 用于设定网页的到期时间,过期后网页必须到服务器上重新传输。-->
```</pre>
- refresh(自动刷新并指向某页面)
<pre>```<meta http-equiv="refresh" content="10;URL=http://www.xxx.com/">
<!-- 意思是10秒后跳转向我的博客 -->
```</pre>
- Set-Cookie(cookie设定)
<pre>```
<!-- 如果网页过期。那么这个网页存在本地的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">
<!-- 具体范例 -->```</pre>
---
> 移动web前端meta通用设置:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="MobileOptimized" content="320">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="HandheldFriendly" content="true">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telphone=no, email=no" />
<meta name="screen-orientation" content="portrait">
<meta name="x5-orientation" content="portrait">
<meta name="full-screen" content="yes">
<meta name="x5-fullscreen" content="true">
<meta name="browsermode" content="application">
<meta name="x5-page-mode" content="app">
<meta name="msapplication-tap-highlight" content="no">
---
参考链接:[点击](http://www.maoyupeng.com/web-app-common-meta.html)
参考链接:[点击](https://segmentfault.com/a/1190000004279791)