一：原因

在编写项目时候，我们看到头部会有meta属性标签，那么他的作用是什么呢？

二：概述

1：定义：

meta是文档级数据元素，用来表示那些不能有其他HTML元相关元素<base>、<link>, <script>、<style>或 <title>）之一表示的任何元数据。

2：数据类型

A：name=>提供的是文档级别的元数据，应用于整个页面

B：http-equiv=>则是编译指令，提供的信息与类似命名的HTTP头部相同

C：charset=>则是一个字符集声明，告诉文档使用哪种字符编码

D：itemprop =>则是提供用户定义的元数据

三：使用

（一）name和content一起使用，前者表示要表示的元数据的名称，后者是元数据的值

1：author,用于表示网页的作者

<meta name="author" content="cqhxb.com">

2：description,用于表示简短而精确，对页面内容的描述

<meta name="description" content="小白博客是面向全球中文开发者的技术内容分享与交流平台。通过技术文章打造一个激发开发者创作灵感，激励开发者沉淀分享，陪伴开发者成长的综合类技术网站。">

3：keywords，与页面内容相关的关键词，使用逗号分割，主要在搜索引擎上用

<meta name="keywords" content="个人博客,小白博客,小白个人博客,黄小白,Vue.js,js,React,前端面试题">

4：viewport，自动生成，主要是初始化大小，目前仅用于移动设备

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

       width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。

       height：和 width 相对应，指定高度。

       initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。

       user-scalable：用户是否可以手动缩放。

       maximum-scale：允许用户缩放到的最大比例。

       minimum-scale：允许用户缩放到的最小比例。

5：robots，用于表示爬虫的行为，爬取数据应该遵循的规则

    content="none"       [忽略此网页]
    content="noindex"    不索引此网页
    content="nofollow"   不继续通过此网页的链接索引搜索其它的网页
    content="all"      [索引全部网页]
    content="index"    索引此网页
    content="follow"   继续通过此网页的链接索引搜索其它的网页

6：renderer，指定渲染方式，

<meta name="renderer" content="webkit"> //默认webkit内核
<meta name="renderer" content="ie-comp"> //默认IE兼容模式
<meta name="renderer" content="ie-stand"> //默认IE标准模式

（二）http-equiv使用，

http-equiv也是和content一起使用，前者表示要表示的元数据的名称，后者是元数据的值。

http-equiv 所有允许的值都是特定 HTTP 头部的名称

1：X-UA-Compatible，用来做浏览器适配的

<meta  http-equiv="X-UA-Compatible" content="IE=edge">

2：content-type，用来声明文档类型和字符集

<meta  http-equiv="content-type" charset="utf-8">

3：x-dns-prefetch-control，HTML页面中的a标签会自动启用DNS提前解析来提升网站性能

<meta http-equiv="x-dns-prefetch-control" content="no">

4：Expires，用于设置浏览器的过期时间, 其实就是响应头中的expires属性

<meta http-equiv="expires" content="31 Dec 2021">

5：refresh,自动刷新并跳转网页

<meta http-equiv="refresh" content="5 url=http://www.cqhxb.com">

6：window-target，强制页面在当前窗口独立页面显示，防止别人在框架中调用自己的页面

<meta http-equiv="window-target" content="_top'>

7：pragma，禁止浏览器从本地计算机的缓存中访问页面的内容

<meta http-equiv="pragma" content="no-cache">

四：总结

1：在爬虫爬取时，meta标签中的能精准提现出关键信息，更好的收录