HTML/CSS - meta标签到底是做什么的

最近这段时间需求比较少，没得啥事干，就折腾一些Webpack有的没的。平时项目打完包也就打完了，也没咋个看打完包后的代码，然后这次就把打完包的index.html打开看了下，发现里面涉及的东西是真的多。

今天先看看 head标签内最上面的内容：meta标签

啥是meta标签

按照 w3school 和 菜鸟驿站 上面的定义，可以总结为以下几点：

• 1、meta元素 可提供或指定 有关页面的元信息（meta-information），如针对搜索引擎和更新频度的描述，关键词，文件的最后修改时间，作者以及其他元数据。
• 2、<meta>标签 定义了关于 HTML 文档的元信息(元数据)，这些元信息不会显示在客户端，但是会被浏览器解析。
• 3、<meta>标签 位于文档的头部【一般位于 head 标签内】，不包含任何内容。
• 4、<meta>标签 的属性定义了与文档相关联的 名称/值 对。
• 5、元数据总是以 名称/值 的形式被成对传递的， 如果没有提供 name 属性，那么 名称/值 对中的名称会采用 http-equiv 属性的值

meta标签使用，属性说明，常见 名称/值 对配置

1、使用实例

<!--实例 1 - 定义文档关键词，用于搜索引擎：-->
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
  
<!--实例 2 - 定义web页面描述：-->
<meta name="description" content="Free Web tutorials on HTML and CSS">
  
<!--实例 3 - 定义页面作者：-->
<meta name="author" content="Hege Refsnes">
  
<!--实例 4 - 每30秒刷新页面：-->
<meta http-equiv="refresh" content="30">
  
<!--实例 5 - 5秒钟后页面重定向到百度：https://www.baidu.com-->
<meta http-equiv="Refresh" content="5;url=https://www.baidu.com" />
  
<!--实例 6 - 3秒钟后页面重定向到百度：https://www.baidu.com--> 
<meta http-equiv="Refresh" content="3;URL=https://www.baidu.com" />

注：从实例4、实例5、实例6可以看出，meta标签的 名称/值 它们所对应的值不敏感大小写

2、属性说明

2.1、name属性，name属性提供了 名称/值 对中的名称。

HTML 和 XHTML标签都没有给 <meta>设置初始名称或默认名称。因此通常情况下，我们可以用一些对自己或源文档的读者富有意义的名称l来进行命名。

多数情况下，name属性都是用于网页描述，并与对应的 content 的内容一起便于搜索引擎查找信息、搜索引擎页面分类用的。name设置属性名，content设置属性值。

常用值：

author：标注网页[文档]作者的相关信息，可以是作者的姓名，也可以是其他能够表明作者身份的信息，如邮箱，其他ID等。

<!--文档作者姓名-->
<meta name="author" content="Bill Gates">

<!--文档作者邮箱-->
<meta name="author" content="dihongjingyan@163.com">

description：规定页面的描述信息，是关于当前网页的一段描述。搜索引擎在搜索到该页面后，会把这个描述显示在搜索结果中

<!--页面描述-->
<meta name="description" content="Free web tutorials">

　　 

keywords：规定一个以逗号分隔的关键字(与页面内容相关的关键词汇)列表，这些关键字，会告诉搜索引擎当前页面的主要内容。是一个经常被用到的属性值，搜索引擎会根据这些关键字，对文档(页面)进行分类。

<!--页面关键字-->
<meta name="keywords" content="HTML, meta tag, tag reference">

<!--百度百科 成都市页面关键字(我删除了部分)-->
<meta name="keywords" content="成都, 成都历史沿革, 成都行政区划, 成都地理环境, 成都自然资源, 成都人口, 成都政治, 成都经济, 成都社会事业, 成都交通运输, 成都风景名胜, 成都历史文化">

generator：规定用于生成文档的软件包（不用于手写的页面），表示当前页面HTML文档是用工具自动生成的，没有实际作用，一般是编辑器自动创建的。

<!--vscode 自动生成页面-->
<meta name="generator" content="vscode">

application-name：规定页面所代表的 Web 应用程序的名称。

applicable-device：规定页面是属于什么类型设备的页面，用于告知浏览器当前页面是PC端页面还是移动端页面。便于搜索引擎识别页面类型，保证搜索引擎提交校验识别结果的正确性，减少搜索引擎的误抓取

<!--PC端页面-->
<meta name="applicable-device" content="pc">

<!--mobile(移动)端页面-->
<meta name="applicable-device" content="mobile">

<!--自适应响应式(PC端，移动端都行)-->
<meta name="applicable-device" content="pc,mobile">

如果是自适应响应式页面(content="pc,mobile")的话，就需要和下面的viewport属性值配合使用

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

viewport：控制视口（网页的用户可见区域）。视口因设备而异，在手机上会比在电脑屏幕上小。您应该在所有网页中包含以下 <meta> 视口元素：

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

<meta> viewport 元素向浏览器提供有关如何控制页面尺寸和缩放的说明。

width=device-width 部分将页面的宽度设置为跟随设备的屏幕宽度（这将因设备而异）。

initial-scale=1.0 部分设置浏览器首次加载页面时的初始缩放级别。

revised：规定当前页面(文档)最后修改的时间

<!--最后修改时间-->
<meta name="revised" content="2022-05-31"/>

<!--文档最后修改人 人名或昵称以及最后修改时间-->
<meta name="revised" content="法外狂徒, 2022年05月31日"/>

<!--最后修改文档的所属机构或组织、单位等以及最后修改时间-->
<meta name="revised" content="中国驻火星办事处, 2022/05/31"/>

<!--注：其中的时间并没有固定的格式，符合常规语法表达，能看懂就行，可随意发挥-->

robots：规定搜索引擎是否抓取页面(文档)内容

name=”robots”表示所有的搜索引擎，可以针对某个具体搜索引擎写为name=”BaiduSpider”。

content中的值有四个选项可组合配置：index、noindex、follow、nofollow，选项间以“,”分隔，缺省值为“index,follow”

<!--缺省值-->
<meta name="robots"/>

<!--允许抓取本页，允许跟踪页面上的链接-->
<meta name="robots" content="index,follow"/>

<!--"index,follow"的简写，允许抓取本页，允许跟踪页面上的链接-->
<meta name="robots" content="all"/>
  
<!--注：这三种写法表达的功能是一样的-->

index：允许抓取、索引本页；

noindex：禁止索引本页(可以抓取，但不会出现在搜索结果中，即页面URL不会出现在搜索结果中)

follow：允许跟踪页面上的链接(允许沿着页面中的超链接继续抓取和索引其他页面)；

nofollow：禁止跟踪页面上的链接(禁止沿着页面中的超链接继续抓取及索引其他页面)。

以上的4个选项可以组成4个组合，即：

index,follow：允许抓取、索引本页，允许跟踪页面上的链接。此种组合还可以写成 all，即content = “all”
index,nofollow：允许抓取、索引本页，但禁止跟踪页面上的链接。
noindex,follow：禁止索引本页，但允许跟踪页面上的链接。
noindex,nofllow：禁止抓取本页，同时禁止跟踪页面上的链接。此种组合还可以写成 none，即content = “none”

需要注意的是，robots Meta标签很多搜索引擎是不支持的，只有少数搜索引擎能够识别并按给定的值抓取。所以，还是尽可能的使用robots.txt文件来限制抓取。

最后，有个注意，不要太刻意的在robots.txt中设置过多禁止文件或目录，只设置确实不希望被搜索引擎索引的目录和文件就可以了，特别是在不清楚文件或目录的作用时，不要轻易禁止抓取，避免网站不被收录，不能搜索到

 

2.2、http-equiv 属性，http-equiv 属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。

当服务器向浏览器发送文档时，会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。