你必须要知道的meta标签知识

meta标签是html标记语言head区一个非常有用的一个辅助性标签，在所有网页中都可以看到以下代码：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

meta标签的作用有：

搜索引擎优化（SEO）
定义页面使用语言
自动刷新并指向新的页面
实现网页转换时的动态效果
控制页面缓冲
网页定级评价
控制网页显示的窗口等

什么？meta标签居然能有这么多的作用？我竟然还不知道？那就让我们来探讨一下吧

meta标签常见的属性：

charset（HTML5新增）
http-equiv
name
content

下面我们就来简单的介绍一下这几个属性：

charset属性：

它用来定义当前文档的编码方式，告诉浏览器如何解析当前页面:

此属性定义了页面的编码集。建议 UTF-8。

http-equiv属性：

HTTP-EQUIV类似于HTTP的头部协议，它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容。

1 2	meta`标签的`http-equiv`属性语法格式是： `＜meta http-equiv=”参数” content=”参数变量值”＞

其中http-equiv属性主要有以下几种参数：

1.<meta http-equiv=”Set-Cookie” content=”cookievalue=xxx; expires=Friday,12-Jan-2001 18:18:18 GMT; path=/”>:如果网页过期，那么存盘的cookie将被删除。必须使用GMT的时间格式。
2.<meta http-equiv='expires' content='时间' >：用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。
3.<meta http-equiv=”Refresh” content=”5;URL”>：告诉浏览器在【数字】秒后跳转到【一个网址】
4.<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″>：设定页面使用的字符集。
5. <meta charset=”utf-8″>：在HTML5中设定字符集的简写写法。
6.<meta http-equiv=”Pragma” content=”no-cache”>：禁止浏览器从本地计算机的缓存中访问页面内容。访问者将无法脱机浏览。
7.<meta http-equiv=”Window-target” content=”_top”>：用来防止别人在iframe(框架)里调用自己的页面，这也算是一个非常实用的属性。

当然也是有一些弃用的属性，我就不多说了

name属性：

此属性主要用于描述网页，与之对应的属性为content。

content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

下面是name属性的语法：

我在这里列举几个常用的：

keywords(关键字)

用来告诉搜索引擎你网页的关键字是什么，代码实现：
description(网站内容描述)

description用来告诉搜索引擎你的页面主要内容，代码实现：
author(作者)

标注网页的作者，代码实现：
generator

说明网站的采用的什么软件制作，代码实现：
COPYRIGHT

说明网站版权信息，代码实现：

更多的大家如果有需要，可以去查官网

content属性

此属性包含 http-equiv 或者 name 属性的值，具体取决于所使用的值

coder-Tom

作为前端，你必须要知道的meta标签知识