HTML meta - 绿叶网

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

提示: 在 Web 技术中，我们一般形象地称搜索引擎为 “搜索蜘蛛” 或 “搜索机器人”。

语法：

<meta name="属性名" content="属性值">

说明：

meta 的主要属性有 2 个：name 和 content。除此之外，meta 标签还有另外 2 个次要属性：charset 和 http-equiv。

meta 的 name 和 content 属性

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

meta 标签 name 属性取值
属性值	说明
keywords	网页的关键字，可以是多个，而不仅仅是一个
description	网页的描述
author	网页的作者
copyright	版权信息

示例 1：meta 定义元数据

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

分析：

在大多数情况下，name 属性只会用到 keywords 和 description 这 2 种取值。

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）。对于现代 Web 开发中，更推荐写法 2，也就是 “不加斜杠” 这种写法。

示例 2：meta 定义网页编码

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

分析：

<meta charset="utf-8"> 一般放在 head 标签内部的最开始处，先于 title 标签。如果你发现页面打开是乱码，很可能就是没有加上这一句代码。在实际开发中，为了确保不出现乱码，我们必须要在每一个页面中加上。

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 秒钟，页面就会跳转到绿叶网首页。