html 中 meta 标签的属性详解

[\<meta> 标签是什么](#<meta> 标签是什么)
[\<meta> 标签常用属性](#<meta> 标签常用属性)
[\<meta> 标签非常用属性](#<meta> 标签非常用属性)

<meta> 标签是什么

<meta> 标签是 HTML 中用于描述网页元信息的元素。它位于 <head> 部分，不会显示在页面内容中，但对于浏览器、搜索引擎等具有重要作用。

主要作用：定义文档的字符编码、提供网页的描述信息、关键词、作者、视口设置等，这些信息有助于搜索引擎理解和索引网页内容。
标签省略：由于这是一个空元素，所以必须有开始标签并且不能有结束标签。

<meta> 标签常用属性

charset ：定义文档的字符编码，如 UTF-8。例如：
html 复制代码
```
<meta charset="UTF-8">
```
name ：定义元信息的名称，与 content 属性配合使用。常见的 name 属性值有：description（网页描述）、keywords（关键词）、author（作者）、copyright（版权）、viewport（视口设置）。例如：
- 描述信息：
  html 复制代码
```
<meta name="description" content="这里是对网页的描述。">
```
- 关键词：
  html 复制代码
```
<meta name="keywords" content="HTML, CSS, JavaScript, Web开发">
```
- 作者：
  html 复制代码
```
<meta name="author" content="张三">
```
- 版权：
  html 复制代码
```
<meta name="copyright" content="版权网站名称">
```
- 视口设置：
  html 复制代码
```
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
http-equiv ：定义 HTTP 头部的元信息，如：Content-Type（内容类型）、X-UA-Compatible（浏览器兼容性）、refresh（自动刷新）。例如：
- 内容类型：
  html 复制代码
```
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
```
- 浏览器兼容性：
  html 复制代码
```
<meta http-equiv="X-UA-Compatible" content="IE=edge">
```
- 自动刷新（每隔 5 秒刷新一次）：
  html 复制代码
```
<meta http-equiv="refresh" content="5">
```

<meta> 标签非常用属性

复制代码

除以上常用属性外，还有一些不太常用但可能有用的 <meta> 属性和应用场景：

robots：指定搜索引擎爬虫如何处理页面。例如：
html 复制代码
```
<meta name="robots" content="noindex, nofollow">
```
表示告诉搜索引擎爬虫不要索引该页面，也不要沿着该页面的链接继续爬行。
theme-color：定义浏览器地址栏的颜色，仅在支持的移动设备上有效。例如：
html 复制代码
```
<meta name="theme-color" content=" 336699">
```
application-name ：定义网页在启用 Web 应用时的名称。例如：
html 复制代码
```
<meta name="application-name" content="Web应用">
```
generator：指定生成该网页的软件名称。例如：
html 复制代码
```
<meta name="generator" content="Meta6.0">
```
language：定义网页内容的主要语言。例如：
html 复制代码
```
<meta name="language" content="zh-CN">
```
expires：设定网页过期时间，过期后浏览器将从服务器重新请求。例如：
html 复制代码
```
<meta http-equiv="expires" content="Wed, 21 June 2023 09:18:54 GMT">
```
pragma：禁止浏览器从本地计算机的缓存中访问页面内容。例如：
html 复制代码
```
<meta http-equiv="pragma" content="no-cache">
```
Cache-Control：指定浏览器如何缓存页面。例如：
html 复制代码
```
<meta http-equiv="Cache-Control" content="no-cache">
```

Cproperty ：用于指定 Open Graph 元数据。例如：

html 复制代码

<head> 
    <meta property="og:title" content="页面标题">
    <meta property="og:description" content="页面描述">
    <meta property="og:image" content="页面图片 URL">
    <!-- Open Graph 是一种开放的元数据协议，用于向社交媒体平台提供有关页面内容的更多信息。 -->
    <!-- 使用 Open Graph 元数据可以在页面被分享到社交媒体平台时，自动生成高质量的预览图像、标题和描述，从而提高分享的可读性和吸引力。 -->
</head>

注意：以上这些属性在特定的应用场景下可能有用，但并非在所有网页中都需要使用。根据实际需求和目标选择合适的属性来配置 <meta> 标签。