meta标签的详细讲解！！！
背景
前几次面试了百度、字节、阿里等大厂的时候，面试官都问到了同一个问题：你都知道什么meta标签？用处是什么？
今天就来浅浅总结一下，meta标签是什么？有什么用
meta标签是什么
<meta>标签是一种用于在 HTML 文档头部提供元数据的标签。它通常位于<head>标签内，用于向浏览器和搜索引擎提供关于网页的信息，而不是直接展示给用户.
那meta标签有什么用呢？这就要从他的属性说起了
charset
charset: 用于指定网页所使用的字符编码，如果使用了这个属性，其值必须是与 ASCII 大小写无关（ASCII case-insensitive）的 utf-8
charset常见的值
-
UTF-8 (Unicode Transformation Format 8-bit):
- 值:
charset="UTF-8" - 示例:
<meta charset="UTF-8"> - UTF-8 是一种可变长度的字符编码，支持包括英文字母、数字、拉丁字符以及世界上几乎所有的语言字符。
- 值:
-
ISO-8859-1 (Latin-1):
- 值:
charset="ISO-8859-1" - 示例:
<meta charset="ISO-8859-1"> - ISO-8859-1 是一个单字节字符编码，涵盖了西欧语言字符集。
- 值:
-
GB2312-80 (Chinese Simplified Characters):
- 值:
charset="GB2312-80" - 示例:
<meta charset="GB2312-80"> - GB2312-80 是一种用于中文简体字符的字符编码。
- 值:
-
Shift_JIS (Japanese Industrial Standards):
- 值:
charset="Shift_JIS" - 示例:
<meta charset="Shift_JIS"> - Shift_JIS 是一种用于日语字符的字符编码。
- 值:
-
EUC-KR (Extended Unix Code-Korean):
- 值:
charset="EUC-KR" - 示例:
<meta charset="EUC-KR"> - EUC-KR 是一种用于韩语字符的字符编码。
- 值:
name
用于定义元数据的名称或关键字。它用于描述元数据的类型或用途。 用于指定元数据的名称或关键字。常常和content 属性可以一起使用，以名 - 值对的方式给文档提供元数据，其中 name 作为元数据的名称，content 作为元数据的值
name常见的值
description（描述）：用于提供网页的简短描述，通常在搜索引擎结果中显示。
<meta name="description" content="这是一个示例页面的描述。">
keywords（关键词）：用于提供与网页内容相关的关键词列表，帮助搜索引擎了解网页的主题和内容。
<meta name="keywords" content="掘金, meta, zayyo">
author（作者）：用于指定网页的作者。
<meta name="author" content="zayyo">
viewport（视口）：用于定义移动设备上网页的视口设置，以控制网页的显示方式和缩放行为。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
当name的值为viewport时一些常见的值
1. `width=device-width`：这个属性值表示将视口的宽度设置为设备的宽度，即使设备屏幕的宽度在不同设备之间可能会有所变化，也能确保网页的宽度与设备的屏幕宽度相匹配。
2. `initial-scale=1.0`：这个属性值指定了初始的缩放比例为 1.0。这意味着网页在初始加载时不会进行缩放，保持其原始比例。
3. `width=device-width`: 将视口宽度设置为设备的宽度，确保网页宽度与设备屏幕宽度匹配。
4. `initial-scale=1.0`: 设置初始缩放比例为 1.0，即网页以原始比例显示，不进行初始缩放。
5. `minimum-scale=0.5`: 设置最小缩放比例为 0.5，允许用户缩小网页的显示。
6. `maximum-scale=2.0`: 设置最大缩放比例为 2.0，限制用户放大网页的显示。
7. `user-scalable=yes`: 允许用户自由缩放网页内容，包括放大和缩小。
8. `user-scalable=no`: 禁止用户对网页内容进行缩放。
9. `initial-scale=1.0, maximum-scale=1.0`: 设置初始缩放比例和最大缩放比例均为 1.0，禁止用户对网页内容进行缩放。
robots（机器人）：用于指定搜索引擎爬虫的行为。- 常见的值包括 ：
noindex（不要索引此页面），使用该值可以防止搜索引擎将该页面包含在搜索结果中和 - nofollow：（不要跟踪此页面上的链接）指示搜索引擎不要跟踪当前页面中的链接。使用该值可以阻止搜索引擎通过当前页面的链接进行爬取
- 常见的值包括 ：
<meta name="robots" content="noindex, nofollow">
// 同时指定不索引和不跟踪页面及其链接
content
content属性用于提供与该元数据相关的值或内容。常常和name 属性可以一起使用，以名 - 值对的方式给文档提供元数据，其中 name 作为元数据的名称，content 作为元数据的值,当与http-equiv属性一起使用时，content用于指定特定的命令或控制行为。
http-equiv
用于模拟 HTTP 头部字段的行为。它允许在
<meta>标签中使用类似于 HTTP 头部的指令，以控制浏览器的行为或提供特定的元数据。
常见的值
content-type（内容类型）：指定网页的 MIME 类型，告诉浏览器如何正确解析网页内容。通常与 charset 属性一起使用。
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
refresh（刷新）：指定浏览器在指定的时间间隔后自动刷新或跳转到另一个网页。
<meta http-equiv="refresh" content="5; url=https://example.com">
// content 属性值表示在 5 秒后自动刷新页面，并跳转到 https://example.com。
pragma（缓存控制）：用于控制浏览器缓存的行为。
<meta http-equiv="pragma" content="no-cache">
//content 属性值为 no-cache，表示浏览器不应缓存页面。
expires（过期时间）：指定网页的过期时间，用于控制浏览器是否从缓存中加载网页。
<meta http-equiv="expires" content="Tue, 01 Jan 2024 00:00:00 GMT">
//content 属性值表示网页将在 2024 年 1 月 1 日过期，浏览器在该日期之后将从服务器重新加载页面。
viewport
用于指定网页在移动设备上的可视区域的大小和缩放行为。
<meta name="viewport" content="property=value, property=value, ...">
-
width=device-width：将视口宽度设置为设备的宽度，确保网页宽度与设备屏幕宽度匹配。 -
initial-scale=1.0：设置初始缩放比例为 1.0，即网页以原始比例显示，不进行初始缩放。 -
minimum-scale=0.5：设置最小缩放比例为 0.5，允许用户缩小网页的显示。 -
maximum-scale=2.0：设置最大缩放比例为 2.0，限制用户放大网页的显示。 -
user-scalable=yes：允许用户自由缩放网页内容，包括放大和缩小。 -
user-scalable=no：禁止用户对网页内容进行缩放。
旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
28
0- 0
已为社区贡献3条内容
所有评论(0)