<meta> 标签详解

来源：互联网发布：淘宝上的旺旺号是什么编辑：程序博客网时间：2024/06/05 03:37

一、定义和用法

<meta> 元素可记录并提供有关页面的元信息（meta-information），比如针对搜索引擎优化（SEO）、定义页面使用语言、自动刷新并指向新的页面、实现网页转换的动效、控制页面显示窗口、更新频度的描述和关键词。

<meta> 标签位于文档的头部 <head> 标签中，innerHTML 中不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值（content）对。

<meta> 标签共有三个可选属性和一个必填属性。可选属性分别是 http-equiv 属性、 name 属性和 scheme 属性，必填属性为 content 。不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。下面，我们来一一做个简单的介绍：

name 属性提供了名称/值对中的名称。HTML 和 XHTML 标签都没有指定任何预先定义的 <meta> 名称。通常情况下，您可以自由使用对自己、源文档的读者来说富有意义的名称，主要用于描述网页，与之对应的属性值为 content 。

<meta> 标签的 name 属性语法格式是：

<meta name="参数"content="具体的参数值">

其中 name 属性主要有以下几种参数：

keywords（关键字）：
说明：keywords 用来告诉搜索引擎你网页的关键字是什么，某些搜索引擎会根据这些关键字对文档进行分类。
举例：
```
<meta name="keywords" content="html meta, meta属性, meta跳转"> 
```
description(网站内容描述)
说明：description 用来告诉搜索引擎你的网站主要内容。
举例：
```
<meta name="description" content="html的meta总结。">
```

author(作者)

说明：标注该网页的作者。

举例：

<meta name="author" content="Jimmy, luojiajun@126.com">

其他
其他更多的 name 属性值，请戳这里！
注意：如果没有提供 name 属性，那么名称/值对中的名称会采用 http-equiv 属性的值。

http-equiv 属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前，要先在要传送给浏览器的 MIME 文档头部中包含这些名称/值对，相当于 http 的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容。

当服务器向浏览器发送文档时，会先发送许多名称/值对。虽然，有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html ，告诉浏览器准备接受一个 HTML 文档。

<meta> 标签的 http-equiv 属性语法格式是：

<meta http-equiv="参数" content="参数变量值">

其中 http-equiv 属性主要有以下几种参数：

Refresh(刷新)

说明：自动刷新并指向新页面。

用法：

// 注意后面的引号，分别在秒数的前面和网址的后面<meta http-equiv="Refresh" content="2; URL=http://blog.csdn.net/jimmyluo17">

注意：其中的 2 是指停留 2 秒钟后自动刷新到 URL 网址。

Set-Cookie(cookie设定)
说明：如果网页过期，那么存盘的 cookie 将被删除。
用法：
```
<meta http-equiv="Set-Cookie" content="cookie value=xxx; expires=Tue, 08 Aug 2017 02:35:15 GMT; path=/"> 
```
注意：必须使用 GMT 的时间格式。
Window-target(显示窗口的设定)
说明：强制页面在当前窗口以独立页面显示。
用法：
```
<meta http-equiv="Window-target" content="_top"> 
```
注意：用来防止别人在框架里调用自己的页面。
content-Type(显示字符集的设定)
说明：设定页面使用的字符集。
用法：
```
<meta http-equiv="content-Type" content="text/html; charset=gb2312"> 
```
具体如下：
<meta> 标签的 charset 的信息参数如 GB2312 时，代表说明网站是采用的编码是简体中文；
<meta> 标签的 charset 的信息参数如 BIG5 时，代表说明网站是采用的编码是繁体中文；
<meta> 标签的 charset 的信息参数如 iso-2022-jp 时，代表说明网站是采用的编码是日文；
<meta> 标签的 charset 的信息参数如 ks_c_5601 时，代表说明网站是采用的编码是韩文；
<meta> 标签的 charset 的信息参数如 ISO-8859-1 时，代表说明网站是采用的编码是英文；
<meta> 标签的 charset 的信息参数如 UTF-8 时，代表世界通用的语言编码；

content-Language（显示语言的设定）

用法：

<meta http-equiv="Content-Language" content="zh-cn"/>        // 设定为中文

Content-Script-Type
用法：
```
<meta http-equiv="Content-Script-Type" content="text/javascript">
```
W3C 网页规范，指明页面中脚本的类型。
其他
其他更多的 http-equiv 属性值，请戳这里！
注意：只有浏览器可以接受这些附加的头部字段，并能以适当的方式使用它们时，这些字段才有意义。

scheme 属性用于指定要用来翻译属性值的方案。此方案应该在由 <head> 标签的 profile 属性指定的概况文件中进行定义。

该文的撰写目的，来源于最近面试中问到的关于 meta 的问题。在查阅了一些资料后，汇总整理出来的。

基本上参考的有以下几篇文章：

阅读全文

1 0