关于对meta标签的用法汇总

关于对<meta>标签的用法汇总

大家平时写html对<meta>标签应该不陌生吧，你最常见的<meta>是长什么样的呢？是不是。。。↓↓↓

<meta charset="utf-8" />

果然。。。
当然了，用过bootstrap的伙伴可能还知道

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

好吧，其实<meta>还有好一大坨东西，这你就不知道了叭。
得得得，我给你们扫盲一下（其实我也差不多hhhhhhhhhh）
因为之前写网页就知道meta标签硬要这么写，也不知道为啥，正所谓知其然而不知其所以然。现在写项目好像遇到麻烦了，所以干脆查个明白，把<meta>的用法做个汇总，方便自己以后查阅。

首先，<meta>按大类分的话，它有两类：name 和 http-equiv，name属性主要用于描述网页，对应于content（网页内容），以便于搜索引擎机器人查找、分类（目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类）。这其中最重要的是description（站点在搜索引擎上的描述）和keywords（分类关键词），所以应该给每页加一个meta值。

<meta name="..." content="..." />
<meta http-equiv="..." content="..." />

下面咱们来分类罗列→→

1. <meta name="…" content="…" />

<meta name="keywords" content="关键词1，关键词2，……，关键词n" />

告诉浏览器当前页面的关键词，多个关键词之间用逗号（英文）隔开。
Tips：

• 越核心的词越放在前面
• 避免生僻字，易于用户搜索
• 避免大量堆砌关键词

<meta name="description" content="内容" />

告诉浏览器当前页面的大概内容。
Tips：

• 内容应为以自然语言描述的句子，而不是罗列关键词
• 内容应为希望在搜索引擎的检索结果中展示的摘要信息，且与页面标题、主题高度相关。
• 最好不要超过255个字符，超过的话搜索引擎将只截取前255个字符作为检索依据。

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

这个boostrap标配鸭！
它还有一个更完整，兼容性更强的版本

<meta name="viewport" content="width=device-width, initial-scale=1.0， maximum-scale=1.0, user-scalable=no" />

一般用于移动端的响应式网页

<meta name="author" content="内容（例如：admin@admin.com）" />

注明网页作者

<meta name="copyright" content="内容（例如：admin）" />

注明网页版权

<meta name="renderer" content="webkit" />  
<meta name="renderer" content="ie-comp" /> 
<meta name="renderer" content="ie-stand" />

指定浏览器采用哪一个内核渲染页面（仅限于多核浏览器）
它只有三个值webkit、ie-comp（IE兼容核）和ie-stand（IE标准核）

2. <meta http-equiv="…" content="…" />

<meta http-equiv="Cache-Control" content="..." />
或者
<meta http-equiv="Pragma" content="..." />

content有以下取值：

• no-cache：先发送请求与服务器确认资源是否被更改，未改动则调用缓存。
• no-store：任何条件下响应都不会被缓存，并且不会被写入到客户端的磁盘里，这是基于安全考虑的某些敏感的响应才会使用这个。
• max-age：表示在多久内能被缓存和重用，而不用去向服务器重新请求。它的取值按秒计，如

<meta http-equiv="Cache-Control" content="max-age=31536000" />
//设置缓存时间为1年
//资源的内容非常稳定，长时间内都不会发生变更，那么我们就可以声明浏览器长时间缓存该资源（31536000秒，即一年），只要用户不手动清理浏览器缓存，一年内源服务器都不再会收到当前浏览器对该资源的请求。

其中，Cache-Control和Pragma的区别:

Pragma: no-cache兼容http 1.0 ，Cache-Control: no-cache是http 1.1提供的。因此，Pragma: no-cache可以应用到http 1.0 和http 1.1,而Cache-Control: no-cache只能应用于http 1.1.
引用自 header(头域)中缓存设置的详解（关于Cache-control和Pragma）

关于浏览器的缓存机制，这里引用一张图，正所谓一图胜千言嘛。

（关于浏览器的缓存机制的介绍，以后有时间去深究这一块儿再另开一帖详细讲解）
这里提供两篇在缓存机制这方面讲得很好的博客

• https://www.zhoulujun.cn/html/theory/network/2018_0306_8078.html
• https://blog.csdn.net/lqlqlq007/article/details/79940017

好，咱们继续回到正题

<meta http-equiiv="Expires" content="Mon,1 May 2019 00:00:00 GMT" />

设定网页到期的时间，一旦过期必须到服务器上重新调用。注意content里的时间必须使用GMT格式，如不需要设置时间，直接填content=“0”。

<meta http-equiv="Refresh" content="5;url=所要跳转的网址" />

让当前页面在5秒后跳转到指定页面

<meta http-equiv="Content-Type" content="text/html;charset=编码集（如：gb2312、utf-8）"  />

设定页面采用的字符编码集（旧方法）

<meta charset="编码集（如：gb2312、utf-8）" />

设定页面采用的字符编码集（html5新增方法）

好了，汇总完毕~
请指挥部做下一步指示~
（PS：本文做了大量引用，如有冒犯立马删剪）