# meta
meta 标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
常用的 meta 标签的属性有：
- content ，设置或返回 meta 元素的 content 属性的值 。
- http-equiv，把 content 属性连接到一个 HTTP 头部。
- name，把 content 属性连接到某个名称。
http-equiv 属性告诉浏览器，包含在 content 属性中的值应该被当作等同于哪个 HTTP 响应头字段的值。这对于在 HTML 文档中设置一些通常由服务器发送的 HTTP 头字段非常有用，尤其是当你不控制服务器发送的响应头时。
此外，随着 HTML5 的发展，许多原本需要通过 http-equiv 来模拟的 HTTP 头字段现在可以通过更直接或更标准的 HTML5 特性来实现。
# meta作用
- 字符集定义：通过
<meta charset="UTF-8">声明文档使用的字符集，这有助于确保网页内容在不同浏览器和设备上的正确显示。 - 页面描述：
<meta name="description" content="页面描述内容">用于为搜索引擎提供页面的简短描述，这通常显示在搜索结果页面中。 - 关键词：
<meta name="keywords" content="关键词1,关键词2,...">虽然现代搜索引擎不再像过去那样依赖此标签进行排名，但它仍然可以为搜索引擎提供一些关于页面内容的线索。 - 作者信息：
<meta name="author" content="作者姓名">提供页面的作者信息。 - 页面刷新和跳转：
<meta http-equiv="refresh" content="5;URL=http://www.example.com">可以用于设置页面在指定的秒数后自动刷新并跳转到另一个 URL。 - 响应式设计：
<meta name="viewport" content="width=device-width, initial-scale=1.0">用于设置网页在移动设备上的视口宽度和初始缩放级别，这是响应式设计的重要部分。 - X-UA-Compatible：
<meta http-equiv="X-UA-Compatible" content="IE=edge">告诉 Internet Explorer 使用其最新的渲染引擎来渲染页面。 - 社交媒体分享：
<meta property="og:title" content="网页标题"> 和 <meta property="og:image" content="图片URL">等标签用于为社交媒体平台（如 Facebook、Twitter 等）提供分享时的页面标题、图片等信息。 - 安全信息：
<meta http-equiv="Content-Security-Policy" content="...">用于定义页面内容的安全策略，如禁止加载外部脚本或限制某些资源的加载。
尽管 <meta> 标签提供了许多有用的功能，但过度使用或滥用这些标签可能会导致搜索引擎或其他网络工具对网页产生负面印象。因此，在使用 <meta> 标签时，请确保仅包含必要和相关的元信息。
# HTML meta viewport属性
- width: 控制视口的大小。这可以设置为特定像素数（如'width=600'），也可以设置为特殊值device-width，即 100vw，100% 的视口宽度。最小值为 1。最大值为 10000。负值会被忽略。
- height: 控制视口的大小。这可以设置为特定像素数（如 width=600），也可以设置为特殊值 device-height，即 100vh，100% 的视口高度。最小值为 1。最大值为 10000。负值会被忽略。
- initial-scale:控制页面首次加载时显示的缩放倍数。最小值是 0.1。最大值是 10。默认值为 1。负值会被忽略。
- minimum-scale:控制页面允许缩小的倍数。最小值是 0.1。最大值是 10。默认值为 1。负值会被忽略。
- maximum-scale:控制页面允许放大的倍数。设置一个低于 3 的值将不具备无障碍访问性。最小值是 0.1。最大值是 10。默认值为 1。负值会被忽略。
- user-scalable:控制是否允许页面上的放大和缩小操作。有效值为 0、1、yes 或 no。默认值为 1，与 yes 相同。将值设置为 0（即与 no 相同）将违反 Web 内容无障碍指南（WCAG）。
- interactive-widget:指定交互式 UI 组件（如虚拟键盘）对页面视口的影响。有效值：resizes-visual、resizes-content 或 overlays-content。默认值：resizes-visual。
警告：使用 user-scalable=no 会给有视觉障碍的用户造成无障碍问题，如弱视力。WCAG 要求至少有 2 倍的缩放；然而，最佳做法是启用 5 倍的缩放。