HTML 的 <meta> 标签定义了文档的元数据，这些数据对于机器（如浏览器、搜索引擎和其他网络服务）来说是非常重要的，但它们不会直接显示在页面上。元数据提供了关于数据的数据，例如文档的字符编码、页面描述、关键词、作者等信息。
<meta> 标签的用法
<meta> 标签始终位于 <head> 元素内，以下是一些常见的使用场景：
- 指定字符集
- 定义页面描述和关键词，用于搜索引擎优化（SEO）
- 指定文档作者
- 控制视口设置，以优化移动设备上的显示
<meta> 标签的属性
以下是 <meta> 标签的一些重要属性及其描述：
charset
- 描述：规定 HTML 文档的字符编码。
- 示例：
<meta charset="UTF-8">
content
- 描述：与
http-equiv或name属性关联的值。 - 示例：定义页面描述
<meta name="description" content="这是一个示例页面，介绍HTML的<meta>标签及其属性。">
http-equiv
- 描述：为
content属性的信息/值提供 HTTP 标头。 - 示例：每30秒刷新一次页面
<meta http-equiv="refresh" content="30">
name
- 描述：规定元数据的名称。
- 可用值：
- application-name
- author
- description
- generator
- keywords
- viewport
- 示例：定义页面关键词
<meta name="keywords" content="HTML, Meta标签, 元数据">
viewport
- 描述：控制布局在不同设备上的调整。
- 示例：设置视口宽度与设备屏幕宽度相等，并设置初始缩放为1
<meta name="viewport" content="width=device-width, initial-scale=1.0">
HTML5 中的变化
在 HTML5 中，charset 属性是新增的，并且 scheme 属性不再使用。此外，http-equiv 属性在 HTML5 中只能使用特定的值。
设置视口
HTML5 引入了一种方法，使网页设计师可以通过 <meta> 标签控制视口。这是非常重要的，因为它可以改善网站在各种设备上的外观。以下是一个视口设置的示例：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
这个设置告诉浏览器将页面宽度设置为设备的屏幕宽度，并在页面加载时设置初始缩放级别为1。
浏览器支持
所有主流浏览器，包括 Chrome、Edge、Firefox、Safari 和 Opera，都支持 <meta> 标签及其属性。
结论
<meta> 标签是 HTML 中一个非常有用的工具，它允许开发者提供关于文档的重要信息，这些信息对于页面的表现和搜索引擎优化至关重要。正确使用这些元数据可以提高网页的可用性和可访问性。
参考链接：