path: root/files/zh-cn/web/html/element/meta/name/index.html

---
title: 标准元数据名称
slug: Web/HTML/Element/meta/name
tags:
  - HTML
  - 元数据
  - 参考
  - 属性
translation_of: Web/HTML/Element/meta/name
---
<div>{{HTMLRef}}</div>

<p><span class="seoSummary">The {{htmlelement("meta")}} 元素可用于提供 名称-值 对形式的文档元数据，{{htmlattrxref("name", "meta")}} 属性为元数据条目提供名称，而 {{htmlattrxref("content", "meta")}} 属性提供值。</span></p>

<h3 id="HTML_规范中定义的标准元数据名称">HTML 规范中定义的标准元数据名称</h3>

<p>HTML 规范定义了以下标准元数据名称：</p>

<ul>
 <li>
  <p><code>application-name</code>：网页中所运行的应用程序的名称。</p>

  <div class="note"><strong>备注：</strong>

  <ul>
   <li>浏览器可能使用此名称来识别应用程序。It is different from the {{HTMLElement("title")}} element, which usually contain the application name, but may also contain information like the document name or a status.</li>
   <li>简单的网页不应当使用 <code>application-name</code>。</li>
  </ul>
  </div>
 </li>
 <li><code>author</code>：文档作者的名字。</li>
 <li><code>description</code>：一段简短而精确的、对页面内容的描述。一些浏览器，比如 Firefox 和 Opera，将其用作书签的默认描述。</li>
 <li><code>generator</code>：生成此页面的软件的标识符（identifier）。</li>
 <li><code>keywords</code>：与页面内容相关的关键词，使用逗号分隔。</li>
 <li><code>referrer</code>：控制由当前文档发出的请求的 HTTP {{httpheader("Referer")}} 请求头。
  <table class="standard-table">
   <caption><code>&lt;meta name="referrer"&gt;</code> 的 <code>content</code> 属性的值</caption>
   <tbody>
    <tr>
     <td><code>no-referrer</code></td>
     <td>不发送 HTTP {{httpheader("Referer")}} 请求头。</td>
    </tr>
    <tr>
     <td><code>origin</code></td>
     <td>只发送当前文档的 {{glossary("origin")}}。</td>
    </tr>
    <tr>
     <td><code>no-referrer-when-downgrade</code></td>
     <td>如果请求目标与当前页面一样安全或者更加安全（HTTP(S)→HTTPS），则发送完整 URL；如果请求目标更加不安全（HTTPS→HTTP），则不发送  referrer。这是默认行为。</td>
    </tr>
    <tr>
     <td><code>origin-when-cross-origin</code></td>
     <td>对同源请求发送完整 URL（不含 URL 参数），其他情况下，只发送 origin。</td>
    </tr>
    <tr>
     <td><code>same-origin</code></td>
     <td>对同源请求发送完整 URL（不含 URL 参数），其他情况下，请求不包含 referrer 请求头。</td>
    </tr>
    <tr>
     <td><code>strict-origin</code></td>
     <td>如果请求目标与当前页面一样安全或者更加安全（HTTP(S)→HTTPS），则发送 origin；如果请求目标更加不安全（HTTPS→HTTP），则不发送  referrer。</td>
    </tr>
    <tr>
     <td><code>strict-origin-when-cross-origin</code></td>
     <td>对同源请求发送完整 URL（不含 URL 参数）；其他情况下，如果请求目标与当前页面一样安全或者更加安全（HTTP(S)→HTTPS），则发送 origin；如果请求目标更加不安全（HTTPS→HTTP），则不发送  referrer。</td>
    </tr>
    <tr>
     <td><code>unsafe-URL</code></td>
     <td>对同源请求和跨源请求发送完整 URL（不含 URL 参数）。</td>
    </tr>
   </tbody>
  </table>

  <div class="note"><strong>备注：</strong>

  <ul>
   <li>动态插入 <code>&lt;meta name="referrer"&gt;</code>（使用 {{domxref("Document.write", "document.write()")}} 方法或者 {{domxref("Node.appendChild", "appendChild()")}} 等方法）会使 referrer 行为变得不可预测。</li>
   <li>如果定义了互相冲突的策略，则会转而使用 <code>no-referrer</code> 策略。</li>
  </ul>
  </div>
 </li>
 <li><code><a href="/zh-CN/docs/Web/HTML/Element/meta/name/theme-color">theme-color</a></code>：表示当前页面的建议颜色，在自定义当前页面从或页面周围的用户界面的显示时，用户代理应当使用此颜色。<code>content</code> 属性应当包含一个有效的 CSS {{cssxref("&lt;color&gt;")}} 值。</li>
</ul>

<h3 id="其他规范中定义的标准元数据名称">其他规范中定义的标准元数据名称</h3>

<p>CSS 颜色调整规范（CSS Color Adjustment specification）定义了以下元数据名称：</p>

<ul>
 <li>
  <p><code>color-scheme</code>: 指定与当前文档兼容的一种或多种配色方案。</p>

  <p>浏览器将优先采用此元数据的值，然后再使用用户的浏览器或设备设置，来确定页面上的各种默认颜色和元素外观，例如背景色、前景色、窗体控件和滚动条。<code>&lt;meta name="color-scheme"&gt;</code> 的主要用途是指示当前页面与浅色模式和深色模式的兼容性，以及选用这两种模式时的优先顺序。</p>

  <p><code>color-scheme</code> 的 {{htmlattrxref("content", "meta")}} 属性的值应当为以下值中的一个：</p>

  <dl>
   <dt><code>normal</code></dt>
   <dd>该文档未指定（unaware of）配色方案，应当仅使用默认配色进行渲染。</dd>
   <dt>[<code>light</code> | <code>dark</code>]+</dt>
   <dd>文档所支持的一种或多种配色方案。如果多次指定同一个配色方案，则与仅指定一次效果相同。如果指定了多种配色方案，则表示文档优先选择第一种方案——如果用户更倾向于选择第二种配色方案，则可以接受第二种。</dd>
   <dt><code>only light</code></dt>
   <dd>表示文档<em>仅</em>支持浅色模式，也就是浅色背景色和深色前景色。按照规范，<code>only dark</code> <em>是无效的</em>。如果在文档不支持深色模式的情况下强迫其以深色模式进行渲染，会导致内容不可读。所以，在未经配置的情况下，所有主要浏览器均默认使用浅色模式。</dd>
  </dl>

  <p>For example, to indicate that a document prefers dark mode but does render functionally in light mode as well:</p>

  <pre class="brush: html notranslate">&lt;meta name="color-scheme" content="dark light"&gt;</pre>

  <p>This works at the document level in the same way that the CSS {{cssxref("color-scheme")}} property lets individual elements specify their preferred and accepted color schemes. Your styles can adapt to the current color scheme using the {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}} CSS media feature.</p>
 </li>
</ul>

<p>CSS 设备适配规范（CSS Device Adaptation specification）定义了以下元数据名称：</p>

<ul>
 <li><code>viewport</code>: 为{{glossary("viewport")}}（视口）的初始大小提供指示（hint）。目前仅用于移动设备。</li>
 <li>
  <table class="fullwidth-table">
   <caption><code>&lt;meta name="viewport"&gt;</code> 的 <code>content</code> 属性的值</caption>
   <thead>
    <tr>
     <th scope="col">值</th>
     <th scope="col">可能的附加值</th>
     <th scope="col">描述</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td><code>width</code></td>
     <td>一个正整数，或者字符串 <code>device-width</code></td>
     <td>定义 viewport 的宽度，如果值为正整数，则单位为像素。</td>
    </tr>
    <tr>
     <td><code>height</code></td>
     <td>一个正整数，或者字符串 <code>device-height</code></td>
     <td>定义 viewport 的高度。未被任何浏览器使用。</td>
    </tr>
    <tr>
     <td><code>initial-scale</code></td>
     <td>一个 <code>0.0</code> 和 <code>10.0</code> 之间的正数</td>
     <td>定义设备宽度（宽度和高度中更小的那个：如果是纵向屏幕，就是 <code>device-width</code>，如果是横向屏幕，就是 <code>device-height</code>）与 viewport 大小之间的缩放比例。</td>
    </tr>
    <tr>
     <td><code>maximum-scale</code></td>
     <td>一个 <code>0.0</code> 和 <code>10.0</code> 之间的正数</td>
     <td>定义缩放的最大值，必须大于等于 <code>minimum-scale</code>，否则表现将不可预测。浏览器设置可以忽略此规则；iOS 10 开始，Safari iOS 默认忽略此规则。</td>
    </tr>
    <tr>
     <td><code>minimum-scale</code></td>
     <td>一个 <code>0.0</code> 和 <code>10.0</code> 之间的正数</td>
     <td>定义缩放的最小值，必须小于等于 <code>maximum-scale</code>，否则表现将不可预测。浏览器设置可以忽略此规则；iOS 10 开始，Safari iOS 默认忽略此规则。</td>
    </tr>
    <tr>
     <td><code>user-scalable</code></td>
     <td><code>yes</code> 或者 <code>no</code></td>
     <td>默认为 <code>yes</code>，如果设置为 <code>no</code>，用户将无法缩放当前页面。浏览器设置可以忽略此规则；iOS 10 开始，Safari iOS 默认忽略此规则。</td>
    </tr>
    <tr>
     <td><code>viewport-fit</code></td>
     <td><code>auto</code>、<code>contain</code> 或者 <code>cover</code></td>
     <td>
      <p>The <code>auto</code> value doesn’t affect the initial layout viewport, and the whole web page is viewable.</p>

      <p>The <code>contain</code> value means that the viewport is scaled to fit the largest rectangle inscribed within the display.</p>

      <p>The <code>cover</code> value means that the viewport is scaled to fill the device display. It is highly recommended to make use of the <a href="/zh-CN/docs/Web/CSS/env">safe area inset</a> variables to ensure that important content doesn't end up outside the display.</p>
     </td>
    </tr>
   </tbody>
  </table>

  <div class="note"><strong>备注：</strong>

  <ul>
   <li>虽然此元数据条目未被标准化，但是，由于此条目在事实上处于支配地位，大多数移动浏览器都遵守此条目的声明。</li>
   <li>不同设备和浏览器的默认值可能有不同。</li>
   <li>若想了解 Firefox 移动版对此声明的支持和处理，请参考<a href="/zh-CN/docs/Mobile/Viewport_meta_tag" title="Mobile/Viewport meta tag">这篇文章</a>。</li>
  </ul>
  </div>

  <h5 id="关于_viewport_缩放的可访问性考量">关于 viewport 缩放的可访问性考量</h5>

  <div>将 <code>user-scalable</code> 设置为 <code>no</code> 会阻止一切意义上的缩放，视力不好的人可能会因此无法阅读和理解页面内容。</div>

  <ul>
   <li><a href="/zh-CN/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
   <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html">Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0</a></li>
  </ul>

  <h5 id="参见">参见</h5>

  <p><a href="/zh-CN/docs/Web/CSS/@viewport"><code>@viewport</code></a> CSS @ 规则。</p>
 </li>
</ul>

<h3 id="其他元数据名称">其他元数据名称</h3>

<p>The <a class="external" href="https://wiki.whatwg.org/wiki/MetaExtensions">WHATWG Wiki MetaExtensions page</a> contains a large set of non-standard metadata names that have not been formally accepted yet; however, some of the names included there are already used quite commonly in practice — including the following:</p>

<ul>
 <li><code>creator</code>：当前文档的创建者，例如某个组织或者机构。如果有不止一个创建者，则应当使用多个名称为 <code>creator</code> 的 {{HTMLElement("meta")}} 元素。（而不是像关键词一样使用逗号分隔：关键词不应包含逗号，但创建者名称可能含有逗号。）</li>
 <li><code>googlebot</code>：<code>robots</code> 的替代名称，只被 Googlebot（Google 的网页爬虫/索引搜寻器）使用。</li>
 <li><code>publisher</code>：当前文档的发布者/出版者。</li>
 <li><code>robots</code>：爬虫、协作搜寻器，或者“机器人”，对此页面的处理行为，或者说，应当遵守的规则。是一个使用逗号分隔的、由下列值构成的列表：
  <table class="standard-table">
   <caption><code>&lt;meta name="robots"&gt;</code> 的 <code>content</code> 属性的值</caption>
   <thead>
    <tr>
     <th scope="col">值</th>
     <th scope="col">描述</th>
     <th scope="col">被用于</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td><code>index</code></td>
     <td>允许机器人索引此页面（默认）。</td>
     <td>所有爬虫</td>
    </tr>
    <tr>
     <td><code>noindex</code></td>
     <td>要求机器人不索引此页面。</td>
     <td>所有爬虫</td>
    </tr>
    <tr>
     <td><code>follow</code></td>
     <td>允许机器人跟随此页面上的链接（默认）。</td>
     <td>所有爬虫</td>
    </tr>
    <tr>
     <td><code>nofollow</code></td>
     <td>要求机器人不跟随此页面上的链接。</td>
     <td>所有爬虫</td>
    </tr>
    <tr>
     <td><code>all</code></td>
     <td>与 <code>index, follow</code> 等价</td>
     <td><a class="external" href="https://support.google.com/webmasters/answer/79812">Google</a></td>
    </tr>
    <tr>
     <td><code>none</code></td>
     <td>与 <code>noindex, nofollow</code> 等价</td>
     <td><a class="external" href="https://support.google.com/webmasters/answer/79812">Google</a></td>
    </tr>
    <tr>
     <td><code>noarchive</code></td>
     <td>要求搜索引擎不缓存页面内容。</td>
     <td><a class="external" href="https://developers.google.com/webmasters/control-crawl-index/docs/robots_meta_tag#valid-indexing--serving-directives">Google</a>、<a class="external" href="https://help.yahoo.com/kb/search-for-desktop/SLN2213.html">Yahoo</a>、<a class="external" href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">Bing</a></td>
    </tr>
    <tr>
     <td><code>nosnippet</code></td>
     <td>Prevents displaying any description of the page in search engine results.</td>
     <td><a class="external" href="https://developers.google.com/webmasters/control-crawl-index/docs/robots_meta_tag#valid-indexing--serving-directives">Google</a>、<a class="external" href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">Bing</a></td>
    </tr>
    <tr>
     <td><code>noimageindex</code></td>
     <td>Requests this page not to appear as the referring page of an indexed image.</td>
     <td><a class="external" href="https://developers.google.com/webmasters/control-crawl-index/docs/robots_meta_tag#valid-indexing--serving-directives">Google</a></td>
    </tr>
    <tr>
     <td><code>nocache</code></td>
     <td><code>noarchive</code> 的替代名称。</td>
     <td><a class="external" href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">Bing</a></td>
    </tr>
   </tbody>
  </table>

  <div class="note"><strong>备注：</strong>

  <ul>
   <li>只有正规的爬虫/协作搜寻器/机器人遵守这些规则。不要指望爬取电子邮件地址的恶意爬虫也这么做。</li>
   <li>只有访问相应的页面之后，机器人才能读取到这些规则。为避免这一点带来的带宽消耗，可以在 <em>{{Glossary("robots.txt")}}</em> 文件中声明一些规则。</li>
   <li>如果你想从机器人的索引中移除某个页面，<code>noindex</code> 可以做到这一点，但机器人还是得先访问那个页面，读取到 <code>noindex</code> 规则。遇到这种情况时，请确保 <code>robots.txt</code> 文件没有阻止机器人重新访问那个页面。</li>
   <li>一些规则是互相矛盾的比如 <code>index</code> 和 <code>noindex</code>，或者 <code>follow</code> 和 <code>nofollow</code>。这种情况下，机器人的表现是不可预测的，而且不同机器人的表现可能有不同。</li>
   <li>一些爬虫机器人，比如 Google、Yahoo 和 Bing 的搜索引擎爬虫，支持在 HTTP <code>X-Robots-Tag</code> 请求头中应用相同的规则。这允许非 HTML 文档和文件等应用这些规则。</li>
  </ul>
  </div>
 </li>
</ul>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">规范</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', '#standard-metadata-names', 'standard metadata names')}}</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS Color Adjust', '#color-scheme-meta', 'the "color-scheme" metadata name')}}</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Device', '#viewport-meta', 'the "viewport" metadata name')}}</td>
  </tr>
  <tr>
   <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-meta', 'the "referrer" metadata name')}}</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<p>{{Compat("html.elements.meta.name")}}</p>