【胡乱补补基础】meta标签中name和http-equiv的区别

前言：啊啊啊，大后天就可以出去玩啦

来来来，进入正题，meta标签共有两个属性，分别是http-equiv属性和name属性。

一、name属性

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

以下是一些常见的 name 属性值：

1.description：页面的简要描述，搜索引擎可能会在搜索结果中显示这个描述。例如，<meta name="description" content="This is an example page.">。

2.keywords：描述页面内容的关键词，用于搜索引擎优化。例如，<meta name="keywords" content="HTML, CSS, JavaScript">。但是，现在大多数搜索引擎（包括 Google）已经不再使用这个元标签来确定搜索排名。

3.author：页面的作者。例如，<meta name="author" content="John Doe">。

4.viewport：用于控制页面在移动设备上的视觉展现方式。例如，<meta name="viewport" content="width=device-width, initial-scale=1">。

5.robots：用于控制搜索引擎爬虫的行为。例如，<meta name="robots" content="noindex, nofollow">。

6.generator：表示生成页面的软件。例如，<meta name="generator" content="WordPress 5.6">。

7.application-name：网页应用的名称。例如，<meta name="application-name" content="My Web App">。

8.theme-color：定义浏览器工具栏的颜色（仅在支持的浏览器中有效）。例如，<meta name="theme-color" content="#4285f4">。

二、http-equiv属性

http-equiv属性：可以被称作http响应头、http文件头，当浏览器请求某个文件时，首先会加载此响应（文件）头内的设置。与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

以下是一些常见的 http-equiv 属性值：

1.content-type：用于定义文档的 MIME 类型以及字符编码。例如，<meta http-equiv="content-type" content="text/html; charset=UTF-8">。

2.refresh：用于定时刷新页面或重定向到另一个页面，如果不写URL，默认为刷新当前页面。例如，<meta http-equiv="refresh" content="5; url=http://www.example.com/"> 会在 5 秒后将用户重定向到 example.com。

3.expires：用于定义页面的过期日期和时间。例如，<meta http-equiv="expires" content="Wed, 21 Jun 2024 14:25:27 GMT">。

4.cache-control：用于控制文档的缓存机制。例如，<meta http-equiv="cache-control" content="no-cache">。

5.pragma：用于防止浏览器缓存页面。例如，<meta http-equiv="pragma" content="no-cache">。

6.set-cookie：用于从 HTML 文档中设置 Cookie。如果网页过期，那么这个网页存在本地的cookies也会被自动删除。例如，<meta http-equiv="set-cookie" content="name=value; expires=date; path=url">。

三、http-equiv和name可以一起使用吗？

在同一个 <meta> 标签中，name 和 http-equiv 属性通常不会一起使用。这是因为这两个属性都是用来定义元数据名称的，但它们的用途和行为有所不同，通常不会在同一种情况下使用。

• name 属性用于描述文档的某个特定的元数据，如关键词、描述等。

• http-equiv 属性用于模拟 HTTP 响应头字段，如刷新页面、设置字符集等。

因此，你通常会在不同的 <meta> 标签中分别使用这两个属性，而不是在同一个标签中同时使用。例如：

<meta name="description" content="This is an example of a meta description.">
<meta http-equiv="refresh" content="30">

这个例子中，我们在两个不同的 <meta> 标签中分别使用了 name 和 http-equiv 属性。这样，每个标签都可以根据其属性执行特定的任务。

总的来说，name和http-equiv都用于定义元数据，但name主要用于描述文档的内容，而http-equiv主要用于模拟HTTP响应头字段。

有什么是节后再说，这两天只想摸鱼 bye bye