目录导航

HTML meta标记通常用于指定元数据(也就是有关文档的附加信息)。
HTML <META>标记出现在head标记内,并具有以下五个属性:

  • charset
  • content
  • http-equiv
  • name
  • scheme

1. HTML meta标记属性

下表列出并描述了HTML meta标签的所有属性:

属性 描述
charset 字符编码 定义文档的字符编码
contents some_text 定义元数据的内容
http-equiv content-type,expires,refresh,set-cookie content属性的信息提供给http标头
name author,description,keywords,generator,revised,others 提供内容的内容属性

HTML meta标签示例
以下HTML代码片段显示了文档中meta标记的用法:

<head>
    <meta name="keywords" contents="keyword1,keyword2,..."/>
</head>

下面是HTML meta标签的示例:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>HTML教程</title>
    <meta name="keywords" content="html, meta标签, 示例">
    <meta name="description" content="HTML meta标记教程和示例">
    <meta name="author" content="xntutor">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="refresh" content="30">
    <meta http-equiv="expires" content="Wed, 10 June 2020 16:20:17 GMT">
    <meta name="robots" content="noindex, nofollow">
</head>
<body>
    <h2>HTML Meta数据示例</h2>            
    <p>Hi all, HTML Meta标记示例!</p>
</body>
</html>

在浏览器中打开上面代码文件,显示结果如下:
meta标签示例

在上面的HTML元标记示例中 -

  • name="keywords" - 用于定义网页或为网页提供关键字;
  • name="description"- 用于提供网页描述;
  • name="author" - 用于提供网页的作者信息;
  • http-equiv="content-type" - 用于提供网页的内容类型;
  • http-equiv="refresh" - 用于提供网页刷新延迟;
  • http-equiv="expires" - 用于提供网页的到期时间;
  • name="robots" - 用于告诉机器人,而不是为网页内容编制索引;

2. HTML meta标记指定网页最后更新时间

使用HTML meta标记来指定有关HTML文档上次更新时间的信息。下面显示如何在HTML中指定文档的最后更新时间的示例:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>HTML教程</title>
    <meta name="revised" content="xntutor,2019/12/18" />
</head>
<body>
    <h2>HTML Meta数据示例</h2>            
    <p>Hi all, HTML Meta标记(revised)示例!</p>
</body>
</html>

在浏览器中打开上面代码文件,显示结果如下:
meta标记指定网页

3. HTML meta网页描述

使用HTML元标记指定描述HTML文档。下面是在HTML中使用meta标签的文档描述示例:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>HTML教程</title>
    <meta name="keywords" content="html, meta标签, 示例">
    <meta name="description" content="HTML meta标记教程和示例">
</head>
<body>
    <h2>HTML Meta数据示例</h2>            
    <p>Hi all, HTML Meta标记 description 示例!</p>
</body>
</html>

在浏览器中打开上面代码文件,显示结果如下:
meta网页描述

4. HTML Meta标签指定网页关键字

使用HTML元标记为HTML文档指定关键字。下面是使用meta标记为网页指定关键字的示例:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>HTML教程</title>
    <meta name="keywords" content="html, meta标签, 示例">
</head>
<body>
    <h2>HTML Meta数据示例</h2>            
    <p>Hi all, HTML Meta标记 keywords 示例!</p>
</body>
</html>

在浏览器中打开上面代码文件,显示结果如下:
Meta标签指定网页关键字

使用HTML meta标记来指定cookie。 Cookies只是存储在计算机上的小型文本文件中的数据。它可以通过您的Web浏览器和Web服务器进行交换,以跟踪各种信息。下面是一个使用meta标签在HTML中设置cookie的示例:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>HTML教程</title>
    <meta http-equiv="expires" content="Wed, 10 June 2020 16:20:17 GMT">
</head>
<body>
    <h2>HTML Meta数据示例</h2>            
    <p>Hi all, HTML Meta标记 (cookie) 示例!</p>

</body>
</html>

在浏览器中打开上面代码文件,显示结果如下:

HTML元标记设置Cookie

6. HTML meta标记设置作者姓名

使用HTML meta标记来设置网页的作者姓名。下面是一个使用meta标签指定页面作者姓名的示例:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>HTML教程</title>
    <meta name="author" content="xntutor.com" />
</head>
<body>
    <h2>HTML Meta数据示例</h2>            
    <p>Hi all, HTML Meta标记 (author) 示例!</p>

</body>
</html>

在浏览器中打开上面代码文件,显示结果如下:
meta标记设置作者姓名

7. HTML meta标签将字符集赋予网页

使用meta标记来指定文档的字符集。下面是一个使用meta标签在HTML中为文档指定字符集(UTF-8)的示例:

<!DOCTYPE html>
<html>
<head>
    <title>HTML Meta Tag (Content-Type) Example</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>

<p>Hello, HTML Meta Tag (Content-Type) Example!</p>

</body>
</html>

在浏览器中打开上面代码文件,显示结果如下:

8. HTML meta标记在给定时间后自动刷新网页

使用HTML meta标记在给定的时间间隔后自动刷新网页。下面是显示如何每5秒自动刷新网页的示例:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>HTML教程</title>
    <meta http-equiv="refresh" content="5"/>
</head>
<body>
    <h2>HTML Meta数据示例</h2>
    <p>Hi all, HTML Meta标记(refresh)示例!</p>
</body>
</html>

页面显示效果省略。

9. HTML meta标记重定向网页

使用HTML meta标记将网页重定向到任何其他网页。下面是显示如何重定向网页的示例:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>HTML教程</title>
    <meta http-equiv="refresh" content="3;url=http://www.xntutor.com" />
</head>
<body>
    <h2>HTML Meta数据示例</h2>            
    <p>Hi all, HTML Meta标记(refresh)示例!</p>
    <p>此页面即将重定向到:http://www.xntutor.com</p>
</body>
</html>

等待5秒钟,5秒钟后它将被重定向到指定的URL。在浏览器中5秒钟后它将被重定向到:xntutor.com