文章目录
- name 属性
- ⚡️1. viewport
- ⚡️2. keywords
- ⚡️3. description
- 4. author
- 5. application-name
- 6. generator
- 7. robots
- 8. copyright
- http-equiv 属性
- ⚡️1. content-type
- ⚡️2. Cache-Control
- 3. refresh
- 4. default-style
- charset 属性
- ⚡️UTF-8
<meta> 标签是一种用于在 HTML 文档头部提供元数据的标签。它通常位于
<head> 标签内，用于向浏览器和搜索引擎提供关于网页的信息，而不是直接展示给用户
是HTML标记head区的一个关键标签，用于描述一个HTML网页文档的属性，提供有关页面的元信息。它并不会显示在页面上，但对于机器是可读的，可用于浏览器（如何显示内容或重新加载页面）、搜索引擎（SEO）或其他web服务。
name 属性
⚡️1. viewport
用于定义移动设备上网页的视口设置，以控制网页的显示方式和缩放行为。
它可以帮助页面更好地适应不同大小的屏幕。
<meta name="viewport" content="width=device-width, initial-scale=1">
⚡️2. keywords
这个属性用于提供与页面内容相关的关键词列表。
虽然现代搜索引擎已经不太依赖 keywords meta 标签进行排名，但它仍然在一些上下文中被使用。
<meta name="keywords" content="HTML, web development, tutorials, learning resources">
⚡️3. description
这个属性用于提供关于页面的简短描述。
它经常用于搜索引擎结果中显示页面的摘要，对于 SEO 很重要。
<meta name="description" content="This is a website about learning HTML and web development.">
4. author
这个属性用于指定文档的作者。
它通常用于标识文档内容的创建者。
<meta name="author" content="John Doe">
5. application-name
这个属性用于指定网页或 Web 应用的名称。
它通常用于 Web 应用清单中，以在设备的主屏幕或应用启动器中显示。
<meta name="application-name" content="My Web App">
6. generator
这个属性用于标识用于生成文档的软件或工具。
它通常用于表明网站是由哪个内容管理系统或编辑器创建的。
<meta name="generator" content="WordPress 5.8">
7. robots
用于指定搜索引擎爬虫如何处理页面。
这可以控制搜索引擎是否索引页面以及是否跟踪页面上的链接。
告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。
<meta name="robots" content="index, follow">
同时指定不索引和不跟踪页面及其链接
<meta name="robots" content="noindex, nofollow">
content的参数有
- all（默认）：文件将被检索，且页面上的链接可以被查询；
- none：文件将不被检索，且页面上的链接不可以被查询；
- index：文件将被检索；
- noindex：文件将不被检索，但页面上的链接可以被查询；
- follow：页面上的链接可以被查询；
- nofollow：文件将被检索，但页面上的链接不可以被查询；
8. copyright
网站版权信息
<meta name="copyright" content="本页版权 www.qidian.com 起点中文网所有。All Rights Reserved" />
http-equiv 属性
⚡️1. content-type
用于定义文档的类型和字符编码。
它告诉浏览器文档的内容类型和应如何解析内容。
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
content-type 被设置为 text/html，表示文档是一个 HTML 文档，并且字符编码被设置为 UTF-8。
⚡️2. Cache-Control
控制缓存行为
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="Tue, 01 Jan 2024 00:00:00 GMT">
在这个例子中:
-
Cache-Control：缓存控制
设置为no-cache, no-store, must-revalidate，这明确告诉浏览器和任何中间缓存不要存储此页面的任何版本，并且每次请求时都必须去服务器验证。 -
Pragma：缓存控制
再次设置为no-cache以提供向后兼容性。 -
Expires：过期时间
表示网页将在 2024 年 1 月 1 日过期，浏览器在该日期之后将从服务器重新加载页面。 设置为0表示页面立即过期，不应被缓存。
其他字段
-
public：表示响应可以被任何缓存系统（包括浏览器、CDN等）缓存。也就是说，该资源是公有的，可以被多个用户共享。
-
private：表示响应只能被单个用户缓存，且只能被该用户的浏览器缓存。它不能被CDN或其他共享缓存系统缓存。（默认）
-
no-cache：不走强制缓存走协商缓存
-
no-store：不走任何缓存。在请求消息中发送将使得请求和响应消息都不使用缓存。
-
max-age：设置了一个相对存活时间。 max-age=3600表示缓存内容在3600秒内是有效的。
-
min-fresh：指定客户端愿意接受的最小新鲜期。它表示缓存的内容至少在未来指定的秒数内要保持新鲜。如果当前缓存的内容的新鲜期小于这个值，那么客户端将不会使用缓存内容，而是直接向服务器请求新的内容。这有助于确保客户端始终获取到尽可能新鲜的数据。
-
max-stale：允许客户端使用过期但仍在一定范围内的缓存数据。这通常用于在无法与服务器建立连接或服务器响应过慢时，允许客户端使用稍微过期的数据作为备选方案。通过指定一个时间值，客户端可以接收过期但在这个时间范围内的响应。这有助于在网络不稳定或服务器负载较高的情况下提供一定程度的可用性。
不建议使用meta标签来控制缓存
由于meta标签对于缓存控制的效果有限且不被所有浏览器严格遵循，现代Web开发实践中通常推荐使用HTTP头部来控制缓存。
3. refresh
用于设置页面在特定时间间隔后自动刷新，并可以指定刷新后要加载的页面。
这可以用于重定向用户到另一个页面，或者定期更新页面内容。
<meta http-equiv="refresh" content="5; url=https://www.example.com/">
在这个例子中，页面将在5秒后自动刷新，并加载 https://www.example.com/ 这个URL。
content 属性的值由两部分组成：刷新间隔（以秒为单位）和可选的URL。
如果只指定了刷新间隔而没有URL，页面将简单地重新加载当前页面。
4. default-style
用于指定默认的样式表。
这个属性现在已经不常用，因为现代网页通常使用 <link> 元素来链接样式表，并设置 rel="stylesheet"。
<meta http-equiv="default-style" content="mystyle.css">
charset 属性
定义文档的字符编码。HTML5 中的新属性
这告诉浏览器如何解释页面中的字符。
⚡️UTF-8
Unicode 字符编码
<meta charset="UTF-8">
常用的值：
- UTF-8 ： Unicode 字符编码
- ISO-8859-1 ： 拉丁字母表的字符编码
