前端基础知识（二）-meta详解

在前端编码过程中，大部分人对meta的理解估计都停留在上，但是一般网站还有很多关于meta的设置，其它设置的作用又是什么呢？今天来系统的整理一下，有的功能虽然没有在实例中测试，但是还是在网上找了些例子，不全的欢迎补充( ^_ )：

• meta提供了HTML文档的元数据，它不会显示在页面上，但是可以供机器解析
• meta常用于定义页面的说明，关键字、最后修改日期和其它元数据，这些数据将服务于浏览器（如何布局或重载页面），搜索引擎和其它网络服务
• meta标签由两个属性组成，分别是http-equiv属性和name属性：

  name属性主要用于描述网页，与之对应的是content，content是对name的具体描述，便于引擎抓取：

，其中，name属性一共有以下几种参数：
（1）keywords（关键字），用于告诉搜索引擎你网站的关键字，也就是在搜索引擎中输入你在keywords中写的内容，就能搜索到你的网页了。

（2）description（网站内容的描述），用于告诉引擎你网站的主要内容，在根据关键字搜索出网页之后，会显示在description中写的内容。

（3）viewport（移动端的窗口），这个属于移动端页面会用到的属性，控制网页在移动端有较好的显示，具体属性还比较多，后面涉及到会详细介绍相关属性。

（4）robots（定义搜索引擎爬虫的索引方式），用来告诉爬虫哪些页面需要索引哪些页面不需要索引。
，其中content的值有很多，none表示搜索引擎将忽略此网页。
（5）author（作者），用于标注网页作者举例

（6）generate（网页制作软件），用于标注网站的编码软件

（7）copyright（版权），用于注明网页的版权所有

（8）revisit-after（搜索引擎爬虫搜索时间），如果页面不是经常更新，为了减少搜索引擎爬虫对服务器带来的压力，可以设置一个爬虫访问时间。

（9）renderer（双核浏览器渲染方式），用于指定双核浏览器以何种方式渲染。
//默认webkit内核

http-equiv属性，相当于http的头文件作用，equiv的全称是equivalent，有相当于的意思，这样就很容易理解了。

（1）content-Type（设定网页字符集），旧的定义网页编码方式的写法，现在用meta进行定义，旧的方式不建议使用。
//旧的HTML，不推荐
（2）X-UA-Compatible（浏览器采用何种版本渲染当前页面），一般都设置为最新模式，在各大框架中也很常见。
//指定IE和Chrome使用最新版本渲染当前页面
（3）cache-control（指定请求和相应遵循的缓存机制），指导浏览器如何缓存某个响应以及缓存多长时间。
content有很多属性，no-cache表示先发送请求，与服务器确认该资源是否被更改，如果未被更改，则使用缓存。
（4）expires（网页到期时间），用于设定网页的到期时间，过期后网页必须到服务器上重新传输。

（5）refresh（自动刷新并指向某页面），网页将在设定的时间内自动刷新并调向设定的网址。

（6）Set-Cookie（cookie设定），如果网页过期，那么网页存在本地的cookies也会被删除。

（7）mobile-agent（开放手机适配）
站点如果自行适配有困难，可以在PC页面中做简单改造，百度协助实现适配效果。即：站长在站点PC页的源代码头部嵌入一行或多行Meta信息，由Meta信息来指明该PC页对应的手机页的URL，以及该URL对应页面的格式，百度将根据用户终端类型选择最适合展示的页面。
Meta声明标注步骤：
梳理所有与手机页存在一一对应关系的PC页，用于添加Meta声明；无对应关系的PC页面无需添加Meta 。
Meta声明的格式：

注：A. 红色字体部分是需要站点自定义的内容。
[wml|xhtml|html5]——根据手机页的协议语言，选择中的一种。
url=url ——后者代表当前PC页所对应的手机页url，两者必须是一一对应关系（而不是统一对应至手机站首页）
B. name="mobile-agent"为更新后的meta声明，建议使用。原有meta规则http-equiv="mobile-agent"能够兼容并继续生效，已标注过的无需修改。
Meta声明示例：

 ```