meta标签

<meta> 标签

定义和用法

<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。

<meta> 标签位于文档的头部，不包含任何内容。

<meta> 标签的属性定义了与文档相关联的名称/值对。

注释：<meta> 标签永远位于 head 元素内部。

注释：元数据总是以名称/值的形式被成对传递的。

注释：如果没有提供 name 属性，那么名称/值对中的名称会采用 http-equiv 属性的值。

HTML 4.01 与 HTML5之间的差异

HTML5 不支持 scheme 属性。

在 HTML5 中，有一个新的 charset 属性，它使字符集的定义更加容易：

HTML 4.01： <meta http-equiv="content-type" content="text/html; charset=UTF-8">

HTML5： <meta charset="UTF-8">

HTML 与 XHTML 之间的差异

在 HTML 中 <meta> 标签没有结束标签。

在 XHTML 中 <meta> 标签必须包含结束标签。

事件属性

<meta> 标签支持所有 HTML事件属性。

使用示例

定义文档的编码格式为UTF-8

 <meta charset="UTF-8"/>

定义文档关键词，用于搜索引擎

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript, Vue">

定义web页面描述

<meta name="description" content="HTML and CSS">

定义页面作者

<meta name="author" content="Author">

每30秒刷新页面

<meta http-equiv="refresh" content="30">

定义当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

属性

属性	值	描述
charset	character_set	规定 HTML 文档的字符编码
content	text	定义与 http-equiv 或 name 属性相关的元信息。
http-equiv	content-security-policy content-type default-style refresh	把 content 属性关联到 HTTP 头部。
name	application-name author description generator keywords viewport	把 content 属性关联到一个名称。
scheme	format/URI	定义用于翻译 content 属性值的格式。HTML5不支持。

charset 属性

charset 属性规定 HTML 文档的字符编码。

提示：charset 属性可以通过任意元素上的 lang 属性来重写。

语法

<meta charset="character_set">

属性值

值	描述
character_set	规定 HTML 文档的字符编码。 常用值： UTF-8 - Unicode 的字符编码 ISO-8859-1 - 拉丁字母的字符编码 理论上，可以使用任何字符编码，但没有浏览器能够理解所有编码。字符编码使用得越广泛，浏览器理解它的机会就越大。 如需查看所有可用的字符编码，请访问 IANA 字符集。

content 属性

content 属性描述 HTML 文档中的元数据。

content 属性提供了名称/值对中的值。该值可以是任何有效的字符串。

content 属性始终要和 name 属性或 http-equiv 属性一起使用。

语法

<meta content="text">

属性值

值	描述
text	元信息的内容。

http-equiv 属性

http-equiv 属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。

http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

语法

<meta http-equiv="content-security-policy|content-type|default-style|refresh" content="">

属性值

值	描述
content-security-policy	规定文档的内容策略。 例子： <meta http-equiv="content-security-policy" content="default-src 'self'">
cache-control	指定请求和响应遵循的缓存机制. 例子： <meta http-equiv=”Cache-Control” content=”no-cache”/> 在请求消息或响应消息中设置Cache-Control并不会修改另一个消息处理过程中的缓存处理过程。请求时的缓存指令包括no-cache、no-store、max-age、max-stale、min-fresh、only-if-cached，响应消息中的指令包括public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age。
content-language	规定文档的语言。 例子： <meta http-equiv=”Content-Language” content=”zh-cn”/>
content-type	规定文档的字符编码。 例子： <meta http-equiv="content-type" content="text/html; charset=UTF-8">
default-style	规定要使用的首选样式表。 例子： <meta http-equiv="default-style" content="the document's preferred stylesheet"> 注释：上述 content 属性的值必须与同一文档中链接元素的 title 属性值匹配，或者必须与同一文档中 style 元素的 title 属性值匹配。
expires	用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。 例子： <meta http-equiv="expires"content="Fri,12Jan200118:18:18GMT"> 注意：必须使用GMT的时间格式。
pragma(cache模式)	禁止浏览器从本地计算机的缓存中访问页面内容。 例子： <meta http-equiv=”Pragma” content=”no-cache”> 注意：这样设定，访问者将无法脱机浏览。
refresh	定义文档自我刷新的时间间隔。 例子： <meta http-equiv="refresh" content="300"> 注释：应谨慎使用值 "refresh"，因为它会从用户手中夺走页面的控制权。使用 "refresh" 将导致 W3C 的 Web 内容可访问性指南失败。
set-cookie(设置cookie)	如果网页过期，那么存盘的cookie将被删除。 例子： <meta http-equiv=”Set-Cookie” content=”cookievalue=xxx;expires=Friday,12-Jan-200118:18:18GMT；path=/”> 注意：必须使用GMT的时间格式。
window-target(显示窗口的设定)	强制页面在当前窗口以独立页面显示。 例子： <meta http-equiv=”Window-Target” content=”_top”> 注意：用来防止别人在框架里调用自己的页面。
x-ua-compatible	指定浏览器所要启用的内核版本。 国内很多浏览器都有多个内核，比如360浏览器的极速模式使用的是谷歌内核，而兼容模式则使用IE内核，另外在兼容模式下，也可以设定不同的IE版本。 例子： <meta http-equiv="x-ua-compatible" content="IE=edge, chrome=1">

name属性

name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

name属性规定元数据的名称。

name属性规定内容属性的信息/值的名称。

注释：如果设置了 http-equiv 属性，则不应设置 name 属性。

语法

<meta name="value">

属性值

值	描述
application-name	规定页面所代表的 Web 应用程序的名称。
author	规定文档作者的姓名。 例子： <meta name="author" content="Bill Gates">
description	规定页面的描述。搜索引擎可以选择此描述来显示搜索结果。 例子： <meta name="description" content="Free web tutorials">
generator	规定用于生成文档的软件包之一（不用于手工制作的页面）。 例子： <meta name="generator" content="FrontPage 4.0">
keywords	规定以逗号分隔的关键字列表 - 与页面相关（通知搜索引擎该页面的内容）。 提示：请始终规定关键字（搜索引擎需要对页面进行分类）。 例子： <meta name="keywords" content="HTML, meta tag, tag reference">
referrer	控制所有从该文档发出的 HTTP 请求中HTTP Referer 首部的内容。 例子： <meta name="referrer" content="no-referrer">
robots	定义搜索引擎或抓取工具的行为。（多个值用逗号隔开） 例子： <meta name="robots" content="index">
viewport	控制视口（网页的用户可见区域）。 视口因设备而异，在手机上会比在电脑屏幕上小。 您应该在所有网页中包含以下 <meta> 视口元素： <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta> viewport 元素向浏览器提供有关如何控制页面尺寸和缩放的说明。 width=device-width 部分将页面的宽度设置为跟随设备的屏幕宽度（这将因设备而异）。 initial-scale=1.0 部分设置浏览器首次加载页面时的初始缩放级别。 您可以在我们的响应式网页设计 - 视口教程中阅读更多关于视口的信息。

温馨提示

1、referrer属性的<meta> 标签需要放在 <head> ...</head> 之间，如果出现的位置不对就会被忽略。

2、如果没有content 属性，或者 content 属性值为空，也会被忽略。

3、如果 content 属性后面的取值不合法，浏览器会自动选择 no-referrer 。

scheme 属性

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

HTML5 不支持 <meta> scheme 属性。

scheme 属性规定用于翻译 content 属性的值的方案（格式或 URI）。

语法

<meta scheme="format|URI">

属性值

值	描述
format/URI	定义 content 属性内的值的格式（或指向一个包含信息的 URI）。