这是我参与「第四届青训营 」笔记创作活动的的第2天
「前言」
每次 html 代码块都是自动生成，对 meta 标签了解知之甚少，本文主要介绍 meta 标签，也会顺便提及其他的小知识
「meta 标签」
1. meta 标签含义
meta 标签一般出现在 head 标签内部，mdn定义：
HTML
<meta>元素表示那些不能由其它 HTML 元相关（meta-related）元素（(<base>、<link>,<script>、<style>或<title>）之一表示的任何元数据信息。
说人话就是：meta 记录了整个网页的元数据，可以在 meta 标签添加各种属性去声明，对搜索引擎中爬虫识别关键信息具有重要影响。
本文讨论几个常用 meta 的属性:
| 属性 | 含义 |
|---|---|
| name | meta 元素提供的是文档级别（document-level）的元数据，应用于整个页面 |
| http-equiv | meta 元素则是编译指令，提供的信息与类似命名的 HTTP 头部相同 |
| charset | meta 元素是一个字符集声明，告诉文档使用哪种字符编码 |
| scheme | 设置或返回用于解释 content 属性的值的格式。 |
2. charset
<meta charset="utf-8" />
charset 是声明文档使用的字符编码，解决乱码问题，主要用的就是它
注意 ：charset一定要写第一行，不然就可能产生乱码问题
上面的这种写法与这样是等效的
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
3. scheme
先看一段代码
<head>
<meta name="revised" content="2022-07-24" scheme="信息">
</head>
<body>
<script>
var x = document.getElementsByTagName("meta")[0].scheme;
console.log(x) // 信息
</script>
</body>
每个 meta 标签都是由 HTMLMetaElement 构造出来的，所有每个 meta 都可以访问某些属性
4. name
- 定义：
name属性可设置或者返回content属性信息名称。name属性值依赖content属性值。name属性可以是预定义值，或由用户定义。
也就是说name 和 content 属性可以一起使用，以键 - 值对的方式给文档提供元数据，其中 name 作为元数据的名称，content 作为元数据的值。
- 语法：
author
<meta name="author" content="作者名" />
定义文档的作者。
description
<meta name="description" content="淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！" />
指定页面描述。搜索索引擎可以使用这个描述作为搜索结果。
generator(不常用)
<meta name="generator" content="FrontPage 4.0">
指定文档生成的工具名称。
keywords
<meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺" />
指定网页关键字 - 用于告诉搜索引擎网页内容相关关键词。
其中对于网页关键词的书写，业内有一定的标准。
viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
为 viewport（视口）的初始大小提供指示。目前仅用于移动设备。
vscode 中 html 代码块自动补全也会生成这一块代码。
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0">
| 属性 | 解释说明 |
|---|---|
| width | 宽度设置的是viewport宽度，可以设置device-width特殊值 |
| user-scalable | 用户是否可以缩放，yes或no（1或0） |
| initial-scale | 初始缩放比，大于0的数字 |
| maximum-scale | 最大缩放比，大于0的数字 |
| minimum-scale | 最小缩放比，大于0的数字 |
revised
<meta name="revised" content="2011-02-03">
指定网页的更新日期 / 版本
自定义内容
<meta name="spm-id" content="a21bo" />
<meta name="aplus-xplug" content="NONE">
这是淘宝网首页关于 meta 标签的部分内容，应该没有普遍适用性
5. http-equiv
http-equiv 属性可设置或者返回 content 属性中HTTP 头部信息。
http-equiv 属性可以使用伪装 HTTP 响应头部信息。
http-equiv 属性值依赖 content属性的值。
refresh
<meta http-equiv="refresh" content="300 url=https://www.baidu.com">
定义文档自我刷新的时间间隔。
这里是定义了 300 秒后刷新页面，如果有 url 前往指向的网页
cache-control
<meta http-equiv="cache-control" content="no-cache">
控制文档的缓存机制。
content-language
<meta http-equiv="content-language" content="en-US">
控制响应体的语言。
content-type
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
规定文档的字符编码。
注意：除此之外，还有一些与 http 协议相关的字段
当服务器向浏览器发送文档时，会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。
当然，只有浏览器可以接受这些附加的头部字段，并能以适当的方式使用它们时，这些字段才有意义。
