• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
    •
    位置： html5 中文手册 -> html5 标签 -> html5 文档元数据

    <meta>

    HTML<meta>元素表示那些不能由其它HTML元相关元素(<base>,<link>,<script>,<style>或<title>)之一表示的任何元数据信息.

    浏览器支持

    所有主流浏览器都支持<meta>标签。

    示例

    <!-- defining the charset in html4 -->
<meta http-equiv="content-type" content="text/html; charset=utf-8">

<!-- in html5 -->
<meta charset="utf-8">

<!-- redirect page after 3 seconds -->
<meta http-equiv="refresh" content="3;url=http://www.mozilla.org/">

    属性

    此元素包括全局属性。

    注意：全局属性name在<meta>元素中具有特殊的语义；另外，在同一个<meta> font-size: 18px;">开发者必须禁用 CESU-8,UTF-7,BOCU-1或SCSU这些字符集，因为这些字符集已经被证实存在跨站脚本攻击（XSS）的风险。

  • 开发者应尽量避免使用UTF-32字符集对网页进行编码，因为不是所有的HTML5编码算法能够将其与UTF-16编码区分开来。
    • 注意：
    • 声明的字符编码必须与页面保存所使用的编码相匹配，以避免乱码和安全漏洞.
    • <meta>元素必须包含在<head>元素中并且在HTML代码的前1024个字节内，因为某些浏览器在选择编码之前只查看前面这些字节。
    • <meta>元素只是algorithm to determine the character set 中的一部分。 HTTP的Content-Type头部以及任何Byte-Order Marks元素都优先于此元素。
    • 强烈建议使用该属性定义字符编码。如果未定义，某些跨脚本技术可能危害网页，如 UTF-7 fallback cross-scripting technique.保持设置该属性以避免类似风险。
    • <meta>元素的charset属性和以下HTML5内容<meta http-equiv="Content-Type" content="text/html; charset=IANAcharset">等效，其中IANAcharset包含了charset一样的值。后者的语法仍然是允许的，但是不再推荐。
    • content此属性包含http-equiv或name属性的值，具体取决于所使用的值。
    • http-equiv这个枚举属性定义了能改变服务器和用户引擎行为的编译。这个编译值使用content来定义，如下：
      • content-languageTHML5中废弃
      • 这个指令定义页面使用的默认语言.
        使用方式:不要使用这个指令，因为它已经过时了。使用<html>元素上全局的lang属性来替代它.
      • "content-security-policy"内容安全策略
      • 它允许页面作者定义当前页的内容策略。内容策略主要指定允许的服务器源和脚本端点，这有助于防止跨站点脚本攻击。
      • "content-type"THML5中废弃
      • 这个属性定义了文档的 MIME type ,实际上由它的字符编码决定。它遵循与HTTPcontent-type头部字段相同的语法，但由于它位于HTML页面内，因此除了text / html之外的大多数值都不能使用。因此，其content的有效语法是字符串'text / html'，后跟一个具有以下语法的字符集：';charset=IANAcharset，其中IANAcharset是IANA定义的字符集的首选MIME名称。
        Usage note:
        • 不要使用该指令因为它已过时。.使用<meta>元素的charset属性代替。
        • As the<meta>may not be used to change the type of a document in an XHTML document, or in an HTML5 document following the XHTML syntax, never set MIME type to an XHTML MIME type that way. It would be incorrect.
        • Only an HTML document can use the content-type, so most of it is redundant: that's why it has been obsoleted and replaced by thecharsetattribute.
      • default-style
      • 这个属性指定了在页面上使用的首选样式表.content属性必须包含<link>元素的标题,href属性链接到CSS样式表或包含CSS样式表的<style>元素的标题.
      • refresh
      • 这个属性指定:
        • 如果content只包含一个正整数，则是重新载入页面的时间间隔(秒);
        • 如果content包含一个正整数并且跟着一个字符串，则是重定向到指定链接的时间间隔(秒)
      • set-cookieTHML5中废弃
      • 为页面定义cookie。其内容必须遵循 IETF HTTP Cookie 规范中定义的语法。
        Note:警告：请勿使用此说明，因为它已过时。请改用HTTP的Set-Cookie头部。
    • name该属性定义文档级元数据的名称。如果以下其中一个属性设置了itemprop,http-equivorcharset，就不能在设置这个属性了。

    • 此元数据名称与content属性包含的值相关联。name属性的可能值为：
      • application-name，定义正运行在该网页上的网络应用名称；
        Note:
        • 浏览器可能会通过使用该属性去区分应用。它与<title>元素不同，后者通常由应用程序名称组成，但也可能包含特定信息，如文档名称或状态;
        • 简单的网页不应该去定义application-name meta标签。
      • author，就是这个文档的作者名称，可以用自由的格式去定义；
      • description，其中包含页面内容的简短和精确的描述。一些浏览器，如Firefox和Opera，将其用作书签页面的默认描述。
      • generator,包含生成页面的软件的标识符。
      • keywords,包含与逗号分隔的页面内容相关的单词。
      • referrer控制所有从该文档发出的 HTTP 请求中HTTP Referer首部的内容：
        <meta > content 属性可取的值：
        no-referrer不要发送HTTPReferer首部。
        origin发送当前文档的 origin。
        no-referrer-when-downgrade当目的地是先验安全的(https->https)则发送 origin 作为 referrer ，但是当目的地是较不安全的(https->http)时则不发送 referrer 。这个是默认的行为。
        origin-when-crossorigin在同源请求下，发送完整的URL(不含查询参数)，其他情况下则仅发送当前文档的 origin。
        unsafe-URL在同源请求下，发送完整的URL(不含查询参数)。
        注意：动态地插入<meta >(通过 document.write 或者 appendChild)是不起作用的。同样注意如果同时有多个彼此冲突的策略被定义，那么 no-referrer 策略会生效。

      The attribute may also have a value taken from the extended list defined onWHATWG Wiki MetaExtensions page. Although none has been formally accepted yet, a few commonly used names are among the proposals:

      • creator, defining, in a free format, the name of the creator of the document. Note that it can be the name of the institution. If there are more than one,several<meta>elements should be used;
      • googlebot, which is a synonym ofrobots, but is only followed by Googlebot, the indexing crawler for Google;
      • publisher, defining, in a free format, the name of the publisher of the document. Note that it can be the name of the institution;
      • robots, defining the behavior that cooperative crawlers should have with the page. It is a comma-separated list of values taken in the following list:
        Values for the content of <meta >
        ValueDescriptionUsed by
        indexAllows the robot to index the pageAll
        noindexPrevents the robot from indexing the pageAll
        followAllows the robot to follow the links on the pageAll
        nofollowPrevents the robot from following the links on the pageAll
        noodpPrevents the usage of theOpen Directory Projectdescription, if any, as the description of the page in the search engine results page

        Google,Yahoo,Bing

        noarchivePrevents the search engine from caching the content of the pageGoogle,Yahoo
        nosnippetPrevents the display of any description of the page in the search engine results pageGoogle
        noimageindexPrevents this page from appearing as the referring page of an indexed imageGoogle
        noydirPrevents the usage of the Yahoo Directory description, if any, as the description of the page in the search engine results pageYahoo
        nocacheSynonym ofnoarchiveBing
        Notes:
        • Only cooperative robots will follow the rules defined by the robots name. Do not expect to keep e-mail harvesters at bay with this.
        • The robot still needs to access the page in order to read the meta value. If you want to keep them at bay, for example to prevent bandwidth consumption, use arobots.txtfile instead(or in complement).
        • If you want to remove the page of an index, changing the meta tonoindexwill work, but only when the robot visit the page again. Be sure not to prevent such visits, via therobots.txtfile for example. Some search engines have developers tools, allowing a quick removal of some page.
        • Some possible values are mutually exclusive, like usingindexandnoindex,orfollowandnofollow, at the same time. In these cases the behavior of the robot is undefined, and may vary from one to the other. So avoid these cases.
        • Some search engine crawler robots, like those of Google, Yahoo Search or Bing, support the same values on an HTTP directive,X-Robot-Tags: this allows them to use these pragma on non-HTML documents, like images.
      • slurp,与robots一样，但其仅使用于 Slurp -- Yahoo Search的抓取工具。
      • viewport,它提供有关视口初始大小的提示，仅供移动设备使用。
        • 值的内容为：<meta >
          Value可能值描述
          width一个正整数或者字符串device-width以pixels（像素）为单位，定义viewport（视口）的宽度。
          height一个正整数或者字符串device-height以pixels（像素）为单位，定义viewport（视口）的高度。
          initial-scale一个0.0到10.0之间的正数定义设备宽度（纵向模式下的设备宽度或横向模式下的设备高度）与视口大小之间的缩放比率。
          maximum-scale一个0.0到10.0之间的正数定义缩放的最大值；它必须大于或等于minimum-scale的值，不然会导致不确定的行为发生。
          minimum-scale一个0.0到10.0之间的正数定义缩放的最小值；它必须小于或等于maximum-scale的值，不然会导致不确定的行为发生。
          user-scalable一个布尔值（yes或者no）如果设置为 no，用户将不能放大或缩小网页。默认值为 yes。
          规范StatusComment
          CSS Device Adaptation
          <meta >          		Working Draft非规范地描述了Viewport META元素
          See also:@viewport
          Notes:
          • 虽然标准化程度不高，但由于事实上的支配地位，大多数移动浏览器都尊重这一声明。
          • 不同设备和浏览器之间的默认值可能不同。
          • 要在Firefox for Mobile中了解此声明，请参阅this article.
    • schemeTHML5中废弃
      This attribute defines the scheme in which the metadata is described. A scheme is a context leading to the correct interpretations of thecontentvalue, like a format.
      Notes:Do not use this attribute as it is obsolete. There is no replacement for it as there was no real usage for it. Omit it altogether.

    Notes

    Depending on the attributes set, the kind of metadata can be one of the following:

    • Ifnameis set, it is document-levelmetadata, applying to the whole page.
    • Ifhttp-equivis set, it is a pragma directive— information normally given by the web server about how the web page is served.
    • Ifcharsetis set, it is a charset declaration— the character encoding used by the webpage.
    • Ifitempropis set, it is user-defined metadata— transparent for the user-agent as the semantics of the metadata is user-specific.

    标签定义及使用说明

    元数据（Metadata）是数据的数据信息。

    <meta>标签提供了 HTML 文档的元数据。元数据不会显示在客户端，当时会被浏览器解析。

    META元素通常用于指定网页的描述，关键词，的文件的最后修改，作者，和其他元数据。

    元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。

    提示和注释

    注意：<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 name="keywords" content="html, css, xml, xhtml, javascript" />

    定义对页面的描述：

    <meta name="description" content="免费的 web 技术教程。" />

    定义页面的最新版本：

    <meta name="revised" content="david, 2008/8/8/" />

    定义页面作者：

    <meta name="author" content="hege refsnes">

    每 5 秒刷新一次页面：

    <meta http-equiv="refresh" content="5" />

    实例

    描述 HTML 文档的元数据：

    <head>
<meta name="description" content="free web tutorials">
<meta name="keywords" content="html,css,xml,javascript">
<meta name="author" content="ståle refsnes">
<meta charset="utf-8">
</head>

    上篇：<link>

    下篇：<style>