HTML meta 标签 - 绿叶网

HTML meta 语法

在 HTML 中，meta 标签用于定义页面的特殊信息，这些信息并不是提供给用户看的，而是提供给搜索引擎蜘蛛、浏览器等来理解当前网页的内容。

语法：

<meta name="元数据名称" content="元数据内容">

说明：

meta 的主要属性有 2 个：name 和 content。这 2 个属性用于定义当前网页的元数据（比如关键字、描述、作者等）。

除了 name 和 content 这 2 个主要属性之外，meta 标签还有另外 2 个次要属性：

charset：指定网页的字符编码。
http-equiv：设置与 HTTP 头信息相关的属性，常用来设置页面的缓存控制、内容类型等。

注意: meta 标签只能放到 head 标签内部。

HTML meta 摘要

属于	HTML 标签
使用频率	高
兼容性	查看
官方文档	查看
MDN	查看

meta 标签的 name 和 content 属性

在 HTML 中，meta 标签的 name 和 content 这 2 个属性用于定义当前网页的元数据（比如关键字、描述、作者等）。其中，name 属性常用取值如下表所示。

meta 标签 name 属性取值
属性值	说明
keywords	网页的关键字，可以是多个，而不仅仅是一个
description	网页的描述
author	网页的作者
copyright	版权信息
viewport	控制移动端设备的视口大小和缩放（响应式网页必备）

在现代 Web 开发中，为了让网页在手机上显示正常（不缩小字体），我们必须在每一个页面加上下面这行代码：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

其中：

width=device-width：让网页宽度等于设备的屏幕宽度。
initial-scale=1.0：初始缩放比例为 1.0（即不缩放）。

示例 1：meta 标签定义元数据

<!DOCTYPE html>
<html>
<head>
    <!--网页关键字-->
    <meta name="keywords" content="绿叶网">
    <!--网页描述-->
    <meta name="description" content="为好教程，全力以赴">
    <!--本页作者-->
    <meta name="author" content="阿莫">
    <!--版权声明-->
    <meta name="copyright" content="本站所有教程均为原创，版权所有，禁止转载。否则必将追究法律责任。">
</head>
<body>
</body>
</html>

分析：

在大多数情况下，name 属性主要会用到 viewport、description 和 keywords 这 3 种取值。

meta 标签的 charset 属性

在 HTML 中，我们可以使用 meta 标签的 charset 属性来定义当前页面使用哪种编码格式。

语法：

<meta charset="utf-8">

说明：

charset 属性的取值可以写成 "utf-8"，也可以写成 "UTF-8"。下面 2 种方式都是可行的。

<!-- 方式1 -->
<meta charset="utf-8">

<!-- 方式2 -->
<meta charset="UTF-8">

meta 标签的 2 种写法

在很多书或教程中，我们可能会遇到 meta 标签的 2 种写法，一种是在末尾 “>” 前面加上 “/”，另一种是在末尾 “>” 前面不加 “/”，比如：

<!-- 写法1：加上斜杠 -->
<meta charset="utf-8" />

<!-- 写法2：不加斜杠 -->
<meta charset="utf-8">

那么哪种才是正确的呢？实际上，这 2 种写法都是正确的。写法 1 是使用严格模式（即 XHTML），而写法 2 是使用松散模式（HTML5）。

在纯 HTML5 开发中，推荐写法 2（简洁）；但在 React/Vue 等现代前端框架中，为了符合 JSX 语法规范，通常强制要求使用写法 1（严谨）。

示例 2：meta 标签定义网页编码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
</body>
</html>

分析：

meta 标签的 http-equiv 属性

在 HTML 中，meta 标签的 http-equiv 属性主要是用于定义网页的自动刷新跳转。

语法：

<meta http-equiv="refresh" content="秒数;url=地址">

说明：

比如下面这句代码，表示的是当前页面在打开的 5 秒后会自动跳转到绿叶网首页。实际上，很多 “小广告” 网站就是用这个来实现页面定时跳转的。

<meta http-equiv="refresh" content="5;url=https://www.lvyenet.com">

示例 3：meta 标签定义网页自动跳转

<!DOCTYPE html>
<html >
<head>
    <meta http-equiv="refresh" content="5;url=https://www.lvyenet.com">
</head>
<body>
    <p>当前页面在打开5秒之后，会自动跳转到绿叶网首页</p>
</body>
</html>

分析：

我们可以在 VSCode 中输入上面这段代码，然后在浏览器打开并过了 5 秒钟，页面就会跳转到绿叶网首页。