<meta>的常见用途和属性<meta> 标签在 HTML 中用于提供有关页面的元数据（metadata），这些元数据通

<meta> 标签在 HTML 中用于提供有关页面的元数据（metadata），这些元数据通常不会直接显示在页面上，但对浏览器、搜索引擎和其他工具非常有用。<meta> 标签通常放在 <head> 部分，用于定义各种元信息。以下是 <meta> 标签的一些常见用途和属性：

常见属性

charset：
- 作用：定义文档的字符集。
- 示例：
```
html
<meta charset="UTF-8">
```

http-equiv：

作用：定义 HTTP 响应头的等效元信息。

示例：

html
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

name：

作用：定义元信息的名称。

示例：

html
<meta name="description" content="This is a sample page description.">

content：
- 作用：定义元信息的具体内容。
- 示例：
```
html
<meta name="author" content="John Doe">
```
viewport：
- 作用：定义视口的设置，主要用于响应式设计。
- 示例：
```
html
<meta name="viewport" content="width=device-width, initial-scale=1">
```
keywords：
- 作用：定义页面的关键字，用于搜索引擎优化（SEO）。
- 示例：
```
html
<meta name="keywords" content="HTML, CSS, JavaScript">
```
robots：
- 作用：定义搜索引擎机器人（如 Googlebot）的行为。
- 示例：
```
html
<meta name="robots" content="noindex, nofollow">
```

og:* 属性：

作用：定义 Open Graph 协议的元信息，用于社交媒体分享。

示例：

html
<meta property="og:title" content="Sample Page Title">
<meta property="og:type" content="website">
<meta property="og:image" content="https://example.com/image.jpg">

twitter:* 属性：

作用：定义 Twitter 卡片的元信息，用于 Twitter 分享。

示例：

html
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Sample Page Title">
<meta name="twitter:image" content="https://example.com/image.jpg">

示例

下面是一个完整的 <head> 部分的例子，展示了多种 <meta> 标签的使用：

html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="description" content="This is a sample page description.">
    <meta name="author" content="John Doe">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="HTML, CSS, JavaScript">
    <meta name="robots" content="noindex, nofollow">
    <meta property="og:title" content="Sample Page Title">
    <meta property="og:type" content="website">
    <meta property="og:image" content="https://example.com/image.jpg">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="Sample Page Title">
    <meta name="twitter:image" content="https://example.com/image.jpg">
    <title>Sample Page</title>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

通过这些 <meta> 标签，你可以为页面提供丰富的元信息，从而提高页面的可访问性、SEO 友好性和社交媒体分享效果。